返回

React（1）启动配置：开箱即用！

前端

React，作为前端开发框架中的一颗冉冉升起的新星，以其组件化、高性能、丰富的组件生态圈等优势，迅速俘获了众多开发者的芳心。如果您也对React感兴趣，准备开始您的React开发之旅，那么，让我们从配置React启动环境开始吧！

前期准备

在正式开始之前，我们需要先确保您的计算机已经安装了以下环境：

  • Node.js（推荐版本：16.13.0及以上）
  • npm（推荐版本：8.1.0及以上）
  • 代码编辑器或IDE（推荐：Visual Studio Code、Sublime Text、Atom等）

创建React项目

使用Create-React-App工具

Create-React-App（CRA）是Facebook官方推出的React脚手架工具，它可以帮助我们快速创建一个React项目，并自动配置好所有必要的依赖和配置。

首先，我们需要在终端中安装Create-React-App：

npm install -g create-react-app

安装完成后，我们就可以使用Create-React-App来创建一个新的React项目了。在终端中输入以下命令：

create-react-app my-react-app

其中，my-react-app是您想要创建的项目的名称。

Create-React-App会自动下载并安装所有必要的依赖，并创建一个名为my-react-app的新文件夹。

手动创建React项目

如果您更喜欢手动创建React项目，也可以按照以下步骤进行：

  1. 在终端中创建一个新的目录，并进入该目录。
  2. 在目录中初始化一个新的npm项目：
npm init -y
  1. 安装React和必要的依赖：
npm install react react-dom
  1. 在src目录中创建一个名为index.js的文件，并添加以下内容：
import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
  1. 在public目录中创建一个名为index.html的文件，并添加以下内容：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    
  </head>
  <body>
    <div id="root"></div>
    <script src="src/index.js"></script>
  </body>
</html>

启动React项目

项目创建完成后，我们就可以启动项目了。

使用Create-React-App工具

如果您使用Create-React-App创建了项目，那么您可以在终端中输入以下命令来启动项目：

npm start

Create-React-App会自动启动一个开发服务器，您可以在浏览器中访问http://localhost:3000来查看项目。

手动启动React项目

如果您手动创建了项目，那么您需要先安装webpack来打包项目。在终端中输入以下命令：

npm install webpack webpack-cli --save-dev

安装完成后，您可以在终端中输入以下命令来打包项目：

webpack

打包完成后，您可以在终端中输入以下命令来启动项目：

webpack-dev-server --open

webpack-dev-server会自动启动一个开发服务器，您可以在浏览器中访问http://localhost:8080来查看项目。

总结

以上就是如何配置React启动环境的步骤。希望这篇教程能够帮助您快速入门React开发。