2024年6月9日发(作者：)

React入门动手编写第一个App

React是由Facebook开发的一款用于构建用户界面的JavaScript库。

它以组件化的方式构建界面，使得开发者可以轻松地将复杂的应用拆

分成小而可复用的部件。

本文将引导您入门React，并通过编写第一个React应用来学习

React的基本用法和开发流程。

## 准备工作

在开始编写第一个React应用之前，需要先安装一些必要的工具和

环境。以下是所需的准备工作：

1. ：React是基于环境开发的，因此需要在您的计算

机上安装。您可以在官方网站上下载并安装最新版本

的。

2. 包管理工具：安装完成后，会自带NPM（Node Package

Manager）包管理工具。NPM用于安装和管理React以及其他相关的包。

3. 代码编辑器：您可以选择安装任何适合您的代码编辑器，例如

Visual Studio Code、Sublime Text等。

完成了上述的准备工作后，我们可以开始编写第一个React应用了。

## 创建新的React应用

1. 打开您选择的代码编辑器，并创建一个新的文件夹用于存放

React应用的代码。

2. 在终端（命令提示符）中，进入到新创建的文件夹，并执行以下

命令来创建一个新的React应用：

```

npx create-react-app my-app

```

此命令将使用create-react-app工具创建一个名为my-app的新React

应用。

3. 完成应用的创建后，进入my-app文件夹，并执行以下命令来启

动React开发服务器：

```

cd my-app

npm start

```

## 编写第一个React组件

1. 打开代码编辑器，进入到my-app/src文件夹，并创建一个名为

的文件。

2. 在中，编写如下代码来创建第一个React组件：

```javascript

import React from 'react';

function App() {

return (

);

}

export default App;

```

上述代码中，我们使用了React的函数组件（Functional Component）

来创建一个名为App的组件。组件中的代码以JSX语法编写，JSX是

一种类似HTML的语法，用于描述组件的界面结构。

3. 保存并关闭文件。

## 渲染React组件

1. 打开my-app/src/文件，并编写如下代码来渲染App组件：

```javascript

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

(

,

mentById('root')

);

```

上述代码中，我们使用ReactDOM的render方法将App组件渲染到

HTML页面中的一个具有id为"root"的元素内。

2. 保存并关闭文件。

## 运行React应用

1. 返回终端，在my-app文件夹内执行`npm start`命令来启动React

开发服务器。

2. 打开您的浏览器，并访问localhost:3000，您将看到一个显

示"Hello, React!"和"This is my first React app."的页面。

恭喜！您已经成功地编写并运行了第一个React应用。

## 小结

本文介绍了如何通过React快速入门，并编写了第一个React应用。

我们学习了React的基本用法、组件化开发和应用的渲染过程。希望这

篇文章能帮助您快速上手React，并为您以后学习更复杂的React应用

打下坚实的基础。

React官方文档是学习React的最佳资源，如果您希望深入学习

React，推荐阅读官方文档以及相关的教程和示例。

祝您在React的学习和开发之路上取得成功！