⭐ Let's get Started with React 😎

Prerequisite:

Good understanding of HTML, CSS, and Javascript(ES6 concepts).

Introduction

React is a client-side Javascript library created by Facebook which helps to create interactive and complex UI easily using a declarative, component-based approach.

React begins with node. Earlier, different browsers used different javascript engines to create a website. But one day, they thought let's bring this engine outside the browser and use it inside our local computer.

.

Here comes the node and javascript on the server side.

Nodejs is the open-source javascript runtime environment that helps to run the js on the server side. Other than node, other runtime environments in the market are Deno, Bun, etc.

npm(Node package manager) is a platform where you can use the packages/codes created by someone across the globe.

Installation

Before installing React, make sure nodejs is installed in your system with the version above 12. Also, you need a code editor to write your code. There are multiple code editors available, I personally use vscode and also recommend you the same.

Download Nodejs : Link

You can use the latest version but I will recommend LTS(long-term support) version as the basic fundamentals will be the same in all and you don't need to download the latest version again and again as this works mostly for all.

Download VS Code editor: Link Both installations are very easy, just press next, next, ok, ok finish.

After finishing both downloads, create a folder on your pc and open it using vs code. Open the terminal using (Ctrl + `) inside vs code and type the following commands.

npx create-react-app learn-react

It will take some time and after installing the react, it will show this message.

Cool 😎, now let's start the React app. now, move into that directory learn-react using the command cd .\learn-react and then type npm start . This will start the development server and show like this.

Hello World

😁 Don't worry, we are done after Hello World. At least, we should render Hello World to get a feeling of peace of mind.

Inside the learn-react folder, we have multiple folders and a lot of code written. Don't worry we will understand it one by one. We will talk about each folder in dept later, firstly our goal is to render Hello World in browser.

1. public: Here, we will talk about the index.html file which is only important and the rest are just logos and text which are not necessary right now. so delete all the other files and only index.html is left. <div id="root"></div> Here, only this line is there inside the body. In React, simple apps to complex apps only reside in just this single page of Html. That's why websites created with React are SPA(single-page applications).
2. src: In the source folder, delete all the files and start with the new file index.js.
3. package.json: this file contains all the dependencies which are installed with react. It is a necessary file to run the React app, it contains the name, versions, scripts, etc. Whenever we install any package using npm, the details of that package can be seen in this file.

import React from "react";
import ReactDOM from "react-dom";


function App(){
    return (<h1>Hello World</h1>);
}

ReactDOM.render(<App />,document.getElementById("root"));

Inside index.js, we have written this code. Let's understand each line of code.

import React from "react";

import ReactDOM from "react-dom"

We are importing 'react' and 'react-dom' from package.json. React dom(Virtual DOM) is the same as HTML dom, just it handles the changes virtually and compares the changes. After completion, it makes a final change to DOM, thus increasing the speed of the app.

function App(){
    return (<h1>Hello World</h1>);
}

You are wondering how HTML can be written inside a function, actually, this is JSX (Javascript XML). Below you can read about JSX in Official React docs.

With the help of JSX, you can add HTML inside js easily, we can do changes in dom without using appendChild() or createElement(). This makes the code run faster than javascript. function App gets converted into an App component with the help of this jsx.

ReactDOM.render(,document.getElementById("root"));

We are using the render method to display the elements. React converts the function into components. Inside the render method, we write 2 things.

1. what needs to render: component
2. where needs to render: inside div with id root.

As we are returning the h1 component inside that div with id root, we will able to see the h1.