22 从零到上手学习 React 框架教程

小节：搭建项目骨架与基础组件

1. 环境准备

在开始使用 React 之前，我们需要确保开发环境已准备好。以下是你需要的工具：

• Node.js: React 需要 Node.js 环境。可以在 Node.js 官方网站 下载并安装最新版本。
• npm 或 yarn: Node.js 附带了 npm（Node Package Manager），也可以选择安装 yarn 作为包管理工具。

2. 创建 React 应用

使用 create-react-app 工具可以快速搭建 React 项目。打开终端，执行以下命令：

npx create-react-app my-app

其中，my-app 是你想要创建的项目名称。

3. 运行应用

进入项目目录并启动开发服务器：

cd my-app
npm start

此时，浏览器将自动打开 http://localhost:3000，你可以看到默认的 React 欢迎页面。

4. 项目结构

React 项目的基本结构如下：

my-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── favicon.ico
└── src/
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    └── logo.svg

关键目录解释：

• public/: 存放静态文件，如 index.html。
• src/: 存放 React 组件和样式文件。

5. 创建基础组件

在 src 目录下创建一个新的文件夹 components，用来存放你的组件。

mkdir src/components

然后，在 components 文件夹中创建一个基础组件 Hello.js：

// src/components/Hello.js
import React from 'react';

const Hello = () => {
    return <h1>Hello, React!</h1>;
};

export default Hello;

6. 使用基础组件

接下来，我们需要在 App.js 中导入并使用刚刚创建的 Hello 组件。

// src/App.js
import React from 'react';
import './App.css';
import Hello from './components/Hello';

const App = () => {
    return (
        <div className="App">
            <Hello />
        </div>
    );
};

export default App;

7. 运行并查看结果

回到开发服务器，如果之前的服务还在运行，页面会自动更新并显示：

Hello, React!

8. 小结

在这一小节中，我们完成了以下几个步骤：

• 安装并创建了一个新的 React 应用。
• 理解了项目目录结构。
• 创建了一个简单的基础组件。
• 在 App 组件中使用了基础组件。

通过这些步骤，你已成功搭建了一个 React 应用的基本骨架，并了解了如何创建和使用组件，接下来可以继续深入学习 React 的其它特性，如状态管理、路由、事件处理等。