Deploying a React app involves several steps to prepare the app for production, including optimizing the build, configuring deployment settings, and choosing a hosting platform. This note focuses on the preparation of a React app for production using the npm run build command, which creates an optimized version of your app for deployment.

1. Preparing the App for Production Using npm run build

When you’re ready to deploy your React app, the first step is to create a production build. React provides a command npm run build that bundles your app into static files optimized for performance. This build includes minified JavaScript, optimized assets, and a structure that can be served by a static server.

In React, styling can be done in multiple ways depending on your preferences and the requirements of the project. You can use inline styles, external CSS, CSS Modules, or even CSS-in-JS solutions like Styled Components and utility-first frameworks like Tailwind CSS. This note will explore these approaches and when to use each.

1. Inline Styles vs External CSS vs CSS Modules

1.1 Inline Styles

Inline styles are applied directly within a component using a JavaScript object. Each style property is written in camelCase instead of hyphenated format.

React hooks allow functional components to manage side effects, state, and other lifecycle events. The introduction of hooks has simplified component lifecycle management and enabled functional components to become more powerful and feature-rich.

1. Introduction to React Hooks

React hooks are functions that allow you to “hook into” React features from functional components. They provide a more declarative approach to handling component logic compared to class components. The most commonly used hooks are:

Rendering lists in React is common for displaying multiple items dynamically. React provides a built-in way to efficiently render lists using JavaScript array methods like .map(). Additionally, using keys is important for optimizing rendering and maintaining state in lists.

1. Rendering Lists with .map()

In React, the .map() function is commonly used to iterate over an array of data and return an array of elements that can be rendered. This is especially useful for rendering dynamic data like lists of items.

Conditional rendering allows components to decide what to display based on certain conditions. React provides several ways to implement conditional rendering, making it easy to display different UI elements based on the state or props of a component.

1. Using if-else Statements

You can use standard JavaScript if-else statements for conditional rendering within a component. Typically, you would do this outside of the JSX return statement, such as within the render function or directly before the return.

React provides a way to handle user interactions such as clicks, form submissions, and other events using event handlers. These handlers work similarly to JavaScript event listeners but are optimized for React’s virtual DOM.

1. Handling Events in React

Key Points:

• Event handlers in React are written as camelCase (e.g., onClick, onChange).
• Handlers are passed as functions, not strings (e.g., onClick={() => alert('Clicked!')}).

Common Event Handlers

• Click Events: Triggered when an element is clicked.
• Input Events: Triggered when input fields change.
• Form Events: Triggered during form submission.

Handling Click Events

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

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

Handling Input Events

function InputHandler() {
    const handleChange = (event) => {
        console.log(event.target.value);
    };

    return <input type="text" onChange={handleChange} />;
}

Handling Form Submission

function FormHandler() {
    const handleSubmit = (event) => {
        event.preventDefault(); // Prevents default form submission behavior
        alert('Form submitted!');
    };

    return (
        <form onSubmit={handleSubmit}>
            <button type="submit">Submit</button>
        </form>
    );
}

2. Event Binding and Passing Data with Event Handlers

Event Binding

In React, event handlers automatically bind to the component instance, so you usually don’t need explicit binding as in class components. However, in class components, you can bind methods in three ways:

State is used to manage data that changes within a component. Unlike props, state is mutable and controlled by the component itself.

Using the useState Hook

1. Import useState

   import { useState } from 'react';
   

2. Initialize state

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

3. Update state

   setCount(count + 1);
   

Example of State

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

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

Updating and Managing State

1. Updating State

   …

Props (short for properties) are used to pass data from a parent component to a child component. Props are read-only, meaning they cannot be modified by the child component receiving them.

Key Features of Props

• Passed as an object to the component.
• Immutable (cannot be changed by the component receiving them).
• Used for dynamic data and reusability.

How to Pass Props Between Components

1. Define props in the parent component

   function Parent() {
   const name = "John";
   return <Child name={name} />;
   }
   

2. Access props in the child component

   …

React components are the building blocks of React applications. They allow developers to break the UI into reusable, independent pieces.

Functional Components vs Class Components

When to Use?

• Use functional components whenever possible; they are the modern and preferred approach. Class components are now rarely used in new projects.

How to Create and Export Components

1. Creating a Functional Component

   …

• JSX (JavaScript XML): A syntax extension for JavaScript used in React to describe the UI structure.
• TSX (TypeScript XML): Similar to JSX but used in React projects with TypeScript for type safety.
• Both allow developers to write code that looks like HTML, but they are not HTML—they are syntactic sugar that gets transpiled into JavaScript.

Key Differences Between JSX/TSX and HTML

JSX/TSX Attributes and How to Use Them

1. Commonly Used Attributes

   …