Installing the React library and its associated tools on your computer is described in this post. Let’s confirm the prerequisite before proceeding with the installation.
React gives developers CLI tools to expedite the design, development, and deployment of web applications built with React. React CLI tools require installation on your system and rely on Node.js. Hopefully, Node.js is already installed on your computer.
The Node.js version you may have installed was visible. It appears to me as follows:
node --version
v23.6.1
Tools
Using a content delivery network (CDN), the React framework may be easily integrated into the online application to create lightweight features like model dialogue, form validation, etc. It is comparable to using the web application’s jQuery library. Before deploying the code, it is recommended that moderately large applications be written as many files and then compiled and bundled using a bundler like webpack, parcel, rollup, etc.
The React toolchain facilitates the creation, development, execution, and deployment of React applications. In essence, the React toolchain offers a startup project template that includes all the code required to bootstrap the application.
Some of the popular toolchain to develop React applications are −
- Build a toolchain focused on SPAs for React apps.
- Next.js — toolset focused on server-side rendering
- Gatsby − Toolchain focused on static content
Tools required to develop a React application are −
- Static Server
- Babel Compiler
- React CLI
Static Server
The serve is a minimalistic web server designed for efficiency. It is capable of hosting static websites and single-page applications. Its performance is optimized for quick loading times while utilizing minimal memory resources. Additionally, it can effectively serve a React application. To install this tool, we will utilize the npm package manager on our system
npm install serve -g
.We will develop a straightforward static website and deploy the application utilizing the serve app. Begin by opening a command prompt and navigating to your workspace
cd /go/to/your/workspace
Establish a new directory named static_site and navigate to the newly created directory.
mkdir static_site cd static_site
Next, create a simple webpage inside the folder using your favorite html editor.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Static website</title> </head> <body> <div><h1>Hello World!</h1></div> </body> </html>
.Next, run the serve command.
serve .
We can also serve single file, index.html instead of the whole folder.
serve ./index.html
To proceed, launch the browser and input http://localhost:5000 into the address bar, then press enter. The application will display our webpage as illustrated below.
Hello World!
The application will be served on the default port, 5000. In the event that this port is unavailable, a random port will be selected and indicated accordingly.
Babel Compiler
Babel is a JavaScript compiler that transforms various versions of JavaScript, such as ES2015 and ES6, into standard JavaScript code that is compatible with all web browsers. React employs JSX, an extension of JavaScript, for crafting user interface code. Babel is utilized to convert this JSX code into standard JavaScript.
To install Babel along with its React companion, please execute the command provided below.
npm install babel-cli@6 babel-preset-react-app@3 -g ... ... + [email protected] + [email protected] updated 2 packages in 4.685s
Babel enables us to develop our application using the next generation of sophisticated JavaScript syntax.
React CLI
React CLI serves as a contemporary command-line interface tool designed for the development of single-page React applications. It is recognized as the standard tool endorsed by the React community. Additionally, it manages the Babel compiler. Let us proceed to install Create React App on our local system.
> npm install -g create-react-app + [email protected] added 6 packages from 4 contributors, removed 37 packages and updated 12 packages in 4.693s
Updating tools
The React Create App toolchain employs the react-scripts package for the construction and execution of the application. After initiating work on the application, it is possible to update the react-scripts to the most recent version at any time by utilizing the npm package manager.
npm install react-scripts@latest