## Table of contents
* [How to install](#howtoinstall)
* [Getting started](#gettingstarted)
* [Run linter](#runlinter)
* [Run tests](#runtests)
* [Setup pre-commit](#precommit)
* [Project structure](#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.
```bash
git clone https://github.com/awibox/react-redux-app-template.git ProjectName
cd ProjectName
```
Then you should install required dependencies.
```bash
yarn install
```
## Getting started
To launch project you need to execute following command:
```bash
yarn start
```
Open in browser: [http://localhost:8888](http://localhost:8888)
You can change the port in the [webpack.config.js](webpack.config.js#L141)
## ESlint
For code checking we use ESLint with airbnb configuration.
To run linter you need to execute command:
```bash
yarn lint
```
If you need to launch automatic mistakes fixing you need to execute following command:
```bash
yarn fix
```
## Jest tests
Jest with Enzyme is used for testing.
```bash
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.
```bash
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
```