This chapter will guide you through creating a React blog project from scratch using Vite, and help you understand JSX syntax and project structure.
* * *
## Environment Setup
Before starting, make sure Node.js is installed on your computer (v16 or higher recommended).
Node.js is the JavaScript runtime environment, and npm is its built-in package manager.
### Check if Node.js is Installed
$ node -v
v20.10.0
If a version number is displayed, it means it's installed.
If not, go to [nodejs.org](https://nodejs.org/) to download and install the LTS version.
* * *
## Create React Project
Vite is one of the fastest frontend build tools available and has native support for React.
In the terminal, navigate to the directory where you want to store the project and run:
$ npm create vite@latest blog-app -- --template react
This command tells Vite: create a project named blog-app using the React template.
Enter the project directory, install dependencies, and start the development server:
$ cd blog-app
$ npm install
$ npm run dev
The browser will automatically open http://localhost:5173. If you see the default Vite + React welcome page, the project has started successfully.
> If you get an error about missing dependencies when starting, try running `npm install` again and then restart.
* * *
## Project Directory Structure Explained
Open the blog-app folder and you'll see the following structure:
blog-app/
├── index.html # Entry HTML file
├── package.json # Project configuration and dependency list
├── vite.config.js # Vite build tool configuration
├── public/ # Static assets that are not compiled
├── src/
│ ├── main.jsx # JS entry point, mounts React component to DOM
│ ├── App.jsx # Root component, shell for all pages
│ ├── App.css # App component styles
│ ├── index.css # Global styles
│ └── assets/ # Static assets that need to be compiled (images, etc.)
### Core File Functions
index.html — The entry file that the browser accesses.
It contains a `
`, and the React application is mounted to this div.
src/main.jsx — The startup file for the React application.
It finds the `#root` element and uses `createRoot` to render the `
` component into it.
## Example
// File path: src/main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import'./index.css'
// Find
in HTML
// Create a React root node with createRoot, then render
into it
ReactDOM.createRoot(document.getElementById('root')).render(
)
src/App.jsx — The root component.
It is the outermost container for all pages, and the JSX it returns will be rendered to the page.
> `
` is React's strict mode, which only takes effect in development environment. It performs additional checks on components (such as duplicate renders) to help you discover potential issues. It is automatically ignored during production builds.
* * *
## What is JSX?
JSX is a syntax extension for JavaScript that allows you to write HTML-like code in JS.
A React component is essentially a function that returns JSX.
### Key Differences Between JSX and HTML
| Scenario | HTML | JSX |
| --- | --- | --- |
| class attribute | `class="container"` | `className="container"` |
| Self-closing tags | `
` | `` |
| Embed JS expressions | Not supported | `{title}
` |
| style attribute | `style="color: red"` | `style={{ color: 'red' }}` |
| Comments | `` | `{/* comment */}` |
| Event binding | `onclick="fn()"` | `onClick={fn}` |
> Why use `className` instead of `class`? Because JSX is essentially JavaScript, and `class` is a reserved keyword in JS. Similarly, `for` becomes `htmlFor`.
## Example
// JSX is the HTML-like code after return
function Greeting(){
const name ='TUTORIAL'
const isLoggedIn =true
return(
{/* JSX comment: put any JS expression inside curly braces */}
Hello,{name}!
Current time: {new Date().toLocaleDateString()}
{isLoggedIn &&
Welcome back!
}
Blog content will be displayed here
)
}
export default App
> Component names must start with a capital letter. Components starting with lowercase letters will be treated as regular HTML tags (div
YouTip