Building with React & Flux

Bedrock ships with React, React Router and Flux. This allows you to start using React components inside your web application. Let’s walk through an example of how to use React and Flux to build client-side pages.

Building Client-side Pages using React

Create a React Component: Create a new React page anywhere inside frontend/assets/components/. Let’s create one called MainPage.js.

import React from "react";
 const MainPage extends React.Component {
     render() {
         return (
             <section>Main Page contents go here</section>
         );
     }
 }
 export default MainPage;

Create Client-side Route: Now, let’s say we want this to render when a logged-in user goes to the /main route. To do this, we will need to add a server-side route and a client-side route. To add the client-side route, we need to edit assets/frontend/app.js. This page lists all the client-side routes using React Router. Add the following:

import React from "react";
 import createClass from "create-react-class";
 import { BrowserRouter, Route } from "react-router-dom";
 import { AppContainer } from "react-hot-loader";
 import { Provider, connect, nuclearMixin } from "nuclear-js-react-addons";
 import ReactDOM from "react-dom";
 import reactor from "./reactor";

 import MainPage from "./components/MainPage";

 const App = createClass({
     render() {
         return (
             <Provider reactor={reactor}>
                 <BrowserRouter>
                     <div>
                         <Route path="/" component={MainPage} />
                     </div>
                 </BrowserRouter>
             </Provider>
         );
     }
 });

Create Server-side Route: This sets up React Router so that it renders MainPage whenever /main is navigated to. However, we need to also create a server-side route to the page. To add the server-side route, we will edit config/routes.js. Add the following line in:
```
'get /main': 'PageController.renderLoggedInReactPage'
```
Restart Server: The renderLoggedInReactPage() method is defined inside api/controllers/PageController.js. It just renders an empty page with a single <div id="main"> tag that renders your React components. It also sets up some middleware (defined inside config/policies.js) to ensure that only logged-in users can see the page.

After completing these steps, restart the server. Then, login and go to the /main route. You should see the new React compoent that you just created.

Integrating with Flux

Bedrock also ships with NuclearJS – a Flux library developed by Optimizely. Below, I’ll demonstrate how we can use Flux stores and actions with React and React Router.

The main entry point for NuclearJS is assets/frontend/reactor.js. There are also some empty files created to help you define actions, action types, and getters. These live inside assets/frontend/modules/.

Don’t want NuclearJS or Flux? You can easily swap NuclearJS for Redux, or remove it completely from your project. Just edit or remove assets/frontend/reactor.js and assets/frontend/modules/. Nothing will be impacted.

You can learn more about how to build apps with React and NuclearJS on the NuclearJS documentation.

React Hot Loading

Bedrock ships with React Hot Loader, which allows you to tweak React components in real-time by just saving your code changes. There’s no page refreshing required. In addition, if you are using any Flux Stores to save data, that data is preserved across code changes.

To enable React Hot Loading, run:

npm start

This will start 3 processes:

A Grunt watcher that watches for changes to CSS/JS files and runs incremental Webpack builds super fast.
A Webpack Dev Server that serves up all built CSS/JS files (runs on PORT 3000).
A Sails Server that serves all server-side code (runs on PORT 1337).

After running npm start, any code changes that you make will automatically update the website.

To just build your files without starting the servers, run:

grunt build

This will automatically start watching for changes, and incrementally build those changes instantaneously. With the help of Webpack, your front-end code will automatically be chunked, so the each page will receive only the JavaScript that it needs.

When you are building your assets for production, run grunt buildProd instead.