Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/awibox/react-redux-app-template
The template that will help you quickly start developing your project using React
https://github.com/awibox/react-redux-app-template
async-await css-modules immutablejs jest prop-types react react-router-v4 redux-thunk reselect scss webpack4
Last synced: 6 days ago
JSON representation
The template that will help you quickly start developing your project using React
- Host: GitHub
- URL: https://github.com/awibox/react-redux-app-template
- Owner: awibox
- License: mit
- Created: 2019-09-14T14:38:52.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-10-09T15:50:11.000Z (29 days ago)
- Last Synced: 2024-10-11T12:09:48.274Z (27 days ago)
- Topics: async-await, css-modules, immutablejs, jest, prop-types, react, react-router-v4, redux-thunk, reselect, scss, webpack4
- Language: JavaScript
- Homepage:
- Size: 4.55 MB
- Stars: 25
- Watchers: 3
- Forks: 4
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
## 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
```