当前位置：首页 > article >正文

创建第一个react项目

article 2024/11/17 9:42:56

本教程将指导你如何从零开始创建一个简单的React项目。我们将使用create-react-app这个官方提供的脚手架工具来快速搭建项目。

前提条件

在开始之前，请确保你已经安装了以下软件：

Node.js：最好使用node版本管理器，可以参考这个教程
npm（Node包管理器）：通常随Node.js一起安装。
版本验证：

步骤1：创建新项目

安装完成后，使用create-react-app命令创建一个新的React项目。例如，我们将项目命名为my-first-react-app：

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

这个命令会自动创建一个名为my-first-react-app的新目录，并设置好所有必要的配置文件和依赖。
第一次创建需要安装create-react-app：
在这里插入图片描述
出现下图即创建完成：

步骤2：进入项目目录

进入新创建的项目目录：

cd my-first-react-app

步骤3：启动开发服务器

在项目目录中，运行以下命令以启动开发服务器：

npm start

这会启动一个本地开发服务器，并在默认的Web浏览器中自动打开一个新标签页，地址通常是http://localhost:3000。你应该会看到React的欢迎界面。
在这里插入图片描述

步骤4：修改代码

现在，让我们修改一下默认的代码，看看效果。打开项目目录中的src/App.js文件，将其内容替换为以下代码：

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          欢迎来到我的第一个React项目！
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          学习React
        </a>
      </header>
    </div>
  );
}

export default App;

保存文件后，开发服务器会自动重新加载，你会在浏览器中看到更新后的内容。
在这里插入图片描述