HOWTO: Develop with React Redux

React by Facebook is view library that popularized the virtual DOM model for building UIs. It promotes HTML and CSS to be written in JavaScript giving developers full control of the presentation layer that is often difficult using the native DOM API. Paired with Redux, "a predictable state container for JavaScript apps", views can built declaratively.

But your application also needs a serious back end that will allow you to build your application quickly and concentrate on features without reinventing the wheel. This is what the Nuxeo Platform provides you with. When users browse your web application, it will actually call the Nuxeo Platform through its REST API in order to handle and retrieve content.

Our React Redux bootstrap comes with plenty of helpful tools:

• Full webpack build module
• Nuxeo JS Client included
• All test and integration tooling
• Build command to package application as Nuxeo bundle.

Starting React Project

This section will help you to get started on a React project. This will be covered in three steps:

• Installing prerequisites
• Using Nuxeo CLI
• Building a Nuxeo Package that can be deployed on a Nuxeo Platform instance

Step 1 - Installing Prerequisites

In order to get a clean installation, we will make use of Nuxeo CLI. So let's install it along with its prerequisites:

1. Install Git.
2. Install node.js and ensure NPM is installed.

3. In a terminal, use NPM to install the CLI tool:

   $ npm install -g nuxeo-cli
   

Step 2 - Bootstrap Nuxeo Bundle and Package

1. Using CLI.

   $ nuxeo sample
   

   Select the option for ReactJS.

2. Follow Build instructions from Github Page.

$ mvn clean install -Pmp

1. Navigate to reactjs-sample-ftest/target/tomcat The tomcat folder contains the whole application. From bin folder:

$ ./nuxeoctl console

1. Go to http://localhost:8080
2. Log In with username: Administrator, password: Administrator
3. Open http://NUXEO_SERVER/nuxeo/sampleUI

Step 3 - Let's code

• reactjs-sample-ftest/target/tomcat/nxserver/nuxeo.war/sampleUI: contains running folder.
• react-sample-ui: contains package folder. From package folder run:

$ npm install
$ webpack --watch

• react-sample-ui/src/main/app: let's code here.

  +-- app
  |   +-- actions
  |   +-- components
  |   +-- constants
  |   +-- css
  |   +-- images
  |   +-- reducers
  |   +-- store
  |   +-- tree_node
  |   +-- utils
  +-- bundle.js
  +-- entry.jsx
  +-- index.html
  

• React: documentation on how to build React components. Examples can be found in the components folder.

• Redux: documentation on how to build redux apps. store, actions, utils, reducers folders contain redux pieces.
• Babel: transpiler for ES6, imports, .jsx and more.
• React Router: for routing.
• Webpack: build module.
• Nuxeo JS Client: in the utils folder. Requests are in this folder.

Step 4 - Extending the UI

• Rebuild

$ mvn clean install -Pmp

• or bundle javascript files to reactjs-sample-ftest/target/tomcat/nxserver/nuxeo.war/sampleUI with webpack.