React

1. Components - The Building Blocks

Components are the heart of React. They are reusable pieces of code that return JSX (JavaScript XML) to describe what should appear on the screen. Think of components as custom HTML elements that can have their own logic and state.

There are two types of components: functional components (using functions) and class components (using ES6 classes). Modern React development primarily uses functional components with hooks, which is simpler and more efficient.

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

// Usage
<Welcome name="React Developer" />

2. JSX - JavaScript Syntax Extension

JSX allows you to write HTML-like code directly in your JavaScript files. It's a syntax extension that makes React code more readable and intuitive. JSX gets transpiled to regular JavaScript function calls that React understands.

JSX looks like HTML but has some key differences: you must use className instead of class, and you can embed JavaScript expressions using curly braces. JSX also requires a single parent element or a React Fragment.

const element = (
  <div className="container">
    <h1>Welcome to React</h1>
    <p>Today is {new Date().toLocaleDateString()}</p>
  </div>
);

3. Props - Passing Data to Components

Props (short for properties) are how you pass data from parent components to child components. Props are read-only and cannot be modified by the child component. They allow components to be dynamic and reusable with different data.

You can pass any JavaScript value as props: strings, numbers, objects, arrays, functions, and even other React components. Props make components flexible and reusable across your application.

function UserCard({ name, age, email }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Age: {age}</p>
      <p>Email: {email}</p>
    </div>
  );
}

// Usage
<UserCard name="John Doe" age={28} email="john@example.com" />

4. State - Managing Component Data

State allows components to create and manage their own data that can change over time. When state changes, React automatically re-renders the component to reflect the new data. State is what makes React components interactive and dynamic.

In functional components, you use the useState hook to add state. The useState hook returns an array with two elements: the current state value and a function to update it. State updates trigger re-renders, which is how React keeps the UI in sync with your data.

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>
  );
}

5. Hooks - Modern React Features

Hooks are special functions that let you "hook into" React features from functional components. They were introduced in React 16.8 and revolutionized how developers write React code. Hooks allow you to use state, lifecycle methods, and other React features without writing class components.

Some essential hooks include useState for state management, useEffect for side effects and lifecycle operations, useContext for accessing context values, and useRef for accessing DOM elements or storing mutable values. You can also create custom hooks to share logic between components.

import { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(data => setData(data));
  }, []);
  
  return <div>{data ? data.message : 'Loading...'}</div>;
}

Step 1: Prerequisites

Before learning React, you should have a solid understanding of HTML, CSS, and JavaScript (ES6+). Familiarity with concepts like arrow functions, destructuring, template literals, and modules will make learning React much easier. You should also understand how to use the command line and have Node.js installed on your computer.

Step 2: Setting Up Your First React Project

The easiest way to create a new React project is using Create React App, which sets up a modern development environment with all the necessary tools configured. Simply run npx create-react-app my-app in your terminal, and you'll have a fully functional React application ready to go.

Create React App includes webpack, Babel, ESLint, and other tools configured out of the box. It also provides hot reloading, so your changes appear instantly in the browser without manual refresh. This makes development much faster and more enjoyable.

Step 3: Understanding the Project Structure

A typical React project created with Create React App has a specific structure. The src folder contains your source code, including your React components. The public folder contains static assets like images and the HTML template. Understanding this structure helps you organize your code effectively.

Step 4: Building Your First Component

Start by creating a simple component. Open the App.js file and modify it to create your first custom component. Practice by building components like buttons, cards, or simple forms. This hands-on experience is crucial for understanding how React works.

Component Composition

Instead of creating large, monolithic components, break your UI into smaller, focused components. Each component should have a single responsibility. This makes your code more maintainable, testable, and reusable. Compose these smaller components together to build complex UIs.

Lifting State Up

When multiple components need to share the same data, lift the state up to their closest common ancestor. This parent component manages the shared state and passes it down as props to child components. This pattern ensures a single source of truth and makes data flow predictable.

Conditional Rendering

React allows you to conditionally render components or elements based on certain conditions. You can use JavaScript operators like the ternary operator or logical AND operator to show or hide content. This is essential for building dynamic, interactive user interfaces.

Lists and Keys

When rendering lists of items, React requires you to provide a unique key prop for each item. Keys help React identify which items have changed, been added, or removed, enabling efficient updates to the DOM. Always use stable, unique identifiers as keys, preferably IDs from your data.