supun156/react-redux-app-template

The template that will help you quickly start developing your project using React

Table of contents

• How to install
• Getting started
• Run linter
• Run tests
• Setup pre-commit
• Project structure

How to install

You can use this project like template. To do this, you need press button "Use this template".

Or clone repository and go to the project folder.

git clone https://github.com/awibox/react-redux-app-template.git ProjectName
cd ProjectName

Then you should install required dependencies.

yarn install

Getting started

To launch project you need to execute following command:

yarn start

Open in browser: http://localhost:8888
You can change the port in the webpack.config.js

ESlint

For code checking we use ESLint with airbnb configuration. To run linter you need to execute command:

yarn lint

If you need to launch automatic mistakes fixing you need to execute following command:

yarn fix

Jest tests

Jest with Enzyme is used for testing.

yarn test

Setup pre-commit

You can set up git hook (pre-commit). In this case linter will be launched for necessary files before commit.

yarn setup

Project structure

react-redux-app-template/
|
├──public/                              // Directory for the build
|  ├──icons                             // Icons for the manifest.json and favicon
|  ├──favicon.ico
|  └──manifest.json                     // The web app manifest is a simple JSON file
|                                       // that tells the browser about your web application 
|                                       // and how it should behave when 'installed' 
|                                       // on the user's mobile device or desktop.
|
├──spec/                                // Directory with setup files for jest
|   └──...                       
|                      
├──src/                                   
|   ├──actions                          // Redux actions
│   │   ├──[name]Actions.js   
│   │   ├──...                   
│   │   └──types.js                     // Redux action type constants     
│   │
|   ├──components                       // Components that are reused                
│   │   ├──[Name] 
│   │   │   ├──[Name].js
│   │   │   ├──[Name].test.js           // Jest test
│   │   │   ├──[Name].test.js.snap      // Jest snapshot            
│   │   │   └──[Name].scss              // Components style         
│   │   └──...   
│   │  
|   ├──pages                            // Components that use redux connect (Containers)
│   │   ├──[Name] 
│   │   │   ├──[Name].js
│   │   │   ├──[Name].test.js           // Jest test
│   │   │   ├──[Name].test.js.snap      // Jest snapshot           
│   │   │   └──*[Name].scss             // Container styles (optional)        
│   │   └──...                                         
│   │
|   ├──reducers                         // Reducers
│   │   ├──[name]Reducer.js  
│   │   ├──[name]Reducer.test.js        // Jest test
│   │   ├──...  
│   │   └──index.js                     // combineReducers        
│   │
|   ├──selectors                        // reselect    
│   │   ├──[name]Selectors.js   
│   │   └──...
│   │
|   ├──styles                           
│   │   ├──_variables.scss              // SCSS variables (should be imported for use)
│   │   ├──build.scss                   // Basic styles
│   │   └──container.scss               // Style for router.js
│   │
|   ├──templates
│   │   └──index.html                   // The template by which index.html is created in public
│   │   
|   ├──config.js                        // Constant config 
|   ├──index.js                         // App entry
|   ├──router.js                        // Router
|   └──store.js                         // createStore 
|                                     
└──webpack.config.js                    // webpack config for development and production