React Basics

1. Components and JSX

Components: Components are the building blocks of React applications. They are reusable pieces of code that return React elements describing what should appear on the screen.

There are two types of components: a) Functional Components: JavaScript functions that return JSX. b) Class Components: ES6 classes that extend React.Component and have a render method.

Example of a functional component:

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

JSX: JSX is a syntax extension for JavaScript, used with React to describe what the UI should look like. It looks similar to HTML but is actually closer to JavaScript.

Key points about JSX:

• It allows you to write HTML-like code in your JavaScript
• It’s transformed into regular JavaScript at runtime
• It can include JavaScript expressions within curly braces

Example of JSX:

const element = <h1>Hello, {name}</h1>;

2. Props and State

Props: Props (short for properties) are how components receive data from their parent. They are read-only and help make your components reusable.

Key points about props:

• They are passed to components like attributes in HTML
• They are immutable (cannot be changed within the component)
• They can be of any type: strings, numbers, objects, functions, etc.

Example of passing and using props:

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

<Welcome name="Alice" />;

State: State is data that can change over time within a component. When state changes, the component re-renders.

Key points about state:

• It’s managed within the component
• It can be changed using setState() in class components or state updating functions in functional components
• State updates may be asynchronous

Example of state in a class component:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return <h1>Count: {this.state.count}</h1>;
  }
}

3. Lifecycle Methods (for class components) or Hooks (for functional components)

Lifecycle Methods (Class Components): These are special methods that run at particular times during a component’s lifecycle.

Key lifecycle methods:

• componentDidMount(): Runs after the component is rendered to the DOM
• componentDidUpdate(): Runs after the component updates
• componentWillUnmount(): Runs before the component is removed from the DOM

Example:

class Example extends React.Component {
  componentDidMount() {
    console.log("Component mounted");
  }

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

Hooks (Functional Components): Hooks allow functional components to use state and other React features without writing a class.

Key hooks:

• useState: Allows functional components to manage state
• useEffect: Performs side effects in functional components (similar to lifecycle methods)
• useContext: Subscribes to React context without introducing nesting

Example using hooks:

import React, { useState, useEffect } from "react";

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

In this example:

• useState manages the count state
• useEffect updates the document title after each render, similar to componentDidMount and componentDidUpdate

These concepts form the core of React development. Components structure your application, JSX describes the UI, props and state manage data, and lifecycle methods or hooks handle side effects and component behavior throughout their lifecycle.