一步步搭建Hello React项目：掌握脚手架创建React应用

2023-10-30 08:38:32

搭建React开发环境

安装Node.js
- Node.js是一个开源的JavaScript运行时环境，React需要Node.js来运行，因此我们需要先安装Node.js。
- 您可以在Node.js官网下载最新的稳定版本，并按照安装说明进行安装。
安装脚手架create-react-app
- 脚手架create-react-app是一个用于创建React项目的工具，它可以帮助您快速搭建React项目的基础环境。
- 您可以在终端中运行以下命令来安装脚手架：

npm install -g create-react-app

创建React项目
- 现在，您可以在终端中使用create-react-app脚手架来创建一个新的React项目。
- 在终端中运行以下命令：

create-react-app my-react-app

* 这将创建一个名为my-react-app的新文件夹，其中包含了React项目的基础文件和目录结构。

启动项目
- 进入my-react-app文件夹，然后运行以下命令来启动项目：

npm start

* 这将启动一个开发服务器，您可以在浏览器中访问http://localhost:3000来查看项目。

构建Hello React项目

编辑App.js文件
- 在my-react-app文件夹中，找到src文件夹，然后找到App.js文件。
- 打开App.js文件，找到render方法，将原有的代码替换为以下代码：

import React from "react";

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

export default App;