React,as per the ReactJS Official Documentation, is a JavaScript library for building user interfaces." It allows the developers to create interactive UIs using a very simple declarative syntax, which makes everything as reusable as possible. It encourages the breakdown of views into small, manageable and reusable components. React is supported by Facebook and a stable community of open-source developers which makes it a faster, reliable and a stable frontend library. Here is an article on usereducer to help you master React.
In this article, we will learn how to set up an environment to use React and how to make our first React component. Moreover, we will also learn and understand various steps involved in the React build processes.
So, let's get deep into it!
Steps to set up a Development Environment
The very first thing is to set up our development environment. In order to do so, we need to first download some dependencies which are required for running the APP. Then we will install the dependencies. Last but not the least, we will run the project.
1. Install NodeJS and NPM
Node.js is a cross platform JavaScript runtime environment which is capable of executing the JavaScript code at server-side.
Note: If you've already set up Node.js in your system, you can skip to the next section.
Node is used with ReactJS to run the react development server. NPM(node package manager) is a manager of JavaScript packages. By using it we can install the JavaScript packages required for our project.
To install Node.js, go to this link and choose the right package as per your system OS.
Once you are done with the installation, open up the terminal and type the below command to check the node version.
node -v
This will show the current node version that you have just installed in your system.
For me, it’s
v8.11.4
Let’s move ahead and go to our next step.
2. Installing React JS
After successful installation of NodeJS, let’s move ahead with installing ReactJS.
There are two ways of installing and using ReactJS:
- Using npm command, webpack and babel
- By using create-react-app (boiler-plate)
Let’s understand each method, and later you can decide which is easy for you to use.
Using npm command, webpack and babel
Webpack takes dependent modules and compiles them to a single (file). In other words, it is a module bundler that manages and loads independent modules. You can use this bundle while developing apps by configuring it using webpack.config file.
Babel is a JavaScript compiler and transpiler that is used to convert one source code to another. Using this, you will be able to use the new ES6 features in your code, where babel converts it into plain old ES5 which can be run on all browsers.
Let’s get started and follow the following steps to install ReactJS.
Step1: Create a folder by any name such as myApp on your system to install all the required files, using the mkdir command.
Use the below command:
C:\Users\username\Documents>mkdir myApp
C:\Users\username\Documents>cd myApp
Step:2: Next step after creating a folder is to generate the package.json file.
Package.json file is required to create any module. Run the below command in your terminal.
C:\Users\username\Documents\myApp>npm init
Step3: In order to use React, the next step here is to install React and its DOM packages. Run the below command to install React and React DOM.
C:\Users\username\Documents\myApp>npm install react react-dom --save
Step4: Since we are using webpacks for bundling up the application, the next step is to install webpack, webpack-dev-server and webpack-cli.
C:\Users\username\Documents\myApp>npm install webpack webpack-dev-server webpack-cli --save
Step5: The next step is to install Babel. Use the below command for installing Babel and its plugins like babel-preset-env, babel-core, babel-loader, html-webpack-plugin and, babel-preset-react.
C:\Users\username\Documents\myApp>npm install babel-core babel-loader babel-preset-env
babel-preset-react html-webpack-plugin --save-dev
Step6: Creating the files for the React application
To successfully complete the React installation, we need to create some files which are index.html, App.js, main.js, webpack.config.js and .babelrc.
On the terminal use the following commands to create the files. We have to keep the same file name as shown below.
C:\Users\username\Documents\myApp>type nul > index.html
C:\Users\username\Documents\myApp>type nul > App.js
C:\Users\username\Documents\myApp>type nul > main.js
C:\Users\username\Documents\myApp>type nul > .babelrc
C:\Users\username\Documents\myApp>type nul > webpack.config.js
Step7: Setting up the server, compiler and loaders.
Here we are setting the webpack entry point as main.js. The output path is the one where the bundled app is served.
In this step we will also set up our development server to 8001 port.
Note: You can choose any port that you want.
Go to your webpack-config.js file that was created in the previous step and add the below code.
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './main.js',
output: {
path: path.join(__directoryName, '/bundle'),
filename: 'index_bundle.js'
},
devServer: {
inline: true,
port: 8001
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
},
plugins:[
new HtmlWebpackPlugin({
template: './index.html'
})
]
} Let’s now start and build the application.
Open the package.json file again, and add the start and build commands as follows:
- "start": "webpack-dev-server --mode development --open --hot",
- "build": "webpack --mode production"
Step8: Adding the component and rendering the page.
Let’s assume the React component is App. This component will render simple Hello World.
App.js
import React, { Component } from 'react';
class App extends Component{
render(){
return(
< div >
< h1 >Hello World< /h1 >
< /div >
);
}
}
export default App; In order to render it to our root App element, we need to import this component so that we can see it in the browser.
Let’s now edit our main.js file.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app')); Using create-react-app (boiler-plate)
Instead of using babel or webpacks, we can easily install ReactJS in a more simplified way by installing create-react-app.
Open up the terminal and type the following command:
npx create-react-app my-app
You can use any name at the place of “my-app”. It denotes the name of the application.
Go to the folder directory, by typing the following command:
cd my-app
Lastly, start or run the application by using the following command:
npm start
It will run the application in development mode. It should open the browser automatically, or we can manually open it as or your default port in the browser.
Step9: Running the server
Now, we have to run the application on the server. We can simply start the server by running the following command.
C:\Users\username\Documents\myApp>npm start
It will automatically open up the port in the browser. In our case, we had set it earlier to http://localhost:8001/.
Once the browser is opened, you will see the following output.
And we are done!
We have successfully created our component and rendered Hello World on the browser.
Finally, the last and final step is to bundle up the application to deploy on the server.
Step10: If we want to run the project for the production mode, we can use the below command. It will generate the production build, which is best optimized.
Run the build command in the terminal as shown below:
C:\Users\username\Documents\myApp>npm run build
Once done, you should get the generated build inside the same directory.
And now we can deploy our build anywhere on the server :) Pretty cool, don’t you think?
Now, you can decide which approach is easier and better to install React and use its components.
Understanding Code Editor - Folder Structure - Terminal Setup
After successful creation of your project, your directory should look like this:
myApp/
README.md
node_modules/
package.json
public/
index.html
favicon.ico
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
In order to build the project successfully, some files must exist with exact filenames, which are:
- public/index.html >>> It is the page template. The index.html in our public folder is basically what gets loaded in our browser.
- src/index.js >> It is the JavaScript entry point. src: It contains all the files like App.css, App.js, App.test.js, index.css, index.js, and serviceWorker.js files.
- App.js holds the responsibility for displaying the React output screen.
- package.json: Holds the metadata for the project. It has the information of the project dependencies as well as the project.
- README.md: It includes the React topics and their documentation.
Conclusion
In this article we learned about two major approaches of installing and using React JS, and making a simple component in React. We learned about setting up the environment and understood how package manager works.
We also used the create-React App solution of installing and building the application. Create React solution hides a lot of the complexity that comes when tweaking with the server, Babel, webpack, and other components.
It's very important to remember that React is just a UI library. While using Webpack and Babel to install React is highly recommended, you don't need these tools to use React. Create-React-App makes life very easy and you don't need to think about the configurations that we did in the Webpack approach.
So, what are you waiting for, go and try this out yourself!
Happy Learning
