React JS : Beginners guide to Modern Development

Introduction:

Welcome to the React JS world, where creating cutting-edge web applications is simple as a cake. It is a JavaScript library that is open source and primarily used to create web user interfaces. React JS makes the process simpler and aids in creating exceptional, fully functional web applications, regardless of your level of experience or whether you are a beginner with little to no prior knowledge.

React uses a component-based methodology to build organized, reusable user interfaces that enable the combination of smaller components to create complex applications.

React JS is a popular library known for its coherence and efficient rendering using the virtual DOM. It updates specific components, enhancing performance by minimizing unnecessary updates.

React benefits from a large community and integrates well with other libraries and frameworks for comprehensive application development.

Overall, it simplifies UI development, boosts performance with its virtual DOM, and offers a thriving developer ecosystem

Features of React:

1. Virtual DOM: React’s virtual Document Object Model or DOM for short, efficiently updates and renders changes to the user interface
2. Component-based Architecture: React follows a component based approach, that allows developers to break the user interface into reusable and self-contained components. 
3. JSX: JavaScript XML, it is a syntax extension that combines JavaScript and HTML-like codes. It is easier to write and understand the structure and logic of components. 
4. One-Way Data Flow/Binding: React is designed in such a manner that enforces a unidirectional data flow It gives better control throughout the application and simplifies data management.
5. React Hooks: Hooks are functions that allow developers to use state and other React features in functional components. 

Installing React:

Step 1: Install Node.js into your system by visiting https://nodejs.org/ and download the appropriate installer for your system. 

Run the installer and follow the instructions specified while installing. 

Step 2: Creating a New React project using “create-react-app” command

• Open your Command Prompt or your preferred terminal go to the folder required

“npx create-react-app my-react-app” 

Replace my-react-app with your project name.

NOTE: We can install react app by using npm too but it will take up alot of time and space. By using “create react app” we can install react app in our system without having to code every single file.

Step 3: Navigate to the project directory

• Run the command “cd project-name”

Step 4: Start the development server 

• Run the command “npm run start” to launch the development server. 

To verify your installation,

• Open your web browser and go to “http://localhost:3000”

Folders in a React Application:

1. Node_modules - has all the packages that are used by create react app
2. .gitignore - used when you want to push your project into github 
3. Package.json and package-lock.json have all the packages that are installed in node modules.
4. Now there are two folders, Public and Src. These are the main folders.
5. All the react components are stored in the Src folder.

React Hooks:

• Hooks are functions in React that basically allow you to use state and other react features in functional components. 
• React hooks provide a simpler and more intuitive approach to managing component state, handling side effects, and interacting with lifecycle events. 
• Some commonly used React hooks include useState, useEffect, useContext, and many more, each serving a specific purpose to enhance the functionality and development experience of React applications.
• useState allows you to declare and update state variables within a functional component. This hook takes an initial value as a parameter and returns an array with two elements: the current state value and a function to update that value.

Syntax to use useState hook in a React program:

import React, { useState } from 'react';

Click Counter using React JS:

With the help of useState hook, we can create a Click Counter where every time you click a button, it shows you how many times you clicked it 

Features:

• The application displays a heading, a paragraph showing the current count, and a button.
• Each time the button is clicked, the count increases by 1.
• The elements are centered vertically and horizontally on the page.

Code Screenshot:

Output screenshot:

Advantages of React:

• Efficient rendering with the virtual DOM.
• Modular code structure with a component-based architecture.
• Simplified data flow with one-way data binding.
• Cross-platform development with React Native.

Disadvantages of React:

• Steep learning curve, especially for beginners.
• Tooling complexity in setting up the development environment.
• Lack of an opinionated structure, requiring decision-making for architecture and state management.
• Need for developers to address accessibility concerns.

Conclusion:

React JS simplifies web development with components, virtual DOM, and a vibrant ecosystem. The learning curve and performance considerations exist, but the benefits outweigh the challenges.

References:

https://www.w3schools.com/whatis/whatis_react.asp

https://react.dev/learn

https://www.javatpoint.com/react-features

https://www.javatpoint.com/pros-and-cons-of-react

By Eesha Smitha Ravella

Reviewed by - Sumit Dhakad