5 July 2017

Customizing the ReactJS sample application created using react-cli

Some time you may want to create the react.js application using react-cli and you may also want to customize it according to your requirements.

react-cli command always get the latest version of all the libraries. for instance if you look at the package.json file then you will see the following contents:

package.json
========================================================================

{
  "name": "testapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  },
  "devDependencies": {
    "react-scripts": "1.0.10"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

========================================================================

You can that it has downloaded the version of react and react-dom as 15.6.1.

if you want to download the other version of the react or react-dom then you can change the version number here. You can just delete the node_modules folder then and then run the npm install command. 


it will install all the library with the same version you have specified. For big application which may contains the Router, Redux, Grunt and JS Obfuscator i will recommend you to use the below package.json file.


package.json

=======================================================================

{
  "name": "testapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "babel-loader": "^6.2.5",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.23.0",
    "css-loader": "^0.25.0",
    "fixed-data-table": "^0.6.3",
    "grunt": "^1.0.1",
    "grunt-babel": "^6.0.0",
    "grunt-cli": "^1.2.0",
    "grunt-contrib-uglify": "^2.2.0",
    "grunt-contrib-watch": "^1.0.0",
    "jquery": "^3.1.1",
    "js-obfuscator": "^0.1.1",
    "react": "^15.3.2",
    "react-bootstrap": "^0.30.3",
    "react-cookie": "^0.4.8",
    "react-datepicker": "^0.29.0",
    "react-dom": "^15.3.2",
    "react-redux": "^4.4.5",
    "react-router": "^3.0.0",
    "react-router-redux": "^4.0.7",
    "react-tabs": "^0.8.0",
    "redux": "^3.0.0",
    "youtube-player": "^5.4.0"
  },
  "devDependencies": {
    "react-scripts": "1.0.7"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

1 comment: