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

小节：创建第一个React应用

在本节中，我们将学习如何创建我们的第一个React应用。这个过程涉及到安装相关工具、创建项目以及运行应用。让我们一步步来。

1. 准备环境

在开始之前，我们需要确保已经安装以下工具：

• Node.js: React依赖于Node.js，因此你需要先安装它。可以从Node.js官网下载并安装适合你操作系统的版本。

• npm（Node Package Manager）: 安装Node.js后，npm会自动安装。npm是用于安装和管理JS库的工具。

• npx: npx是npm 5.2.0及更高版本自带的，可以用来运行npm包的命令。我们将在创建React应用时使用它。

2. 创建React应用

使用Create React App

Create React App是一个官方支持的脚手架工具，可以快速启动一个新的React项目。打开终端并执行以下命令：

npx create-react-app my-first-react-app

这里的my-first-react-app是你所要创建的应用的名称。执行该命令后，Create React App会自动为你创建一个包含基本结构的React项目。

进入项目目录

项目创建完成后，进入项目目录：

cd my-first-react-app

3. 运行应用

现在，我们已经在本地创建了一个React应用。要启动开发服务器并查看你的应用，可以执行以下命令：

npm start

这会启动开发服务器，并在默认的浏览器中打开http://localhost:3000。你应该会看到一个简单的React应用界面，类似于以下内容：

Edit src/App.js and save to reload.
Learn React

4. 理解项目结构

在创建的应用中，有几个重要的文件和目录：

• node_modules/: 存放项目依赖的目录。

• public/: 存放静态文件，如index.html等。

• src/: 主要的源代码目录。我们将在这里编写React组件。

  • App.js: 默认生成的React组件。

  • index.js: 应用的入口文件。

5. 修改应用

我们可以对src/App.js文件进行简单修改，以定制我们的应用。打开src/App.js文件，用以下代码替换原有内容：

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <p>Welcome to my first React app!</p>
    </div>
  );
}

export default App;

保存文件后，你的浏览器会自动刷新，并显示新的内容：

Hello, World!
Welcome to my first React app!

6. 总结

恭喜你！你已经创建并运行了你的第一个React应用。在本小节中，我们学习了如何：

• 安装Node.js并使用npx创建一个新的React项目。
• 启动开发服务器并访问应用。
• 修改React组件以个性化我们的应用。

接下来，我们将深入研究React的基本概念和组件的开发方式，让我们继续前进！