Hello folks! welcome back to a new edition of our tutorial on ReactJS. In this section of our tutorial on ReactJS, we will explain how to install React library and it's related tools in your computer. Before moving forward to the installation, let us verify the prerequisite first.
React provide CLI tools for the developer to fast forward the creation, development and deployment of the React based application. React CLI tool is dependent on Node.js and must be installed in your system. Hopefully, you have installed Node.js on your system. We can check it using the below command -
React provide CLI tools for the developer to fast forward the creation, development and deployment of the React based application. React CLI tool is dependent on Node.js and must be installed in your system. Hopefully, you have installed Node.js on your system. We can check it using the below command -
node --version
You could see the version of the Nodejs you might have installed. For me it is shown as below -
v16.13.1
If Nodejs is not installed, you can download and install by visiting the Nodejs download page.
Toolchain
To develop lightweight features like form validation, model dialog, etc., React library can be directly added in the web application through content delivery network (CDN). It is similar to using jQuery library in a web application. For medium to big application, it is recommended to write the application as multiple files and then use bundler such as webpack, parcel, rollup, etc., to compile and bundle the application before deploying the code.
React toolchain assists in creating, building, running and deploying the React application to the web. React toolchain basically makes available a starter project template with all required code to bootstrap the application.
Some of the popular toolchains to develop React applications are -
React toolchain assists in creating, building, running and deploying the React application to the web. React toolchain basically makes available a starter project template with all required code to bootstrap the application.
Some of the popular toolchains to develop React applications are -
- Create React App - SPA oriented toolchain.
- Next.js - Server-side rendering oriented toolchain.
- Gatsby - Static content oriented toolchain.
The tools required to develop a React based web application are -
- The serve, a static server to serve our application during development.
- Babel compiler.
- Create React App CLI.
The serve static server
The serve static server is a lightweight web server. It serves static site and single page application. It loads very fast and consume minimum memory. It can be used to serve a React application. Let us install this tool via npm package manager in our system.
npm install serve -g
Let us create a simple static site and serve the application using serve app.
Open a command prompt in your computer and go to your workspace.
Open a command prompt in your computer and go to your workspace.
cd /go/to/your/workspace
Create a new folder, static_site and change directory to newly created folder.
mkdir static_site cd static_site
Create a simple webpage inside the folder making use of your favorite HTML editor.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Static website</title>
</head>
<body>
<div><h1>Hello!</h1></div>
</body>
</html>
Now, run the serve command.
serve .
We can also serve single file, index.html instead of the whole folder.
serve ./index.html
Now, open the web browser and then enter http://localhost:5000 in the address bar and press enter. serve application will serve our webpage as shown below.
The serve will serve the application making use of default port, 5000. If not available, it will pick up a random port and specify it.
│ Serving! │ │ │ │ - Local: http://localhost:57311 │ │ - On Your Network: http://192.168.56.1:57311 │ │ │ │ This port was picked because 5000 is in use. │ │ │ │ Copied local address to clipboard!
Babel
Babel is a JavaScript compiler which can be used to complile many variant (es2015, es6, etc.,) of JavaScript into standard JavaScript code supported by all browsers. React uses JSX, an JavaScript extension for designing the user interface code. Babel compiles the JSX code into JavaScript code.
To install babel and it's React companion, run the below command -
To install babel and it's React companion, run the below command -
npm install babel-cli@6 babel-preset-react-app@3 -g ... ... + babel-cli@6.26.0 + babel-preset-react-app@3.1.2 updated 2 packages in 8.685s
Babel helps us write our application in next generation of advanced JavaScript syntax.
Create React App toolchain
Create React App is a modern CLI tool used to create single page React application. It is the standard tool that is supported by React community. It also handles babel compiler. Let us install Create React App in our local system.
> npm install -g create-react-app + create-react-app@4.0.1 added 6 packages from 4 contributors, removed 37 packages and updated 12 packages in 4.693s
Updating the toolchain
React Create App toolchain uses the react-script package for building and running the application. Once we have started working on the application, we can update the react-script to the latest version at any time using npm package manager.
npm install react-scripts@latest
Merits of using React toolchain
React toolchain provides lot of features out of the box. Following below are some of the merits of using React toolchain -
- Predefined and standard structure of the application.
- Ready-made project template for different types of application.
- Development web server is included.
- Easy way of including third party React component.
- Default setup to test the application.
READ: ReactJS | Introduction
Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial guide, we wil be discussing about ReactJS Architecture.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.