返回

React 项目创建指南：快速上手，一步搞定！

前端

前言

创建 React 项目，不再像创建 Vue 项目那样麻烦。作为 React 的新手，可能还没接触到所有创建项目的方式，但不用担心，我会不断补充和更新指南。现在，让我们直接开始创建项目吧！

一、创建项目

1. 创建项目命令

打开命令行工具（如 Windows PowerShell 或 macOS 终端），转到您要创建项目的位置。然后，运行以下命令：

npx create-react-app my-app

其中，my-app 是您的项目名称。

2. 等待项目创建完成

创建项目需要几分钟时间。在此期间，您会看到以下输出：

Creating a new React app in /Users/username/my-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...

Success! Created my-app at /Users/username/my-app

3. 进入项目目录

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

cd my-app

二、启动项目

1. 启动项目命令

现在，您可以启动项目了。在项目目录中，运行以下命令：

npm start

2. 等待项目启动完成

项目启动需要几秒钟时间。在此期间，您会看到以下输出：

Starting the development server...

Compiled successfully!

You can now view my-app in the browser.

Local:            http://localhost:3000
On Your Network:  http://192.168.0.100:3000

Note that the development build is not optimized.
To create a production build, use `npm run build`.

3. 打开浏览器

现在，您可以打开浏览器并访问以下地址：

http://localhost:3000

您应该会看到以下页面：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

这表明您的项目已经成功启动！

三、创建第一个组件

1. 创建组件命令

现在，让我们创建一个简单的组件。在 src 文件夹中，创建一个名为 App.js 的文件。然后，在该文件中输入以下代码：

import React from "react";

function App() {
  return <h1>Hello, World!</h1>;
}

export default App;

2. 导入组件

接下来，在 src/index.js 文件中，导入您刚刚创建的组件。在该文件中，找到以下代码：

import ReactDOM from "react-dom";

并在其下面添加以下代码：

import App from "./App";

3. 渲染组件

最后，在 src/index.js 文件中，将 App 组件渲染到 DOM 中。找到以下代码：

ReactDOM.render(<App />, document.getElementById("root"));

现在，您的第一个 React 组件已经创建并渲染好了！

结语

恭喜您！您已经成功创建了一个 React 项目并运行了您的第一个 React 组件。希望本指南对您有所帮助。如果您有任何问题，请随时提出。