Introduction to React

What is React?

React is a JavaScript library for building user interfaces. It is primarily used for building single-page applications and allows developers to create reusable UI components.

• Developed by Facebook in 2011
• Open-sourced in 2013
• Used by companies like Instagram, Netflix, and Airbnb

History of React

• React was created by Jordan Walke, a software engineer at Facebook.
• Initially developed to handle Facebook’s dynamic and complex UI.
• Over time, React has evolved to be one of the most popular libraries for front-end development.

React vs Other Frameworks

• React focuses only on the UI layer, unlike Angular or Vue, which provide more complete frameworks.
• React’s strength lies in its component-based architecture and Virtual DOM, making it efficient for handling dynamic content.

Key Concepts in React

1. Components: The building blocks of a React application.
2. State: Internal data management within a component.
3. Props: Properties passed between components to share data.

ReactDOM and Virtual DOM

• ReactDOM: Integrates React with the browser’s DOM.
• Virtual DOM: A lightweight copy of the DOM that React uses to optimize rendering.

React’s diffing algorithm compares the Virtual DOM with the real DOM to update only what has changed, enhancing performance.

Components in React

• Components are reusable building blocks of a React application.
• Each component represents a part of the UI.

There are two main types of components:

1. Functional Components: Simple components defined as functions.
2. Class Components: More complex components that have lifecycle methods.

Functional Components

• Functional components are stateless by default.
• With the introduction of Hooks, they can now manage state and lifecycle methods.

Class Components

• Class components allow the use of state and lifecycle methods directly.
• However, with React Hooks, class components are becoming less common.

State in React

State is used to manage data internal to a component and can change over time.

• In the example above, useState initializes the state (count) and provides a function (setCount) to update it.

Props in React

Props are used to pass data from parent to child components.

• In this example, the Welcome component receives the name prop from its parent component App.
• Props are read-only and cannot be modified by the child component.

What is Vite?

Introduction to Vite

Vite is a modern build tool that provides a faster and leaner development experience for web projects.

• Created by Evan You (the creator of Vue.js)
• Optimized for modern frontend development with frameworks like React, Vue, and Svelte.
• Vite means "fast" in French, highlighting its focus on speed.

Why Vite is Fast

Two main reasons:

1. Native ES Modules:

   • Vite serves code using native ES Modules in the browser during development.
   • No need for bundling in the dev environment, leading to instant server startup.

2. On-demand compilation:

   • Only the code you use is compiled on the fly, which makes hot module replacement (HMR) extremely fast.

Vite vs Traditional Bundlers

Vite's Features

• Lightning-fast Hot Module Replacement (HMR)
• Out-of-the-box support for modern frameworks like React, Vue, and Svelte
• Optimized build with Rollup under the hood
• Plug-in ecosystem: Extensible through Rollup and community plugins

Vite Project Structure

Once you create a project with Vite, it will have the following structure:

React with Vite

Setting Up React with Vite

1. Install Vite using npm:

1. Navigate into the project folder and install dependencies:

1. Start the development server:

Vite Project Structure

• public/: Static assets.
• src/: Source code for the application.
• vite.config.js: Configuration file for Vite.

Basic Component with Vite

Advantages of React

1. Component-based architecture:
   • Reusable components make it easy to manage complex UIs.
2. Virtual DOM:
   • React efficiently updates the UI by only rendering changed parts.
3. Fast development:
   • Tools like Vite and React's declarative nature speed up development.
4. Strong ecosystem:
   • Large community support, with numerous libraries and tools.

Disadvantages of React

1. Learning curve:
   • Understanding concepts like state management and the Virtual DOM can be challenging.
2. Complex in large applications:
   • Scaling React for larger applications requires additional tools (e.g., Redux, React Router).
3. SEO challenges:
   • Single-page applications may require Server-Side Rendering (SSR) for better SEO.

What is npm and Yarn?

Introduction to npm

npm (Node Package Manager) is the default package manager for JavaScript's Node.js runtime.

• Released in 2010.
• Comes bundled with Node.js.
• Allows developers to install, manage, and share packages (libraries, frameworks, tools).

Key Features of npm

• Package registry: A massive repository where developers can find and publish packages.
• Package.json: A file that defines the project's dependencies, scripts, and metadata.
• Scripts: Automate tasks (e.g., running tests, building the project) using npm commands.

Example of package.json

Introduction to Yarn

Yarn is another package manager for JavaScript, created by Facebook in 2016.

• Designed as a faster, more reliable alternative to npm.
• Uses the same npm registry but has enhanced features for dependency management.

Key Features of Yarn

1. Speed: Yarn is known for faster installations due to parallel processes.
2. Deterministic dependency tree: Ensures consistent installations across different environments.
3. Lockfile: Ensures the same package versions are installed each time, preventing version mismatches.

