Total.js + React (React.js) = Simplicity and Efficiency

How consolidate React (js) with Total.js and preserve their directory structures and minimizing integration work to a minimum. Below we present a simple skeleton on the basis of which you can create powerful applications based on React and Total.js.

“React (sometimes styled React.js or ReactJS) is an open-source JavaScript library for building user interfaces. It is maintained by Facebook, Instagram and a community of individual developers and corporations. According to JavaScript analytics service Libscore, React is currently being used on the websites of Netflix, Imgur, Bleacher Report, Feedly, Airbnb, SeatGeek, HelloSign, Walmart, and others. As of March 2016, React and React Native are Facebook’s top two open-source projects by number of stars on GitHub,^[6] and React is the 5th most starred project of all time on GitHub.” (source wikipedia )

Assumptions and Benefits our project:

Design and build modular applications based on components
Use modern JavaScript tools like npm, Babel, Webpack and another not mentioned in this article

Below presented skeleton/project You can find on my GitHub repository: https://github.com/maxprog/totaljs-react

Structure of directories is following:

Expanded structure directories of total.js:

Expanded structure directories of React.js:

The most important:

In case of catalogs structure:

/client – React.js directory
Remaining directories – Total.js

In case of configuration Total.js:

You have to define React.js directory in config file.
You have to block total.js process of compiling script – for this process will be responsible Webpack and React.js
If You want use /public to storage css, img or another files then You have change “directory-public” to correct directory e.g. /public/
Please remember about placing @{layout(”)} in index.html

Last very important file is webpack config called as webpack.config.js responsible for create bundle from all files located in /client directory

The last operation it is installation process all necessary modules:

Install the total.js in project directory or globally with option -g
```
npm install -g total.js 
```
Install the dependencies for React.js in /client
```
npm install
```
run webpack for React. Bundled files will be copied to /public directory
```
npm run webpack
```
Start the server from the root directory of project
```
node server
```
Visit http://localhost:8000
That’s all – Now You can create Amazing and Professional SPA applications

February 6th, 2017
Posted in Node.js, React, Total.js