rex is yet another React boilerplate. It provides a basic, but universal, html rendering layer. As such, it isn't meant to provide an http api, but to be deployed in front of one or more such apis. That being said, rex supports mocking an api using Swagger specs for local development.
- Keep it simple, modular and universal
- Leverage next-gen technology (JSX, TC39, CSSWG specs)
Using Babel, all our ECMAScript and JSX code in is being transpiled to vanilla JavaScript (ES5) that is understood by NodeJS and all proper Browsers. If you need to get to know all that nice new syntax, there is plenty of great resources online.
Flux is not so much a framework or module, but rather an architectural pattern. It prescribes a unidirectional data flow that complements React view components quite nicely.
A Flux application typically consists of a dispatcher, a couple of stores (i.e. application state containers) and some view components. These view components create and dispatch actions that modify the stores. Changes in stores, in turn, trigger re-rendering of the views.
The Flux implementation chosen for rex is Redux. Redux is billed as "a predictable state container for JavaScript apps". As such, it consist of a single store with a dispatch function, reducers triggered by this function and manipulating the store, and action creators providing the actions to dispatch.
rex supports asynchronous actions by relying on redux-actions and redux-promise. In rex, routing state is also integrated with Redux.
React is awesome. It is basically a view library using JSX and providing a virtual DOM. React components are composable element types comprising of structure/markup, functionality (e.g. data binding) and styling.
By combining a virtual DOM with a unidirectional data flow, with React it isn't hard to build highly complex user interfaces that are extremely easy to reason about.
From a JavaScript developer's perspective, CSS has some issues. CSSModules attempt to actually solve some of them: it limits the scope of css classes to the components they are applied to.
CSSModules aren't strictly tied to React or other parts of the rex stack, but React and CSSModules are quite the ideal combination.
CSS evolution basically obsoletes preprocessors such as LESS, SASS and Stylus. Using PostCSS and CSSNext, we have variables, nesting and lots of other goodies while still writing spec compliant CSS.
Just like with Babel and JavaScript, with CSSNext we are simply transpiling, polyfilling and prefixing the modern CSS we write to support a wide range of current browsers.
rex is keeping it simple: instead of using Grunt, Gulp or another task runner it simply uses npm scripts. rex uses Webpack with hot module reloading and all kinds of magic 🦄.
In development mode, every single dependency needs to be installed. Development "builds" are unminified, contain source maps and produce some debug output. They are generated and delivered by an instance of webpack-dev-server that is also acting as an inline proxy and supporting hot module replacement.
npm install
npm start
open http://localhost:3000
For production mode, dev-dependencies don't need to be pulled in - and build and server settings are automatically adjusted for maximum performance.
npm install --production
npm start --production