This is a React template for a quick start with React and Redux.
The file structure is as follow:
Is the index file where we are going to load the application bundle inside a div with app identifier.
The main file for our application. It imports React, ReactDOM and Provider. It also imports our store and routes and it injects the store with the Provider and the routes in the ReactDOM.render() function in our anchor element in the DOM: <div id="app"></div>.
This is the main file for the store that imports the reducers from src/app/reducers, and the middleware for asynchronous calls (redux-thunk). It also when creating the store adds a line for the redux plugin for Chrome. This makes really easy to debug the store and travel forward and backward in time.
This file store three things: the routes, the imports for the components that respond to the routers and the events for the routers. We are going to use this events, onEnter to be precise, to authenticate the user and allow or not the navigation.
We also bind here the components from src/app/components with the store elements and actions, so we define the route elements as intelligent elements and the elements that depends on this route heads as dumb components that receive their props from their parent.
To add styles we are going to use Sass. I like Sass. So we are going to add the loader to WebPack and load the style.scss into our main.jsx file. The we will @import the rest of the files into style.scss, fonts, colors, variables… and this will allow us to maintain separated structure and styles having an only entry point:
import './style.scss';
The build:output script works with WebPAck Analyse and it’s amazing!