What is React? An Overview of React.js Concepts and Terminology

What is React?

• React is a JavaScript library used to build user interfaces, particularly single-page applications (SPAs). It allows developers to create reusable components that manage their local state and handle user interactions. React follows a unidirectional data flow, meaning data flows from parent to child components, promoting better management of data and UI state.

Key React Terminologies and Concepts

Components in React

• Components are the building blocks of React applications. They represent self-contained pieces of the UI that can be reused multiple times.

function MyComponent() {
  return <h1>Hello, World!</h1>;
}

JSX: Writing Dynamic JavaScript in React

• JSX(JavaScript XML) is a syntax extension of JavaScript that allows writing HTML-like code inside JavaScript. It is not actual HTML but rather a syntax that gets transformed into JavaScript code using React.createElement() calls. JSX makes React easier to work with by combining markup and logic.

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

Props(Properties) in React: Passing Data Between Components

• Props are used to pass data from one component to another, typically from a parent component to a child component. Props are read-only and should not be modified by the child component.

function ChildComponent(props) {
  return <p>{props.message}</p>;
}

function ParentComponent() {
  return <ChildComponent message="Hello from parent" />;
}

Using Key in React for Optimized Rendering

• The key is a special attribute used when rendering lists of elements in React. It helps React identify which elements have changed, are added, or are removed, thus optimizing re-rendering.

const items = ['Apple', 'Banana', 'Cherry'];

const list = items.map((item, index) => <li key={index}>{item}</li>);

Rendering in React Explained

• Rendering in React refers to converting the JSX code into DOM elements and displaying it in the browser. React uses the Virtual DOM (more on that below) to manage this efficiently.

Understanding the Virtual DOM in React

• The Virtual DOM is a lightweight copy of the actual DOM. React uses it to improve performance by only updating the parts of the UI that have changed rather than re-rendering the entire page. When the state of a component changes, React compares the new Virtual DOM with the previous one (called "diffing") and applies the minimum number of changes to the real DOM.

Immutable State

• In React, the state is immutable(Not Changeable), meaning you do not modify it directly. Instead, you make a copy of the existing state, apply the necessary changes, and then set the new state.

const [numbers, setNumbers] = React.useState([1, 2, 3]);

// Correct way to update state:
setNumbers([...numbers, 4]); // Adds 4 to the array

Directives

• Directives like "use client" and "use server" are used in frameworks like Next.js, which extend React. They instruct the framework to treat specific components as either client-side or server-side components. This is useful for determining where code execution occurs. eg:

"use client";

export default function ClientComponent() {
  return <p>This component runs on the client side.</p>;
}

React Strict Mode: Detecting Potential Problems

• Strict Mode is a tool in React that helps detect potential problems in an application during development. It does not render any UI but activates additional checks and warnings for its descendants. It does not affect production code directly, but it helps to identify issues early on.

import React from 'react';
import ReactDOM from 'react-dom';

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