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:

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

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

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:

npm create vite@latest react-web-app -- --template react
cd react-web-app
npm install
code .

This creates a new React app using Vite.

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

npm run dev

By default, Vite usually runs the app at:

http://localhost:5173/

The terminal will show the exact local URL.

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

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

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

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.

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:

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>
)

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

A simple App.jsx file might look like this:

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

index.css can be used for global styles.

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

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

index.html contains a root element:

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

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.

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

• 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.