Lesson: Understanding React

Introduction to React Framework

React is a powerful JavaScript library that has revolutionized the way developers build web applications. Created by Facebook in 2013, React makes it easier to create interactive user interfaces using components. It utilizes a declarative paradigm that makes code more predictable and easier to debug. Whether you’re building a small or large-scale application, React offers a flexible and efficient solution to enhance user experience.

Key Components and Techniques in React

React’s architecture revolves around components, which can be thought of as reusable building blocks for your user interface. Here’s a quick overview of the basic components and techniques used in React:

1. Components: These are the building blocks of any React application. They can be class-based or functional.
   • Functional Components: These are JavaScript functions that return elements representing a part of the UI.
   • Class Components: These are ES6 classes that extend from React.Component and can hold and manage local state.
2. JSX (JavaScript XML): JSX is a React extension that allows you to write HTML structures in the same file as JavaScript code. This makes the code easier to understand and maintain.
3. Props: Short for properties, props are a way of passing data from parent to child components. They are immutable, which means they cannot be changed by the child component.
4. State: Unlike props, the state is internal to the component and can change over time, usually as a result of user actions.
5. Hooks: Introduced in React 16.8, hooks allow you to use state and other React features without writing a class. useState and useEffect are among the most commonly used hooks.
6. Event Handling: React elements can handle events similar to handling events on DOM elements. These events are written in camelCase syntax.
7. Lifecycle Methods: In class components, lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount allow you to run code at particular times in the component’s lifecycle.
8. Context API: This provides a way to pass data through the component tree without having to pass props down manually at every level.

Examples with Source Code

Let’s look at some basic examples to understand these concepts better.

Example 1: Functional Component with Props

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

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

Example 2: Class Component with State

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

  incrementCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}

// Usage
<Counter />

Example 3: Using Hooks

import React, { useState } from 'react';

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

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

// Usage
<Counter />

Learning

https://react.dev/reference/react

https://react.dev/learn/thinking-in-react