React.js is an open-source, frontend JavaScript library used to build UI components. It was created by Jordan Walke, a software engineer at Facebook, in 2013. React became famous because of the excellent community support, flexibility, improved efficiency, simplicity, and reusable components. Companies like WhatsApp, Facebook, Netflix, Instagram, etc., are currently using React for their products.
Are you confused about whether to learn React? Check out the blog ReactJS.
This blog will discuss the basic concepts for getting started with React, creating the React starter app, React folder structure, etc. We will also look into the working, features, advantages, and disadvantages of React.
While building client-side apps, when any change is made, the whole model has to be changed. This made the process slow and cumbersome. To solve this issue, React uses something called virtual DOM(Document Object Model). Virtual DOM is the copy of the current version of the browser DOM. When any change is made, another virtual DOM is created, and a comparison is made between the previous and current virtual DOM. Then the virtual DOM will find the most efficient way to update the browser's DOM by changing only a few parts.
Example
In the above example, only the h1 tag is changed instead of the whole DOM.
React elements are plain objects and are easier to create, unlike the browser DOM elements. React DOM takes care of the DOM manipulation to match the React elements. This is because JavaScript is very fast, and a DOM tree is kept in it to speed up its manipulation.
There are some prerequisites for getting started with React. We need to have NodeJS installed on the system to install React-based dependencies. An editor is also required to write the code, preferably VS Code.
After installing NodeJS, check whether NodeJS was installed or not with the following command. It gives you the version if the NodeJS is correctly installed on the system.
Node version
Using React Directly in HTML
This is the quickest way to start with React. In this, three scripts are added to the head tag. Let's look at how this is done.
Code:
<!DOCTYPE html>
<html>
<head>
<!-- to write React code in JavaScript -->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<!-- to write JSX syntax and ES6 in older browsers. -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
function Hello() {
return <h1>Hello World!</h1>;
}
ReactDOM.render(<Hello />, document.getElementById('container'))
</script>
</body>
</html>
Output
Getting started with React
Let's now set up the React environment. To create React applications, we will install thecreate-react-app package. Install it globally so that it can be used from anywhere on the system. After installation, check the version as we did for NodeJS.
Now let's explore the folder structure of the React project we have created above.
Folder structure
node_modules
It contains the project dependencies that have been downloaded and installed using npm. Instead of using script tags as traditional HTML, we install these modules as part of the application. To access the code from a particular module, the import statement is used.
public
This is where our bundled code goes. When we build the application for production, the final files go in here. It is uploaded to a web server so that users can see our app via a URL. This folder mainly contains the HTML, JavaScript, and CSS files.
index.html:
The "index.html" is the entry point which the web browser loads when a user navigates to the URL. The body of the HTML file contains the "root" div. React dynamically converts the React code into HTML and loads it in the "root" div.
src
The JavaScript implementation of the React application is found in this folder. By default, the implementation of the App component is found in the "App.js" file. The corresponding unit test case implementation is present in "App.test.js." The "index.js" contains the code, which is the starting point of the React application.
The First Hello World Program
Let's write our first Hello World program in React. Within the project directory, go to "src/index.js" and replace the contents as follows:
index.js
// import react and react-dom libraries
import React from 'react';
import ReactDOM from 'react-dom';
// import the app component
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
The react module is used to write the HTML code within JavaScript/JSX. React is for the components, and react-dom is for rendering the components in the DOM. We will be discussing the ReactDOM.render() method in detail in the next section.
Now let's check out the code for the App component.
In "App.js," after importing React, we will declare a function using ES6 arrow functions. This function is a component with some logic and markup. This component can be imported into other files and used there. Like in this case, we import the App component in the index.js folder.
Within the function, we add what has to be returned from this component in return(). It contains the markup, which gets converted and rendered as HTML. Finally let's add a <div> tag with a <h1> tag inside it.
This might look like basic HTML, but it is actually JSX that allows us to mix JavaScript and HTML. Now let's check the output.
Output
ReactDOM.render method
The ReactDOM.render() method consists of the following two arguments:
The first argument specifies which element has to be rendered. This can be a component or a simple tag like h1, p, etc. This argument is called the element.
The second argument specifies where the element has to be rendered. Normally, it's a div element with the id of "root." JavaScript DOM API is used to identify this element. This argument is called the container.
Syntax:
ReactDOM.render(the element to be rendered, the location where the element has to be rendered);
The ReactDOM.render() method cannot have two-parent elements in the first argument. Consider the following code,
Ans:- The DOM (Document Object Model) is an application programming interface (API) for HTML (HyperText Markup Language) and XML (Extensible markup language) documents. DOM defines the logical structure of the document and the way a document is accessed and manipulated.
2. React follows declarative paradigm or imperative paradigm?
Ans:- React uses a declarative paradigm. Developers write the code, and React will efficiently update and render the suitable component when the data changes. In short, React takes charge of the declared code and performs all the DOM manipulations to get us to our desired result. The approach makes the code more predictable and easier to debug.
3. What is JSX?
Ans:- JavaScript XML (JSX) is a form of markup that allows developers to write HTML code in React by converting the HTML tag into React element. These elements are then rendered to the DOM.
4. How to run tests in React?
Ans:- By default, the folder contains some basic unit test cases defined in "src/App.test.js." To execute those tests, use the following command:
npm run test
5. How to build the React application for production?
Ans:- We can build the React application for production, and the result is made available in the "build" folder. To build the application, use the following command:
npm run build
Key Takeaways
This blog covered the basic concepts for getting started with React, creating the React starter app, React folder structure, etc. The features, advantages, and disadvantages of React were also discussed in this blog.
Example
305+ registered