Discover the Power of React

What You Will Learn

In this course, you will conceptually explore:

• The definition and core principles of React.
• The concept of Components in React.
• The syntax of JSX (JavaScript XML).
• How to pass data using Props.
• Managing dynamic data with State.
• Handling user interactions through Events.
• Rendering elements conditionally.
• Working with Lists and Keys in React.
• An introduction to React Hooks.
• The basic concepts of the Component Lifecycle.

React is a declarative, efficient, and flexible JavaScript library for building user interfaces (UIs) or UI components. It allows developers to create reusable UI pieces and efficiently update and render them when data changes. React is primarily used for building single-page applications (SPAs) or dynamic web applications.

The official React logo.

Key Concepts of React:

• Declarative: You describe what the UI should look like, and React takes care of updating the DOM (Document Object Model) to match that description.
• Efficient: React uses a virtual DOM, which is an in-memory representation of the actual DOM. It only updates the real DOM when necessary, leading to better performance.
• Component-Based: UIs are built by composing reusable and independent components, making development and maintenance easier.
• Learn Once, Write Anywhere: The concepts you learn in React can be applied to build web applications, mobile apps (with React Native), and even desktop applications.

Think of components like LEGO bricks – you can combine them in different ways to create complex user interfaces. React has two main types of components (conceptually):

// Example of a functional component
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// Example of a class component (older syntax)
class Welcome extends React.Component {
  render() {
    return <h1>Welcome, {this.props.user}!</h1>;
  }
}

Components can be nested within each other to create complex UI structures.

Conceptual diagram of a React component tree.

Props are read-only from the perspective of the child component. They are like arguments passed to a function.

// Parent component passing a prop
function App() {
  return <Greeting name="Alice" />;
}

// Child component receiving the prop
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

You can pass various types of data as props, including strings, numbers, objects, and even functions.

// Passing different data types as props
function UserInfo(props) {
  return (
    <div>
      <p>Name: {props.person.firstName} {props.person.lastName}</p>
      <p>Age: {props.age}</p>
      <button onClick={props.onClick}>Click Me</button>
    </div>
  );
}

function App() {
  const user = { firstName: 'Bob', lastName: 'Smith' };
  const userAge = 30;
  const handleClick = () => console.log('Button clicked!');

  return <UserInfo person={user} age={userAge} onClick={handleClick} />;
}

State makes components interactive. In functional components, state is typically managed using React Hooks (specifically useState).

// Functional component with useState Hook
import React, { useState } from 'react';

function Counter() {
  // Declare a state variable 'count' initialized to 0
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1); // Update the state
  };

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

When the setCount function is called, React re-renders the Counter component, and the updated

Conceptual flow of state updates in a React component.

Event handlers are typically defined as functions within your component and are then attached to JSX elements using special props (e.g., onClick, onChange, onSubmit).

// Handling a button click event
import React from 'react';

function MyButton() {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return <button onClick={handleClick}>Click Me</button>;
}

When an event occurs on a React element, React calls the corresponding event handler function.

// Handling an input change event
import React, { useState } from 'react';

function MyInput() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleChange} />
      <p>You typed: {inputValue}</p>
    </div>
  );
}

You can use standard JavaScript conditional statements (like if/else) or the ternary operator within your JSX to achieve conditional rendering.

// Conditional rendering using if/else
import React from 'react';

function Greeting(props) {
  if (props.isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <h1>Please log in.</h1>;
  }
}

function App() {
  return <Greeting isLoggedIn={true} />;
}

// Conditional rendering using the ternary operator
import React from 'react';

function Message(props) {
  return <p>{props.showMessage ? 'Message is visible' : 'Message is hidden'}</p>;
}

function App() {
  return <Message showMessage={false} />;
}

Conditional rendering is essential for creating dynamic and interactive user interfaces.

Keys help React identify which items in the list have changed, been added, or been removed. This is important for efficient updating of the DOM.

// Rendering a list of items
import React from 'react';

function ItemList(props) {
  const items = props.items;
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

function App() {
  const data = [{ id: 1, name: 'Apple' }, { id: 2, name: 'Banana' }, { id: 3, name: 'Cherry' }];
  return <ItemList items={data} />;
}

The key prop should be unique among sibling elements. Often, an ID from your data is used as the key.

Conceptual illustration of rendering a list of components with keys.

Some of the most commonly used built-in Hooks include:

• useState: For adding state to functional components (as seen in the "Understanding State" section).
• useEffect: For performing side effects in functional components (e.g., data fetching, setting up subscriptions, or manually changing the DOM).
• useContext: For accessing context data without prop drilling.
• useReducer: For more complex state logic.
• useRef: For accessing the DOM directly or holding mutable values.

// Example using the useEffect Hook for a side effect
import React, { useState, useEffect } from 'react';

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

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  }); // Empty dependency array means this runs once after the initial render

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

Hooks provide a more straightforward and organized way to manage state and side effects in functional components.

Understanding the lifecycle helps you manage side effects and optimize component behavior. Key lifecycle phases (conceptually represented with Hooks now) include:

• Mounting: When a component is being created and inserted into the DOM (useEffect with an empty dependency array can simulate componentDidMount).
• Updating: When a component's props or state change, causing a re-render (useEffect with dependencies can simulate componentDidUpdate).
• Unmounting: When a component is being removed from the DOM (the cleanup function returned by useEffect can simulate componentWillUnmount).

Conceptual diagram of the React component lifecycle.

Hooks like useEffect provide a unified way to handle these lifecycle events in functional components.