bhargodevarya / react-workshop Goto Github PK

Node Package Manager (npm) is installed along with Node.js installation. npm command helps to install packages from registry.npmjs.org website. npm command install packages on node_modules folder on the project directory.

mkdir react-app

cd react-app

below command creates default package.json in your current working directory react-app

npm init -y

on npm 3.x, --save option helps to save the install package name in the package dependencies.

npm install react react-dom prop-types --save

For React-Router,

npm install react-router-dom --save

For redux,

npm install redux react-redux redux-thunk --save

For RxJS,

npm install rxjs --save

For jQuery

npm install jquery --save

For Fetch (Ajax calls) polyfills

npm install whatwg-fetch --save

For code splitting, split a modules that can be loaded separately

npm install react-loadable --save

Babel is a transpiler, convert ES2016 (ES6), ES2016, ES2017, ES.NEXT to the ES5, the old JavaScript.

npm install babel-preset-env babel-preset-stage-2 babel-preset-react --save-dev

Create the .babelrc in the project root directory

{
    "presets": ["env", "stage-2", "react"],
     "plugins": [
        "syntax-dynamic-import"
    ]
} 

Few more things with babel setup, when we need support for ES8 async/await keywords [to avoid regeneratorRuntime issue]

npm install --save babel-polyfill

Below lines must be added on top of main.js file.

import "babel-polyfill";

To support code splitting, lazy laod components bundle on need,

npm install babel-plugin-syntax-dynamic-import --save-dev

Webpack bundles many javascripts file into single js file, helps to load files faster in the browser.

We use src/main.js as an entry file, all files imported within main.js and its sub-files are bundled into app.bundle.js, served from memory.

npm install webpack webpack-dev-server babel-core babel-loader --save-dev

Install below plug-ins to handle css entries specific to components on its relative path.

npm install extract-text-webpack-plugin css-loader file-loader style-loader --save-dev

webpack config files are kept under src/config/webpack.config.js, src/config/webpack.prod.config.js

For production bundle, we need to copy the assets folders (copy-webpack-plugin), generate scripts and link tag dynamically based on hash code (html-webpack-plugin), clear the dist folder for every build (clean-webpack-plugin), For that, we need addtional plug-ins.

npm install copy-webpack-plugin html-webpack-plugin clean-webpack-plugin --save-dev

Jest is a test runner, uses jasmine for test description, comes with all packages pre-installed including test coverage.

__mocks__ is useful if you want to mock any files in the system, so that jest can import mock file rather than real project file.

npm install jest babel-jest enzyme enzyme-adapter-react-16 react-test-renderer --save-dev

to run test cases,

npm test

to run test cases with code coverage,

npm run test-coverage

test cases to be stored in __tests__ folder or stored with extenstion .spec.js or .test.js file in project directory.