XQA
Back to Web Development
2025-11-246 min read

REACT (Web Development)

Learn REACT (Web Development) step by step with clear examples and exercises.

Title: Mastering React for Web Development

Why This Matters

React is a popular JavaScript library used for building user interfaces, particularly single-page applications (SPAs). React allows developers to create reusable UI components and efficiently manage state changes, making it an essential skill for modern web development. Understanding React can help you tackle real-world projects, interview questions, and debug common issues that arise in your coding journey.

React offers several advantages over traditional approaches to web development:

  1. Reusable Components: React's component-based architecture encourages code reuse, making it easier to maintain large applications and ensuring consistency across the UI.
  2. Efficient Rendering: The virtual DOM (a lightweight representation of the actual DOM) allows React to update only the necessary components when state changes occur, improving performance.
  3. Declarative Syntax: React's declarative syntax makes it easier to understand and reason about your code, as you describe what you want the UI to look like rather than how to achieve it.
  4. Strong Community and Ecosystem: React has a large and active community of developers who contribute to its development and create a wealth of resources, libraries, and tools for building robust applications.

Prerequisites

Before diving into React, ensure you have a solid understanding of the following:

  1. JavaScript ES6+ syntax (arrow functions, template literals, destructuring, etc.)
  2. HTML/CSS basics (tags, selectors, box model)
  3. Node.js and npm (installing packages, running scripts)
  4. Familiarity with the command line interface (CLI)
  5. Understanding of state management concepts (such as immutability and one-way data flow)
  6. Basic knowledge of REST APIs for fetching and manipulating data

Core Concept

React is a JavaScript library for building reusable UI components using a virtual DOM. It was developed by Facebook and is now maintained by Facebook and a community of individual developers and companies.

Components

In React, everything is a component. A component is a self-contained, reusable piece of code that represents a part of the user interface (UI). Components can be classified as:

  1. Functional components
  2. Class components
  3. Higher-order components (HOCs)
  4. Custom hooks

Functional Components

Functional components are simple, pure functions that take in props and return a React element. They do not have their own state or lifecycle methods.

function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

Class Components

Class components are more complex than functional components and provide access to state, lifecycle methods, and refs. They extend the React.Component class or a base class like PureComponent.

class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}

JSX

JSX is a syntax extension for JavaScript that allows you to write HTML-like code within your React components. JSX makes it easier to create and manipulate the UI by enabling developers to define elements, attributes, and expressions directly in their code.

const element = <h1>Hello, world!</h1>;

State and Props

State is a data structure that stores the current state of a component. It can be mutated using the setState() method or functional updates (using the useState hook in functional components).

Props are properties passed from parent components to child components, allowing for customization and reusability.

Lifecycle Methods

Class components have lifecycle methods that get called at different stages during a component's life cycle. These methods allow developers to handle events such as mounting, updating, and unmounting components. Functional components do not have built-in lifecycle methods but can use the useEffect hook for similar functionality.

Worked Example

Let's create a simple counter component using functional components with the useState hook:

  1. Install Create React App:
npx create-react-app counter-app
cd counter-app
  1. Replace the contents of src/App.js with the following code:
import { useState } from 'react';
import './App.css';

function App() {
const [count, setCount] = useState(0);

const incrementCount = () => {
setCount(count + 1);
};

const decrementCount = () => {
setCount(count - 1);
};

return (
<div className="App">
<h1>Count: {count}</h1>
<button onClick={incrementCount}>Increment</button>
<button onClick={decrementCount}>Decrement</button>
</div>
);
}

export default App;
  1. Create a new CSS file at src/App.css and add the following styles:
.App {
text-align: center;
}

button {
margin: 10px;
padding: 5px 10px;
font-size: 1em;
}
  1. Start the development server by running npm start. Open your browser and navigate to http://localhost:3000 to see the counter in action.

Common Mistakes

  1. Forgetting to bind event handlers in class components (use arrow functions or bind() method)
  2. Mutating state directly instead of using setState() or functional updates
  3. Ignoring error boundaries for handling component errors
  4. Not using keys when rendering lists with dynamic data
  5. Overusing class components instead of functional components
  6. Failing to optimize performance by memoizing expensive functions or using React.memo
  7. Mismanaging state and props, leading to hard-to-debug issues
  8. Incorrectly handling asynchronous operations (such as API calls) within component lifecycle methods
  9. Not properly managing side effects using useEffect and cleaning up with useEffect(cleanup, dependencies)
  10. Using outdated or deprecated features, such as class components without the extends React.Component syntax

Practice Questions

  1. Create a simple to-do list app using React hooks (useState, useEffect)
  • Allow users to add new tasks by entering them in an input field and clicking a "Add Task" button
  • Display the list of tasks in a ordered list
  • Implement functionality to mark tasks as completed when clicked on
  • Persist task data using localStorage or another method
  1. Implement a search bar that filters items in a list based on user input
  • Allow users to enter their search query in an input field
  • Display only the items that match the entered query
  • Highlight matching text within each item for better visibility
  1. Build a simple weather app using an API and display the current temperature, location, and weather conditions
  • Use a weather API like OpenWeatherMap to fetch weather data for a specific location (e.g., user's current location or a city they select)
  • Display the fetched data in a clean and easy-to-read format
  • Implement functionality to update the displayed data at regular intervals (e.g., every minute)
  1. Create a responsive layout for your to-do list app using media queries or a CSS framework like Bootstrap
  • Ensure that your app looks good on various screen sizes, including mobile and desktop devices
  • Adjust the layout, font size, and other visual elements as needed for optimal readability and usability on different devices

FAQ

What is the difference between functional components and class components in React?

Functional components are simpler, easier to write, and have fewer features than class components. Functional components do not have their own state or lifecycle methods but can use hooks for similar functionality. Class components provide access to state, lifecycle methods, and refs, making them more suitable for complex applications with multiple components and data management needs.

Why should I use JSX in my React components?

JSX makes it easier to create and manipulate the UI by enabling developers to define elements, attributes, and expressions directly in their code. It also helps catch syntax errors early on, as JavaScript does not natively support HTML-like syntax.

How does React's virtual DOM improve performance?

The virtual DOM is a lightweight representation of the actual DOM. When a component's state changes, React compares the old virtual DOM with the new one and only updates the actual DOM for the minimum number of elements required, improving overall performance. This process, known as reconciliation, minimizes expensive DOM manipulations, making React faster than traditional approaches to web development.

How does React handle concurrent rendering?

React's concurrent rendering feature allows multiple components to be rendered at the same time, ensuring that the user interface remains responsive even when complex computations or data fetching is happening in the background. This is achieved through features like Suspense and async rendering.

What are some best practices for optimizing React performance?

Some best practices for optimizing React performance include:

  • Using memoization to avoid unnecessary re-renders of expensive functions
  • Using React.memo or PureComponent to prevent unnecessary re-renders of child components
  • Minimizing the number of state updates by batching them together when possible
  • Implementing lazy loading for large data sets or images
  • Using server-side rendering (SSR) to improve initial load times and SEO
  • Profiling your application using tools like React Developer Tools or Chrome's DevTools to identify bottlenecks and optimize performance.
REACT (Web Development) | Web Development | XQA Learn