Example of Yarn.lock

npm vs Yarn

Example of Using npm and Yarn

Install a package with npm:

Install a package with Yarn:

Both commands will install React, but Yarn does it more quickly due to its optimized performance.

Introduction to React Hooks

• React Hooks were introduced in React 16.8.
• They allow functional components to use state and other React features.
• Common hooks include:
  • useState
  • useEffect
  • useMemo
  • useContext

useState Hook

• useState is used to declare state variables in functional components.
• It returns two values:
  1. The current state.
  2. A function to update the state.

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

Initializes a state variable count with 0.

useEffect Hook

• useEffect handles side effects in components.
• Side effects include:
  • Fetching data from an API.
  • Subscriptions.
  • Directly manipulating the DOM.

useEffect(() => {
  console.log("Component mounted");
}, []);

Executes once when the component mounts.

useMemo Hook

• useMemo memoizes expensive calculations to improve performance.
• Returns a memoized value that only recalculates if dependencies change.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

The function is only recalculated when a or b changes.

useContext Hook

• useContext allows you to share state across components without passing props.
• It provides access to the nearest context value.

const value = useContext(MyContext);

Retrieves the current value of MyContext.

Creating Custom Hooks

• Custom hooks allow us to extract and reuse logic from components.
• They are JavaScript functions that use React hooks.
• Naming convention: Hooks must start with use.

Why use custom hooks?

• Reusability
• Cleaner code

Example: Custom Counter Hook

We will create a custom hook to manage a counter's state.

import { useState } from 'react';

const useCounter = (initialValue = 0) => {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  const reset = () => setCount(initialValue);

  return { count, increment, decrement, reset };
};

Using the Custom Counter Hook

import React from 'react';
import useCounter from './useCounter';

const CounterComponent = () => {
  const { count, increment, decrement, reset } = useCounter(0);

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

This component uses the useCounter hook to manage the counter's logic.

Custom Hook with useEffect

You can use useEffect within custom hooks to handle side effects.

import { useState, useEffect } from 'react';

const useFetchData = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
};

Using the Custom Fetch Hook

import React from 'react';
import useFetchData from './useFetchData';

const DataComponent = () => {
  const { data, loading, error } = 
  	useFetchData('https://api.example.com/data');

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h1>Fetched Data</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

This component fetches data using the useFetchData custom hook.

Advanced useMemo Example

• useMemo can be particularly useful when a component performs expensive calculations.

Expensive Calculation Example

import { useState, useMemo } from 'react';

const ExpensiveCalculation = () => {
  const [count, setCount] = useState(0);
  const [input, setInput] = useState('');

  const expensiveCalculation = (num) => {
    console.log('Calculating...');
    return num * 2;
  };

  const memoizedValue = 
  	useMemo(() => expensiveCalculation(count), [count]);

  return (
    <div>
      <p>Memoized Value: {memoizedValue}</p>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <input value={input} onChange={(e) => setInput(e.target.value)} />
    </div>
  );
};

expensiveCalculation will only run when count changes, not on every re-render.

Optimizing Performance with useMemo

• When to use useMemo:
  • Expensive operations that don't need to be recalculated every time.
  • Avoiding re-renders of child components if props/state haven’t changed.

When NOT to use useMemo:

• Don't use it prematurely; use it only for heavy computations.

useContext with Global State

• useContext is ideal for global state management when you don't want to pass props down manually.
• It pairs with createContext() to define the global state.

Example: Creating a Context

import React, { createContext, useState } from 'react';

export const ThemeContext = createContext();

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export default ThemeProvider;

Consuming Context with useContext

• useContext is used to consume values from the nearest provider.

Example: Using ThemeContext

import React, { useContext } from 'react';
import { ThemeContext } from './ThemeProvider';

const ThemedComponent = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <div style={{ 
    	background: theme === 'light' ? '#fff' : '#333', 
    	color: theme === 'light' ? '#000' : '#fff' }}>
      <p>Current Theme: {theme}</p>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
};

ThemedComponent uses ThemeContext to access the current theme and toggle it.

What is useReducer?

• useReducer is an alternative to useState for managing complex state logic.
• It’s particularly useful when:
  • The state logic involves multiple sub-values.
  • The next state depends on the previous state.
  • You want to centralize state updates into a single function.

Basic Concept

• useReducer takes two arguments:
  1. A reducer function.
  2. An initial state.
• It returns:
  1. The current state.
  2. A dispatch function to trigger state changes.

Reducer Function Structure

• The reducer function takes two parameters:
  1. The current state.
  2. An action object that describes the state change.

Example:

const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

Example: Using useReducer

• Let's implement a counter using useReducer.

Dispatch sends an action to the reducer to change the state.

import { useReducer } from 'react';

const initialState = { count: 0 };

