Installation Steps or Guides for ReactJS

  • After the folder is created, we need to open it and create empty package.json file inside by running npm init from the command prompt and follow the instructions.
  • Create the index.html file inside the root folder, this is just regular HTML.
  • We are setting div id = “app” as a root element for our app and adding main.js script, which is our bundled app file.
  • We need to import this component in main.js and render it to our root App element, so we can see it in the browser.
  • If you want to make the component usable in other parts of the app, you need to export it after creation and import it in the file where you want to use it.

react installation in windows : Today, we will see how to install an environment and require dependencies for development of reactjs application. The environment and configuration files installation process is bit time taking but not that complex. First thing First, we need NodeJS, so if you don’t have it installed, check the below official website link for NodeJS Installation :

Lets follow the below steps for the react application development :

1. Install the NodeJS application from the official website.

2. Create the root folder for you project. After the folder is created, we need to open it and create empty package.json file inside by running npm init from the command prompt and follow the instructions.

3.  As we are using the react for application development, we need to install react packages :

4. To use the webpack bundler, we need to install webpack and webpack-dev-server.

5. Now that our bundling tool is taken care of, we need a transpiler for interpreting our ES6 code. This is where Babel comes in. Let’s install the babel-loader and babel-core packages  that we’ll use to work with Webpack, as well as the ES2015 and React presets for loading the code

6. Now create webpack.config.js file in the root directory and add the following code in it.

7. Compare the package.json file, it should look like this.

8. Create the index.html file inside the root folder, this is just regular HTML. We are setting div id = “app” as a root element for our app and adding main.js script, which is our bundled app file. Lets see the complete source code details  :

Installation Steps or Guides for ReactJS