ReactJS Environment Setup

ReactJS is a front-end library developed by Facebook. It handles the View layer of web and mobile applications. We can also create reusable UI components.

We need NodeJS platform for ReactJS application development. You can setup the NodeJS development environment from here. We will use npm (Node Package Manager) to create our applications.

Npm command has many sub-commands associated with it.

• Open NodeJS Command Prompt.
• Navigate to the folder where you want to store your ReactJS Application.
• You can use normal Command Prompt commands to navigate to directories and folders. Execute the following command.

npm install -g create-react-app

Let’s understand the above command deeply. (npm install -g <name of the package>) In this case, we use npm to download a package, say create-react-app, and install is globally on our local computer.

• • • npm: It runs npm (Node Package Manager)
    • install: installs a package onto our computer. This is a sub-command of npm
    • -g: This is a flag which installs the package globally on our computer so that we can run it from the terminal
    • name of the package: Name of the package we want to install. In the above command, we want to install create-react-app package.
  • Now we use this package to create a react application. USE ONLY LOWERCASE LETTERS FOR APP NAMES. Command to create a react app: create-react-app <app_name>

    create-react-app myfirstapp

• In the above image, you can see that when we created the app, it has automatically added 1326 packages (this number can change in your environment).
  • These packages also include Webpack, Babel and Webpack Dev Server. These are behind the scene libraries that we do not have to manually create and are automatically created.
  • Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript so that they can be supported by all browsers. Kindly note that ECMAScript2015+ versions are not fully supported by all browsers, hence the conversion by Babel is necessary.
• Now, it is asking us to navigate to the newly created folder and execute npm start command.
  • Command to start the React App: npm start
  • Command to stop the React App: Ctrl + C
    
• As soon as I press enter, it will start the server automatically on port 3000. Application will be started in the default browser and following page will be displayed.
  
  • Even if you close the browser, the application is still be running. You can type http://localhost:3000/ in the browser to open the application again. To close the application, type Ctrl+C on the terminal(command prompt).
  • After Ctrl+C, you will not be able to open the application in the browser until you start the application again from the terminal from the project directory. You cannot start the application just from anywhere.
• Let’s open our ReactJS folder in C drive. You will find a folder named myfirstapp. Open this folder and you will find below folder structure. NOTE that the structure and content may change based on the React version you are using.
  
• This have three folder here
  • src: This will have all the .css and .js files. This is the place where we keep all the source code we write.
  • public: This will have index.html file which is the home page of your application. Apart from this, we also store all the static files like images here.
  • node_modules: This folder will have all of our project dependencies that we have installed. You can see webpack, babel, webpack-dev-server etc here in this folder. It is created automatically when you create a project. DO NOT modify the content of this folder manually.

• App.js: contains all the data that is displayed in index.html file. This will create a reusable element.
  
• index.js: This will import the <App/> component from App.js file and display it in HTML element with id=”root” in index.html file.
  
• Other files that are created:
  • package.json: This will record the project dependencies and configuration related information of the project.
  • package-lock.json: This will record the exact version of packages that we install.
  • README.md: This will have the instructions on how to use the project.
  • .gitignore: This file is a reference to the get version control system and essentially it lists out the different files and folders that get should ignore if it’s going to be tracking our project and maintaining a record of all different changes we are making to our code.