====== React.js ======

===== Introduction =====

Think of React as a way to build a webpage out of **reusable UI pieces** called **components**.

Instead of writing one big HTML file, you write small JavaScript functions that return UI.

A React app is usually a tree of components:

  * App
    * Header
    * Sidebar
    * ProductList
      * ProductCard
      * ProductCard
      * ProductCard
    * Footer

Each component owns one piece of the interface.

For example:

<code javascript>
function Header() {
  return <h1>My Website</h1>
}
</code>

That looks like HTML, but it's actually **JSX**, which is React's markup-like syntax inside JavaScript.

===== Creating a new React app =====

In the terminal, ''cd'' into the location where you want to create the new React app.

Type the following, replacing ''react-web-app'' with the name of your new app:

<code bash>
npm create vite@latest react-web-app -- --template react
cd react-web-app
npm install
code .
</code>

This creates a new React app using Vite.

<WRAP info>
Create React App used to be a common way to start React projects, but it is now deprecated for new apps. For simple React projects, Vite is a better modern default.
</WRAP>

===== Starting the localhost =====

In VS Code's built-in terminal, enter:

<code bash>
npm run dev
</code>

By default, Vite usually runs the app at:

<code>
http://localhost:5173/
</code>

The terminal will show the exact local URL.

===== Understanding index.html =====

''index.html'' is the HTML file that loads in the browser.

In a React app, this file usually contains a root element like this:

<code html>
<div id="root"></div>
</code>

React uses this element as the place where the app gets rendered.

Unlike a static website, you usually do not manually add all of your JavaScript files to ''index.html''. The build tool, in this case Vite, handles loading the JavaScript entry file.

===== Understanding the main React entry file =====

Vite creates a file named ''main.jsx'' inside the ''/src'' directory.

This file is the entry point for the React app.

A simple version looks like this:

<code javascript>
import React from 'react'
import { createRoot } from 'react-dom/client'

import './index.css'
import App from './App'

createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)
</code>

===== Setting up App.jsx =====

React components usually use capitalized names. That is why ''App'' starts with a capital "A".

A simple ''App.jsx'' file might look like this:

<code javascript>
function App() {
  return (
    <div className="container">
      <h1>Hello React</h1>
    </div>
  )
}

export default App
</code>

===== Setting up index.css =====

''index.css'' can be used for global styles.

It should be placed inside the ''/src'' directory and imported into ''main.jsx''.

===== Understanding our file structure so far =====

Right now, a simple Vite React app has a file structure similar to this:

  * ''/react-web-app''
    * ''/node_modules''
      * //...a whole lot of node modules//
    * ''/public''
      * //static assets can go here//
    * ''/src''
      * ''/assets''
      * ''/components'' //(Optional folder for components we create)//
      * ''App.jsx'' //(Contains the main app component)//
      * ''index.css'' //(Global styles)//
      * ''main.jsx'' //(The React entry file)//
    * ''.gitignore''
    * ''eslint.config.js''
    * ''index.html'' //(The page that gets loaded into the browser)//
    * ''package-lock.json''
    * ''package.json''
    * ''README.md''
    * ''vite.config.js''

===== How it works (basically) =====

''index.html'' contains a root element:

<code html>
<div id="root"></div>
</code>

''main.jsx'' finds that root element and renders the React app into it.

''App.jsx'' contains the main app component.

Other components can be created inside ''/src/components'' and imported into ''App.jsx'' or into other components.

==== Basic flow: ====

<code>
components -> App.jsx -> main.jsx -> #root in index.html
</code>

===== Common beginner notes =====

  * React apps are built from components.
  * Component names should start with capital letters.
  * JSX looks like HTML, but it is JavaScript syntax used by React.
  * Use ''className'' instead of ''class'' in JSX.
  * Use ''npm run dev'' to start a Vite development server.
  * Use ''Ctrl + C'' in the terminal to stop the development server.