React Blog Project

This chapter takes you from scratch, using Vite to create a React blog project, and understand JSX syntax and project structure.

Environment Setup

Before starting, make sure Node.js is installed on your computer (v16 or later recommended).

Node.js is a 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 is installed.

If not, go tonodejs.orgDownload the LTS version and install it.

Create a React project

Vite is one of the fastest front-end build tools currently, with native support for React.

In the terminal, go to the directory where you want to store the project, and run:

$ npm create vite@latest blog-app -- --template react

This command tells Vite to 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. Seeing the default Vite + React welcome page means the project started successfully.

If startup reports an error about missing dependencies, try runningnpm installthen run again.

Project directory structure explained

Open the blog-app folder, you will see the following structure:

blog-app/
├── index.html              # 入口 HTML 文件
├── package.json            # 项目配置与依赖列表
├── vite.config.js          # Vite 构建工具配置
├── public/                 # 不经过编译的静态资源
├── src/
│   ├── main.jsx            # JS 入口，将 React 组件挂载到 DOM
│   ├── App.jsx             # 根组件，所有页面的外壳
│   ├── App.css             # App 组件的样式
│   ├── index.css           # 全局样式
│   └── assets/             # 需要编译的静态资源（图片等）

Purpose of core files

index.html— The entry file accessed by the browser.

It contains a<div id="root"></div>, and the React app is mounted onto this div.

src/main.jsx— The startup file of the React app.

It is responsible for finding#rootelement, and thencreateRoothold<App />component to render 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 the <div id="root"></div> in HTML
// Use createRoot to create a React root node, then render <App /> into it
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>
)

src/App.jsx— The root component.

It is the outermost container of all pages, and the JSX it returns will be rendered onto the page.

<React.StrictMode>It is React's Strict Mode, only active in development. It performs additional checks on components (e.g., double rendering) to help you find potential issues. It is automatically ignored in production builds.

What is JSX?

JSXIt is a syntax extension of JavaScript that lets you 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	`<img src="....html">`	`<img src="....html" />`
Embedding JS expressions	Not supported	`<h1>{title}</h1>`
style attribute	`style="color: red"`	`style={{ color: 'red' }}`
Comments	`<!-- comment -->`	`{/* comment */}`
Event binding	`onclick="fn()"`	`onClick={fn}`

Why useclassNameinstead ofclass? Because JSX is essentially JavaScript, andclassis a reserved keyword in JS. Similarly,forchange tohtmlFor。

Example

// JSX is this HTML-like code after return
function Greeting() {
const name = 'EXAMPLE'
const isLoggedIn = true

return (
<div className="greeting">
{/* JSX comment: put any JS expression inside curly braces */}
<h1>Hello, {name}!</h1>
<p>Current time:{new Date().toLocaleDateString()}</p>
{isLoggedIn && <p>Welcome back!</p>}
</div>
)
}

Remember the core rule:In JSX, you can put any JS expression inside curly braces— variables, function calls, ternary operations, and array map all work.

React Components = Functions

The essence of a React function component is:A function that takes props as parameters and returns a piece of JSX。

Example

// Define a component: it is a function that returns JSX
// Component names must start with an uppercase letter
function BlogHeader() {
return (
<header>
<h1>EXAMPLE Blog</h1>
</header>
)
}

// Using a component: write it like an HTML tag, self-closing or paired both work
function App() {
return (
<div>
<BlogHeader />
<main>
<p>Blog content will be displayed here</p>
</main>
</div>
)
}

export default App

Component names muststart with an uppercase letter. Starting with a lowercase letter is treated by React as a normal HTML tag (div, span, etc.), while starting with an uppercase letter is treated as a custom component.

Hands-on: Clear the template and write the blog skeleton

Clear the contents of the default generated App.jsx and App.css, and replace them with the basic blog structure.

Example

// File path: src/App.jsx
import './App.css'

function App() {
return (
<div className="app">
{/* Top navigation bar */}
<header className="navbar">
<h1 className="logo">EXAMPLE Blog</h1>
<nav>
<a href="/">Home</a>
<a href="#">About</a>
</nav>
</header>

{/* Main content area */}
<main className="container">
<p>Blog content will be displayed here</p>
</main>

{/* Footer */}
<footer className="footer">
<p>© 2024 EXAMPLE Blog. Powered by React.</p>
</footer>
</div>
)
}

export default App

Example

/* File path: src/App.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #f5f5f5;
color: #333;
}

/* Navigation bar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 40px;
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.logo {
font-size: 24px;
color: #61dafb;
}

.navbar nav a {
margin-left: 20px;
text-decoration: none;
color: #333;
}

/* Main content area */
.container {
max-width: 960px;
margin: 40px auto;
padding: 0 20px;
}

/* Footer */
.footer {
text-align: center;
padding: 20px;
color: #999;
border-top: 1px solid #eee;
}

After saving, the browser will automatically refresh, and you will see a clean blog skeleton: top navigation bar + middle content area + bottom footer.

Chapter Summary

In this chapter, you accomplished three things: created a React project with Vite, understood the key differences between JSX and HTML, and wrote the basic JSX skeleton of the blog.

Key takeaways: A React component is a function that returns JSX, and in JSX you can embed any JS expression inside curly braces.

Other Extensions