awibox / 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

react-redux-app-template's Issues

Create Card component

Add Error component

App don't work in the Safari

Redesign header

Use async/await

Сreate config file

Create subpages for repos

repos/:user

Refactoring for home page

Catch errors using errorReducer

Integrate unit testing

Configure webpack-dev-server

Add manifest.json and icons

For using like mobile app

Add input for choice user on the repos page

Make the functionality of displaying user repositories. This displays the user interaction and shows how to work with fields

Setup production build in the webpack

Fix bug with navbar

Fix problems that eslint found

173 problems (171 errors, 2 warnings)

Redesign for author page

Redesign repos page

Organize column view for large screens

Set root directory for imports

Example change imports from:
import test from '../../../components/test'
to:
import component from './components/test'

Incorrectly working <Link> with external references

It is necessary to solve the problem, it may be worth using 'react-router'

Add PropTypes

Add eslint

It is advisable to use the airbnb config

Make a homepage

Create Button component

Add propTypes for functional components

Change component ReposList to ReposCard

Describe PropTypes

Export routers in the router.js

Bug with router

Problem with redirect

Problem: componentWillMount has been renamed, and is not recommended for use

react-dom.development.js:11494 Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

• Move code with side effects to componentDidMount, and set initial state in the constructor.
• Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: BrowserRouter, Route, Router

Add public directory

Make view for User on the repos page

Configure webpack to output images/fonts in a separate subfolders

Add icons to navbar

Make adaptive layout

Add @babel/plugin-proposal-class-properties

Add animation for navbar

Сombine actions and api files

Create 404 (Not found) page

Add "key" prop for map function

Create Title component

propTypes in the class (static)

Display a message when an error in the API

Add block with users to repos page

Resolve problem with Connect function

Make app logo in the home page

Don't work author page

Integrate the reselect

Clean and comment out the code

Media query for repos cards