React is one of the hottest frontend libraries today. Its component based structure makes projects easy to manage. Although it is popular and powerful, it’s still only the view of the MVC framework. Personally I enjoy using Nodejs and Express for backend development. In the past 2 years, I have started many personal and work projects with this stack, so I put together a light boilerplate project to help me kick things off. Now I am not going to go into too much details, but I’ll give a brief explanation about the project structure and what each folder and file is responsible for.
The app folder contains all of the React files as follows
Components is the core of React projects. Components contains js files that return each view of the project. These components can be included in other components to put together the entire web page, and can also be routed to a path in routes.js
As introduced earlier, reducers are the building blocks of Redux. Inside of each reducer, you can initiate different state variables which can be connected to React components to display their values using connect from the react-redux library.
Store allows you to integrate different middleware into your React project. I have seen a lot of developers adding this block of code in app.js, but I find it more organized to have its own location.
This folder is self explanatory, it contains tests for your project.
First start by cloning the git repo
git clone https://github.com/rjzheng/REWBoilerplate [app_name]
Before doing anything else, we need to install all of the node libraries
At this point, all of the preparations are done, and we can start up our project
The project should be started and open your favorite browser and direct to “localhost:8080” to access your web app. If everything’s done with no errors, you should see your boilerplate running successfully.
Please let me know if I left out any important details and if you have any questions.