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

目录

一、React 介绍

1. React 核心特点

2. React 的生态系统

3. React 的优点

二、开发环境

1. Node.js 和 npm

2. 代码编辑器

 二、创建 React 项目

1. 创建步骤

2. 文件结构说明

三、创建一个React页面

1. 创建页面组件

2. 创建样式文件

3.设置路由

4. 启动项目并访问页面

5. 可选功能

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）。
• 验证安装是否成功

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

  npm 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页面。