从零开始创建React项目及制作页面

[一、React 介绍](#一、React 介绍)

[1. React 核心特点](#1. React 核心特点)

[2. React 的生态系统](#2. React 的生态系统)

[3. React 的优点](#3. React 的优点)

二、开发环境

[1. Node.js 和 npm](#1. Node.js 和 npm)

[2. 代码编辑器](#2. 代码编辑器)

[二、创建 React 项目](#二、创建 React 项目)

[1. 创建步骤](#1. 创建步骤)

[2. 文件结构说明](#2. 文件结构说明)

三、创建一个React页面

[1. 创建页面组件](#1. 创建页面组件)

[2. 创建样式文件](#2. 创建样式文件)

3.设置路由

[4. 启动项目并访问页面](#4. 启动项目并访问页面)

[5. 可选功能](#5. 可选功能)

[6. 打开页面](#6. 打开页面)

一、React 介绍

React 是一个由 Meta（原Facebook） 开发和维护的 开源JavaScript库，主要用于构建用户界面（User Interface, UI）。它是前端开发中最流行的工具之一，广泛应用于单页应用程序（SPA）和移动端应用开发中。

1. React 核心特点

a. 组件化开发：

React 的 UI 是由一个个小的、可复用的组件构成的，组件可以像积木一样组合在一起，构建出复杂的用户界面。

b. 声明式编程：

React 使用声明式的方式描述 UI。开发者只需要定义组件在不同状态下的样子，React 会自动更新和渲染界面。

c. 虚拟DOM：

React 使用虚拟DOM（Virtual DOM）来提升性能。当状态发生变化时，React 会先更新虚拟DOM，然后计算出最小的变更，再将变更应用到真实DOM中。

d. 单向数据流：

数据在React中是单向流动的（从父组件流向子组件），这使得数据管理更加清晰和可靠。

e. JSX语法：

React 提供了一种类似HTML的语法扩展------JSX，允许开发者在JavaScript中直接编写HTML结构。

2. React 的生态系统

a. React Router：用于处理路由。

b. Redux 或 Context API：用于状态管理。

c. Next.js：基于 React 的服务端渲染（SSR）框架。

d. React Native：用于开发跨平台的移动端应用。

3. React 的优点

a. 高效：通过虚拟DOM优化性能。

b. 灵活：支持与其他库或框架结合使用。

c. 可维护性高：组件化开发使代码结构清晰、易于维护。

d. 社区强大：丰富的社区资源和第三方库支持。

二、开发环境

1. Node.js 和 npm

下载并安装 Node.js（包含 npm）。
验证安装是否成功
bash 复制代码
```
node -v
npm -v
```

2. 代码编辑器

推荐使用 Visual Studio Code。

二、创建 React 项目

最简单的方式是使用官方工具 Create React App。

1. 创建步骤

打开终端或命令行工具，进入你想创建项目的目录
运行以下命令

bash 复制代码

npx create-react-app my-app

bash 复制代码

cd my-app

启动开发服务器

bash 复制代码

npm start

浏览器会自动打开 http://localhost:3000，显示 React 的默认页面

2. 文件结构说明

bash 复制代码

my-app/
├── node_modules/       # 项目依赖目录
├── public/             # 静态资源目录
│   ├── favicon.ico     # 浏览器标签图标
│   ├── index.html      # 主 HTML 文件，React 挂载到此文件
│   ├── logo192.png     # 默认 logo 图片 (192x192)
│   ├── logo512.png     # 默认 logo 图片 (512x512)
│   ├── manifest.json   # PWA 配置文件
│   └── robots.txt      # 搜索引擎爬虫配置
├── src/                # 源代码目录
│   ├── App.css         # App 组件的样式文件
│   ├── App.js          # 主组件文件
│   ├── App.test.js     # App 组件的测试文件
│   ├── index.css       # 全局样式文件
│   ├── index.js        # 应用程序的入口文件
│   ├── logo.svg        # 默认 logo 文件 (SVG 格式)
│   ├── reportWebVitals.js # 性能监控文件
│   └── setupTests.js   # 测试环境的配置文件
├── .gitignore          # Git 忽略规则
├── package-lock.json   # 锁定依赖版本的文件
├── package.json        # 项目配置文件
└── README.md           # 项目说明文档

三、创建一个React页面

以下是详细的教程，包括如何创建页面组件、路由配置以及页面样式等

创建 React 页面步骤

1. 创建页面组件

React 中的页面通常是一个独立的组件。你可以在 src 目录下新建一个文件夹（如 pages），用于存放所有页面组件。

在 src 目录下创建一个 pages 文件夹。
在 pages 文件夹中创建一个新的页面组件文件，例如 MyPage.js。

示例代码：

javascript 复制代码

import React from 'react';
import './MyPage.css'; // 引入样式文件（可选）

const MyPage = () => {
  return (
    <div className="my-page">
      <h1>欢迎来到我的页面</h1>
      <p>这是一个属于自己的页面！</p>
    </div>
  );
};

export default MyPage;

2. 创建样式文件

为页面组件添加样式文件，让页面更美观。

在 pages 文件夹中创建一个样式文件，例如 MyPage.css。

示例代码：

css 复制代码

.my-page {
  text-align: center;
  background-color: #f0f8ff;
  padding: 20px;
  color: #333;
}

.my-page h1 {
  font-size: 2rem;
  color: #007bff;
}

.my-page p {
  font-size: 1.2rem;
  margin-top: 10px;
}

3.设置路由

在 React 中，路由是由 react-router-dom 提供的。你需要安装路由库并配置路由规则。

确保安装了 react-router-dom
bash 复制代码
```
npm install react-router-dom
```
在 src 目录下的 App.js 中配置路由.

示例代码：

javascript 复制代码

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import MyPage from './pages/MyPage'; // 引入新页面
import Home from './Home'; // 假设有一个主页组件

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} /> {/* 主页 */}
        <Route path="/my-page" element={<MyPage />} /> {/* 新页面 */}
      </Routes>
    </Router>
  );
};

export default App;

4. 启动项目并访问页面

启动开发服务器

bash 复制代码

npm start

在浏览器中访问新页面

主页：http://localhost:3000/

新页面：http://localhost:3000/my-page

5. 可选功能

为了更方便地切换页面，可以添加一个导航栏

代码示例：添加导航栏，在src下创建 Navbar.js

javascript 复制代码

import React from 'react';
import { Link } from 'react-router-dom';

const Navbar = () => {
  return (
    <nav style={{ padding: '10px', backgroundColor: '#007bff', color: '#fff' }}>
      <Link to="/" style={{ margin: '0 10px', color: '#fff', textDecoration: 'none' }}>主页</Link>
      <Link to="/my-page" style={{ margin: '0 10px', color: '#fff', textDecoration: 'none' }}>我的页面</Link>
    </nav>
  );
};

export default Navbar;

修改 App.js：

将导航栏添加到页面中

javascript 复制代码

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Navbar from './Navbar'; // 导航栏组件
import MyPage from './pages/MyPage';
import Home from './Home';

const App = () => {
  return (
    <Router>
      <Navbar /> {/* 导航栏 */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/my-page" element={<MyPage />} />
      </Routes>
    </Router>
  );
};

export default App;

代码结构：

javascript 复制代码

src/
├── pages/
│   ├── MyPage.js       # 新页面组件
│   └── MyPage.css      # 新页面样式
├── App.js              # 路由配置
├── Navbar.js           # 导航栏组件
├── Home.js             # 主页组件（示例）
└── index.js            # 应用入口

6. 打开页面

至此，可以成功创建属于自己的React页面。