What is React: Syntax, Usage, and Examples

React is a JavaScript library for building interactive and reusable user interfaces. Created by Facebook, it focuses on creating dynamic web applications efficiently using a component-based architecture and a virtual DOM.

What is React in Programming?

React leverages JavaScript and JSX (JavaScript XML) to describe what the UI should look like. Instead of directly manipulating the DOM, React creates a virtual DOM that efficiently updates only the necessary parts of the page.

What Language is React?

React is written in JavaScript and is used primarily with JavaScript-based applications. You can also use it with TypeScript, offering type safety and better development practices.

What is React Used For?

React is commonly used for:

• Single-Page Applications (SPAs): Ensuring seamless user experiences without page reloads.
• Dynamic Web Applications: Real-time updates like social media feeds, dashboards, and chat apps.
• Reusable UI Components: Building consistent and maintainable UI elements.
• Mobile Applications: Using React Native, developers can build cross-platform mobile apps for iOS and Android.

How to Use React

To start using React, you can create a new project with Create React App:

npx create-react-app my-app
cd my-app
npm start

This sets up a React project with all necessary tools like Webpack and Babel.

Basic React Component

React components are the building blocks of a React application. Here’s a simple component:

import React from 'react';

function Greeting() {
  return <h1>Hello, React!</h1>;
}

export default Greeting;

Components can be functional or class-based. Functional components are preferred in modern React.

React Virtual DOM Explained

What is the Virtual DOM in React?

The virtual DOM is a lightweight representation of the real DOM. When you update the UI, React updates the virtual DOM first, calculates the differences, and then applies only the necessary changes to the real DOM. This process, called “reconciliation,” makes React applications faster and more efficient.

Advantages of Virtual DOM in React

1. Performance: Faster updates by avoiding direct DOM manipulation.
2. Efficient Rendering: Only changes are applied to the real DOM, reducing unnecessary re-rendering.
3. Simplified State Management: Predictable and easier to debug.

React Virtual DOM vs. Shadow DOM

The virtual DOM and Shadow DOM serve different purposes. The virtual DOM optimizes rendering in React, while the Shadow DOM is used in web components for encapsulation of styles and scripts.

React Components and State

React components can manage their own data using state.

State in Functional Components with Hooks

Hooks, introduced in React 16.8, allow state management in functional components:

import { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

The useState hook maintains state across renders and triggers updates when state changes.

Conditional Rendering in React

Conditional rendering displays different UI elements based on certain conditions.

function WelcomeMessage({ isLoggedIn }) {
  return <h1>{isLoggedIn ? "Welcome back!" : "Please log in."}</h1>;
}

This component displays a different message depending on whether the user is logged in.

Lists and Keys in React

When rendering lists, each item should have a unique key for efficient rendering:

function ItemList({ items }) {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

The key helps React identify changes in the list.

Handling User Input

React uses controlled components to handle user input:

import { useState } from 'react';

function TextInput() {
  const [text, setText] = useState('');

  return (
    <div>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <p>You typed: {text}</p>
    </div>
  );
}

The component’s state controls the input value.

Routing with React Router

React Router manages navigation in React applications:

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

export default App;

This example demonstrates basic routing between a home and an about page.

What is React Strict Mode?

React’s Strict Mode is a development tool that helps identify potential issues in your code. It does not affect the production build but enables additional checks and warnings in development.

How to Disable React Strict Mode

To disable it, remove the <React.StrictMode> wrapper in index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

Turn Off React Strict Mode in Create React App

In Create React App, Strict Mode is enabled by default. To turn it off, remove the StrictMode component from index.js.

Common React Questions

What is React Framework?

React is not a full framework; it is a JavaScript library focused on UI development. Unlike frameworks like Angular, which offer a complete solution including routing and state management, React provides the view layer and relies on additional libraries like React router for routing and Redux for state management.

What is React Programming?

React programming refers to building user interfaces using React’s component-based architecture. It involves creating components, managing state, handling events, and rendering dynamic content.

Advanced Topics

React also supports advanced concepts like:

• Context API: For managing global state.
• React Hooks: For state and lifecycle management in functional components.
• React Suspense and Lazy Loading: For optimizing performance by loading components asynchronously.