We will install react with npm. The other option is using Yarn to manage front-end dependencies.
Prerequisites
- npm
Download and run the latest MSI.
Installation
- Create Workspace directory and navigate to the directory in command prompt. Initialize npm with the following command and answer the questions as shown below. You can go with the default options also and it will create a package.json file.
- Second step is to install React and ReactDOM libraries. React library is to define and create the elements whereas ReactDOM library is responsible for rendering the components to the DOM. In other words, ReactDOM acts as a glue between React and DOM. We will install the above two dependencies using npm using the below command:
npm install --save react react-dom
To verify the installation, check the updated package.json file which will have the installed dependencies.
- In third and last step, we need the development dependencies like
- Webpack – It is a module bundler that bundles the modular code into small packages to optimize load time.
- Webpack Dev Server – It is a server that is used to serve Webpack bundle
- Babel Loader- Babel is used to transpile ECMAScript 2015 or ES6 to ES5 as ES6 is not completely supported by all the browsers. Babel Loader allows transpiling JavaScript files using Babel and webpack
- Babel Preset ES2015 – The preset library is used to enable ES2015 compilation to ES6
- Babel Preset React – The library transforms JSX into createElement calls.
npm install webpack webpack-dev-server babel-loader babel-preset-es2015 babel-preset-react --save-dev
The above libraries are installed as development dependencies as they are used for development purpose only.
This completes the react installation and we are ready to develop the hello world program.