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.

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

Then you should install required dependencies.

1yarn install

Getting started

To launch project you need to execute following command:

1yarn 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:

1yarn lint

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

1yarn fix

Jest tests

Jest with Enzyme is used for testing.

1yarn test

Setup pre-commit

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

1yarn 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