从零开始创建React项目及制作页面
一、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）。
- 验证安装是否成功
node -v npm -v
2. 代码编辑器
- 推荐使用 Visual Studio Code。
二、创建 React 项目
最简单的方式是使用官方工具 Create React App。
1. 创建步骤
- 打开终端或命令行工具，进入你想创建项目的目录
- 运行以下命令
npx create-react-app my-app
- 等待安装完成后，进入项目目录
cd my-app
- 启动开发服务器
npm start- 浏览器会自动打开
http://localhost:3000，显示 React 的默认页面
2. 文件结构说明
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。
示例代码：
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。
示例代码：
.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-domnpm install react-router-dom - 在
src目录下的App.js中配置路由.
示例代码：
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. 启动项目并访问页面
- 启动开发服务器
npm start- 在浏览器中访问新页面
主页：
http://localhost:3000/新页面：
http://localhost:3000/my-page
5. 可选功能
为了更方便地切换页面，可以添加一个导航栏
代码示例：添加导航栏，在src下创建 Navbar.js
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：
将导航栏添加到页面中
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;
代码结构：
src/
├── pages/
│ ├── MyPage.js # 新页面组件
│ └── MyPage.css # 新页面样式
├── App.js # 路由配置
├── Navbar.js # 导航栏组件
├── Home.js # 主页组件（示例）
└── index.js # 应用入口6. 打开页面
至此，可以成功创建属于自己的React页面。