Cli-react-redux NPM

cli-react-redux

Quick Overview

CLI React Redux generates a project structure to make you able to save time and effort when starting a new React project. Not only does it create the strucure but also you get the initial functionality and tests that help you get started quickly even if you don't have much React experience yet.

After you have created a new react app by using the amazing tool create-react-app, the initial project structure will be generated as following:

.
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── registerServiceWorker.js

By installing this package, your project structure will be updated as following:

.
├── App.css
├── App.js
├── Navigator.js
├── __tests__
│   ├── App.test.js
│   ├── Navigator.test.js
│   ├── rootReducer.test.js
│   └── rootSaga.test.js
├── containers
│   └── home
│       ├── Home.js
│       ├── __tests__
│       │   ├── Home.test.js
│       │   ├── actionTypes.test.js
│       │   ├── index.test.js
│       │   ├── reducer.test.js
│       │   ├── sagas.test.js
│       │   └── selectors.test.js
│       ├── actionTypes.js
│       ├── index.js
│       ├── reducer.js
│       ├── sagas.js
│       └── selectors.js
├── index.css
├── index.js
├── logo.svg
├── registerServiceWorker.js
├── rootReducer.js
├── rootSaga.js
└── store.js

Install

Create a React project by using react-create-app

$ npx create-react-app my-app

You may want to remove App.js and App.test.js from the src folder:

$ rm App.js
$ rm App.test.js

Create the main container

$ npx cli-react-redux create firstcontainer Home

Create secondary container(s)

$ npx cli-react-redux create container Second

For now reducer and saga have to be added manually to rootReducer.js and rootSaga.js.

Add required dependencies

$ npm i axios redux redux-saga react-redux reselect history react-router-dom connected-react-router enzyme enzyme-adapter-react-16

Add the following lines to package.json for code coverage

"jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,mjs}"
    ],
    "coveragePathIgnorePatterns": [
      "<rootDir>/src/index.js",
      "<rootDir>/src/setupTests.js",
      "<rootDir>/src/registerServiceWorker.js"
    ],
    "coverageThreshold": {
      "global": {
        "branches": 100,
        "functions": 100,
        "lines": 100,
        "statements": 100
      }
    },
    "setupFiles": [
      "<rootDir>/src/setupTests.js",
      "<rootDir>/config/polyfills.js"
    ],

Run unit tests

npm test --coverage

Run

npm start

e2e aka UI tests

There's UI test generated when creating container. Test resides in e2e folder along with wdio conf file. We're using mocha as a testrunner, hence there's mocha timeout option set. See webdriver.io for more information hot to run and set up UI tests.