const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const CounterWithReducer = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button 
      	onClick={() => dispatch({ type: 'INCREMENT' })}>
        	Increment</button>
      <button 
      	onClick={() => dispatch({ type: 'DECREMENT' })}>
        Decrement</button>
    </div>
  );
};

Comparing useReducer and useState

• useState is simpler and works best for local, simple state logic.
• useReducer is better for:
  • Complex logic involving multiple actions.
  • State transitions dependent on previous state.
  • Situations where the logic is centralized and easier to test.

Key Differences:

• useReducer organizes state updates in a more declarative way using the reducer function.
• useState allows more direct state management.

Combining Context with useReducer

• useReducer is often used alongside useContext to manage complex state logic.

import { useReducer, useContext } from 'react';
import { ThemeContext } from './ThemeProvider';

const themeReducer = (state, action) => {
  switch (action.type) {
    case 'LIGHT':
      return 'light';
    case 'DARK':
      return 'dark';
    default:
      return state;
  }
};

const ThemedComponentWithReducer = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);
  const [state, dispatch] = useReducer(themeReducer, theme);

  return (
    <div style={{ 
    	background: state === 'light' ? '#fff' : '#333',
        color: state === 'light' ? '#000' : '#fff' }}>
      <p>Current Theme with Reducer: {state}</p>
      <button 
      	onClick={() => 
        	dispatch({ type: state === 'light' ? 'DARK' : 'LIGHT' })}>
        Toggle Theme with Reducer </button>
    </div>
  );
};

Benefits of useReducer

• Centralized state management in a single reducer function.
• Clear and predictable state updates.
• Useful for components with many interactions or complex state updates (e.g., forms, multi-step workflows).

When to use:

• When the component’s state has many possible changes.
• When actions and state transitions are more complex than just updating a single value.

Combining useReducer and useContext

• useReducer and useContext often work together to manage global state in React applications.
• Context provides the global state, while useReducer handles the logic for updating that state.

Example: Combining useReducer with Context

import React, { createContext, useReducer, useContext } from 'react';

const AppContext = createContext();

const reducer = (state, action) => {
  switch (action.type) {
    case 'SET_USER':
      return { ...state, user: action.payload };
    default:
      return state;
  }
};

const initialState = { user: null };

export const AppProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <AppContext.Provider value={{ state, dispatch }}>
      {children}
    </AppContext.Provider>
  );
};

export const useAppContext = () => useContext(AppContext);

The global state is stored in AppContext and modified using useReducer.

Example: Fetching User Data with Context and Reducer

import React, { useEffect } from 'react';
import { useAppContext } from './AppProvider';

const UserProfile = () => {
  const { state, dispatch } = useAppContext();

  useEffect(() => {
    const fetchUser = async () => {
      const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
      const userData = await response.json();
      dispatch({ type: 'SET_USER', payload: userData });
    };
    
    fetchUser();
  }, [dispatch]);

  return (
    <div>
      <h1>User Profile</h1>
      {state.user ? (
        <pre>{JSON.stringify(state.user, null, 2)}</pre>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
};

The UserProfile component fetches user data and updates global state.

Form Handling in React

• Forms are a key part of web applications, and React provides efficient ways to manage form state using hooks.
• We will use useState and useReducer to manage form inputs and handle form submissions.

Example: Basic Form with useState

import React, { useState } from 'react';

const BasicForm = () => {
  const [name, setName] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Submitted: ${name}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
};

This form simply updates the name state using useState.

Managing Form State with useReducer

• useReducer is helpful when managing multiple form fields or complex form logic.
• It simplifies form state management by reducing all state changes into a single function.

Example: Complex Form with useReducer

This form uses useReducer to manage both name and email states.

import React, { useReducer } from 'react';

const formReducer = (state, action) => {
  switch (action.type) {
    case 'SET_NAME':
      return { ...state, name: action.payload };
    case 'SET_EMAIL':
      return { ...state, email: action.payload };
    default:
      return state;
  }
};

const FormWithReducer = () => {
  const [state, dispatch] = useReducer(formReducer, { name: '', email: '' });

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Submitted: Name - ${state.name}, Email - ${state.email}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          value={state.name}
          onChange={(e) => dispatch({ type: 'SET_NAME', payload: e.target.value })}
        />
      </label>
      <br />
      <label>
        Email:
        <input
          type="email"
          value={state.email}
          onChange={(e) => dispatch({ type: 'SET_EMAIL', payload: e.target.value })}
        />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
};

This form uses useReducer to manage both name and email states.

Practice Exercise

Objective:

• Implement a form to handle user inputs for a "To-Do List" application using useContext, useReducer, and form management.

Requirements:

1. Create a form with an input for the task name.
2. Use useReducer to manage the list of tasks.
3. Use useContext to provide the task state globally across components.
4. Implement features to add tasks and remove them from the list.