React 快速入门

创建 React 应用

创建一个新的 React 应用最简单的方法就是使用 create-react-app 命令行工具，执行如下命令创建一个名为 my-app 的 React 项目，并安装 React 及其依赖：

1npx create-react-app my-app
2cd my-app

React 项目目录结构

React 项目目录结构如下：

1$ tree -L 1 --dirsfirst my-app 
2my-app
3├── node_modules
4├── public
5├── src
6├── package.json
7├── package-lock.json
8└── README.md

其中包含如下目录：

• node_modules：存放 npm 依赖项
• public：存放静态资源，例如图片、index.html
• src：存放 React 组件代码

编写 React 组件

修改 App.js 文件，实现一个最简单的应用：

 1import React from 'react';
 2
 3function App() {
 4    return (
 5        <div>
 6            <h1>Hello, React!</h1>
 7        </div>
 8    );
 9}
10
11export default App;

启动开发服务器

执行如下命令启动开发服务器：

1npm start

这会打开默认浏览器并访问 http://localhost:3000，该页面会展示你所编写的应用程序。任何对代码的更改都会自动编译，并且会出发浏览器的热重载。

构建

执行如下命令创建优化之后的构建版本:

1npm run build

这会在 build 目录中创建一个生产版本的应用程序，并可部署至静态文件服务器中。

部署

有多种部署服务可以用来托管你的应用程序，例如 Netlify、Vercel、GitHub Pages 等。