一文读懂React创建项目，从新手小白到脚手架大神

2023-08-23 09:47:46

用 React 构建应用程序：从零开始的保姆级教程

简介

准备踏上 React 开发之旅了吗？本文将带你从头开始构建一个 React 应用程序，指导你完成每个步骤，并附上实用的演示示例。准备好踏上构建令人惊叹的 web 应用程序的旅程吧！

第一步：安装 Node.js 和 npm

React 项目的基石是 Node.js 和 npm。Node.js 是 JavaScript 的运行时环境，而 npm 是 Node.js 的包管理器。因此，让我们从安装这两个必要组件开始。

访问 Node.js 官方网站，下载适合你操作系统的安装程序。安装完成后，在命令行中运行以下命令安装 npm：

npm install -g npm

第二步：使用 create-react-app 脚手架

create-react-app 是一个由 React 团队推荐的脚手架工具，可以轻松快速地创建新的 React 项目。在命令行中运行以下命令：

npx create-react-app my-app

其中 "my-app" 是你希望创建的项目名称。

第三步：启动和查看 React 项目

创建项目后，导航到项目目录并运行以下命令启动开发服务器：

npm start

这将在浏览器中打开你的 React 应用程序。默认情况下，它将在 http://localhost:3000 上运行。

第四步：编写和运行 React 代码

在项目目录的 src 文件夹中找到 App.js 文件。这是 React 应用程序的主组件。这里有一个示例代码片段：

import React, { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Hello, world!</h1>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
      <p>You clicked {count} times.</p>
    </div>
  );
}

export default App;