Getting started with React

Hari Sapna Nair
Last Updated: May 13, 2022

Introduction 

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 Learning React JS for Front-End Web Development.

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.

How does React work?

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.

Features of React

Some of the features of React are as follows:-

  1. For every DOM (Document Object Model) object, there is a corresponding Virtual DOM object created. 
  2. JSX (JavaScript XML) makes writing React components simpler by making the syntax almost identical to the HTML injected into the web page.
  3. React supports one-way binding, i.e., the data flow in a single direction. It binds the data from the component to the view or from view to the component whenever the data changes. 

Advantages of React

Some of the advantages of React are as follows:-

  1. It provides efficient performance by managing the virtual DOM.
  2. One-way binding makes the process of debugging and testing easier.
  3. Improves maintainability and improves productivity and efficiency.
  4. Amazing community support.
  5. Quick rendering.
  6. Clean and simple code.
  7. Easier to launch and develop,
  8. Integration of third-party libraries and packages can be done easily.

Disadvantages of React

Some of the disadvantages of React are as follows:-

  1. Due to the high pace of development, developers find it difficult to keep themselves updated.
  2. Due to the high pace of development, no proper documentation is maintained for React.
  3. New developers find JSX difficult, and that hinders their learning process.

Prerequisites before getting started with React

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.

Check out the blog 7 Best Open Source HTML & CSS Editors and select one of the editors suitable for you.

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 the create-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.

 

// install globally
npm install -g create-react-app

 

// check the version
npx create-react-app --version

 

Note: npx (Node Package Execute) is a package runner command included within npm (Node Package Manager).

create-react-app version

 

Now let's create a react application and run it using the following commands.

 

// create app
npx create-react-app my-react-app

 

// navigate to the application directory
cd my-react-app

 

// start the application
npm start

 

If the above operations are successful, the following output will be displayed on the browser.

 

Output

 

Check out the blog Top 10 React.Js books to enhance your web development skills.

Project Structure

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. 

 

App.js

import React from "react";

const App = () => {
 return (
   <div>
      <h1>Hello World</h1>
   </div>
 );
}

export default App;

 

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,

ReactDOM.render(
   <h1>First Element</h1>
   <h1>Second Element</h1>,
 document.getElementById('root')

);

 

Output

 

In the above scenario, an error occurs. The h1 tags can be wrapped in the div tag like the code below to solve this issue.

ReactDOM.render(
 <div>
   <h1>First Element</h1>
   <h1>Second Element</h1>
 </div>,
 document.getElementById("root")
);

Frequently Asked Questions

1. Explain DOM.

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.

Developers, if you are preparing for the next interview, check out the blogs 15 Most Frequently Asked React JS Interview Questions and 10 Best ReactJS Interview Questions. And if you are a beginner, check out the Top 5 skills to learn before you start with ReactJs to know the prerequisites to learn React.

We hope you found this blog useful. Feel free to let us know your thoughts in the comments section.

 

 

Was this article helpful ?
2 upvotes

Comments

No comments yet

Be the first to share what you think