Table of Contents

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:

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.

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: 

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

This creates a new React app using Vite.

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.

Starting the localhost

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.

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: 

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

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: 

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

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: 

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

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:

How it works (basically)

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.

Basic flow:

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

Common beginner notes