Getting started with React.JS

React is a declarative JavaScript library for customizing user interfaces almost everywhere you look these days. Learning React provides a whole new way to design front-end experiences like websites, mobile apps, and more. Here we will walk through the contents like,

1) Why use React?

2) Basic setup

3) How does React work?

4) React JRX

5) React DOM

Let me break it down for you; as per my, understanding React is a popular framework that has been used by the companies such as Facebook, Netflix, Instagram, Amazon, and many more to build Single Page Application (SPA). A SPA is a website or web application that interacts with the web browser by dynamically rewriting the current web page with fresh data from the webserver instead of the browser loading entire new pages.

So talking about its advantages, it is pretty efficient for the developers to use in terms of;

-Performance: using React will lead to a fast user interface without doing much work to specifically optimize for performance

-Simplicity: anyone having some prior idea with HTML CSS and JavaScript, Reactjs would be a cakewalk for them.

-Development speed: ReactJS allows us to create reusable UI components that can be used in many web pages

-Testability: applications are super easy to test.

Create and Run React Application: I will start by employing a React application skeleton by using

create-react-app

npm install -g create-react-app

Note: Install Node.js and NPM on your development machine before setting up the React environment.

After installing the create-react-app tool, we are now ready to create our first React application by entering the following command in a console window:

create-react-app todo-list

This command will generate a folder named todo-list in the current directory. It includes all the folders containing directories and all the stuff needed for a minimal (but working) React-based SPA. Once the application setup is done, we can run it by proceeding with the following commands:

# run the command to move to the new directory

cd todo-list

# run the command to execute the application

npm start

After a second, the default browser will be popped up with the following page, and the newly created app is good to go.

React components are written in JSX, a JavaScript extension syntax allowing easy quoting of HTML.

import React from ‘react’;

import ReactDOM from ‘react-dom’;

Const myelement = <h1> hello world! </h1>;

ReactDOM.render(myelement, document.getElementById(‘root’));

This tag syntax is neither HTML nor a string; it is called JSX. We are recommended using it to give a visual representation of UI. It fabricates React “elements” by converting HTML tags.

We are not required to use JSX, but it makes React applications a lot more elegant.

JSX allows us to write HTML elements in JavaScript and place them in the DOM without any getElementById() or removeChild() methods. In the next segment, we will explore rendering them to the DOM.

Document Object Model (DOM) is the core concept behind React that makes it more performant and fast. The HTML DOM serves as an interface (API) to traverse and modify the nodes. It contains methods like getElementById or removeChild. While a web page is loaded, the browser makes a DOM of the page. React elements are plain objects and are easy to create, unlike browser DOM elements. React DOM takes care of updating the DOM to match the React elements.

Let’s assume there is a <div> somewhere in your HTML file:

 <div id=”root”></div>

This is known as a “root” DOM node since everything inside it will be managed by React DOM. If we are integrating React into an existing app, we can have as many isolated root DOM nodes as we like. To render a React element into a root DOM node, pass it to ReactDOM.render():

ReactDO 

const element = <h1>hello world!</h1>

ReactDOM.render(element,document.getElementById(‘root’)); 

The default page will be displayed with “hello world!”.

I have only scratched the surface of React with the concepts like JSX and DOM by taking references from many resources. You can go much further in-depth and diving into things like Components, Props, States, Lifecycle, and so on. Thank you for coming this far with me.