React Tutorial For Beginners - Steps to Install and Setup React

Introduction

React is an Open Source JavaScript library. It is used for developing scalable, simple, and fast front-ends for web & mobile applications. It handles the view layer of mobile and web applications. React is flexible and can be used in any application.

Description

In this article, we learn the step-by-step process of installing and set up React for development. Also, How to work on React on both Desktop and Mobile platforms.

Please visit the React articles to understand the beginning.

Part 1: React Tutorial For Beginners - Introduction

The below React articles are for a basic understanding of React sample applications.

Steps to Install NodeJs and npm for setting up React in our local system,

Install Nodejs

Node.js gives a runtime environment to execute JavaScript code from outside the browser. NPM will be installed along with Nodejs. Node.js can be downloaded and installed from the official NodeJs website. NPM(Node package manager) is used to manage and share packages for either React or Angular.

Download and Install Nodejs

Install Node

Once the Installation of Node is complete.

Node App

Open Node.Js Command Prompt, and we can check the version as well.

Node.Js Command Prompt

Install Create-React-App

Install a tool called create-react-app using NPM. This tool is used to create react applications easily from our system. We will install it globally by using the following command.You can install this at the system level or temporarily at a folder level.

The below command is.

D:\EmployeeManagement\React> npm install -g create-react-app

Command

Creating a new React project

Note. Whenever you create a project using React, please don’t give any capital letters in the project name. react will throw an error.

Let's say I want to create the project or application in D:\EmployeeManagement\React. I will create this folder and let our command prompt point to it by using the change directory command. We can create our first react application after create-react-app is installed successfully,

The below command is,

D:\EmployeeManagement\React>create-react-app satya-project

Fetch

Now, we can see that the React project is created in the above directory.

React project

Let's Run the React Application.

We have created a New Project called my-react-app using React and executed the Project.

Now take a React project directory with CD to the Project we have created and run it locally on our system using npm start.

D:\EmployeeManagement\React\1\my-react-app>npm start

Launch the browser and visit http://localhost:3000. We can then see our first React Application response in the browser.

React Application

React starts the development server which our application will be hosted from where we can access the application. The application runs locally, in particular, through local HTTP.

Know about React project structure

There are many editors or IDEs like Visual Studio Code, React IDE, Sublime Editor, Atom Editor, Webstorm, etc. But here, We will use the VS Code as our Editor. Visual Studio Code is a free IDE from Microsoft that is built for developing and debugging web applications. It has integrated Git control & terminal. VS code’s IntelliSense allows Visual Studio Code to provide you with useful hints and auto-completion features while you code.

Download and Install Visual Studio Code

Download Visual Studio Code

After the installation, open the Project we created earlier using the VS Code. The Project has three important folders, as shown below.

Node_modules
Public
src

The output we see when the Project is executed comes from a file called Index.html, which resides inside the public folder.

File

Open Visual Studio code from the command prompt >> code.

D:\EmployeeManagement\React\1\my-react-app>code .

In index.html, we have one div tag with id as root.

Root

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

Understand the relation between the output we see and this index.html and open the src/app.js file.

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import ApexAreaChart from "./components/ApexAreaChart";
function App() {
  return (
    <div className="container mt-3">
      <h2 className="mb-3">
        Create & Download Apexcharts Area Chart Using React By Satyaprakash
      </h2>
      <ApexAreaChart />
    </div>
  );
}
export default App;

In app.js, there is a function called app().

How the index.html is linked to App.js?

Open index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Here, the root is nothing but the div id = "root"

const root = ReactDOM.createRoot(document.getElementById('root'));

Let's Run the React application from the VS code terminal,

PS D:\EmployeeManagement\React\1\my-react-app> npm start

Run React

Working on React using React online editors on a Mobile platform

There are below online editors to work on React.

CodePen
CodeSandbox
Glitch

In the browser, navigate to https://codepen.io/ and click on Start Coding.

Click Start Coding

Click Start Coding

Create a simple div in the HTML section and Then write some JavaScript Code.

<div id="root"></div>

ReactDOM.render(
  <h1>Welcome to React World by Satyaprakash Samantaray</h1>,
  document.getElementById('root')
);

Go to the Pen Settings section of Js and add legacy reactjs CDN urls to avoid errors, as we are missing the references to two Javascript files.

CDN Links - React

Both React and ReactDOM are available over a CDN.

One script file refers to React, and the other refers to ReactDOM, which is the Virtual DOM introduced by React.

https://unpkg.com/react@18/umd/react.development.js

https://unpkg.com/react-dom@18/umd/react-dom.development.js

Settings

The versions above are only meant for development.

Set the Javascript Preprocessor to Babel.

Javascript Preprocessor

With the above settings, you should have the output produced as expected.

Output

Output

What is Babel?

Babel is a free and open-source JavaScript transcompiler.
Babel is a popular tool for using the newest features of the JavaScript programming language.
That is mainly used to convert ECMAScript 2015+ code into a backward-compatible version of JavaScript that can be run by older JavaScript engines.

Summary

In this write-up, we have learned the details below.

Steps to Install NodeJs and npm for setting up React
Know about React project structure
Working on React using React online editors on a Mobile platform
What is Babel

Thank You & Stay Tuned For More!