A React component, specifically called the App component, is just a JavaScript function. In contrast to traditional JavaScript functions, it's defined in PascalCase. A component must start with a capital letter, otherwise React won't recognize it as a component. This type of App component is commonly called a function component.

Hot module Replace - A feature of module bundlers (like Webpack, Vite, Parcel) that lets you replace modules in a running app without doing a full reload.

React Fast Refresh A React-specific layer built on top of HMR that ensures components update smoothly while preserving React component state.

Plain HMR doesn’t understand React’s component model. Changing a React component could cause it to remount or reset state unexpectedly.

LISTS IN REACT

In JavaScript, data frequently comes as an array of objects. Next, we'll learn how to render lists in React. Before diving in, let's review one of the most essential data manipulation methods: the array's built-in map() method⁴¹. This method iterates through each item in a list and returns a transformed version of each element:

import * as React from "react";

const list = [
  {
    title: "React",
    url: "<https://reactjs.org/>",
    author: "Jordan Walke",
    num_comments: 3,
    points: 4,
    objectID: 0,
  },
  {
    title: "Redux",
    url: "<https://redux.js.org/>",
    author: "Dan Abramov, Andrew Clark",
    num_comments: 2,
    points: 5,
    objectID: 1,
  },
];
const title = "Hello";
function App() {
  return (
    <>
      <div>Hello {title}</div>
      <label htmlFor="search">Search: </label>
      <input type="text" id="search" />
      <hr />
      <ul>
        {list.map(function (i) {
          return <li>{i.title}</li>;
        })}
      </ul>
    </>
  );
}

export default App;