react基本安装与测试示例

以下是React基本安装和测试示例的完整攻略：

安装Node.js和npm

首先，你需要在你的计算机上安装Node.js和npm（包管理器），如果你已经安装过了，可以跳过这一步骤。

如果你还没有安装Node.js和npm，请参考以下步骤：

1. 访问Node.js官网：https://nodejs.org/en/
2. 下载LTS版本的Node.js，根据你的操作系统选择适当的安装包，然后运行安装程序来安装Node.js。
3. 安装完成后，打开CMD（Windows）或终端（Mac/Linux），输入以下命令验证安装成功：

node -v
npm -v

如果显示了Node.js和npm的版本号，则安装成功。

使用create-react-app创建React应用程序

接下来，我们使用create-react-app命令行工具来创建React应用程序。

1. 打开CMD（Windows）或终端（Mac/Linux），输入以下命令来安装create-react-app：

npm install -g create-react-app

1. 安装完成后，进入你要创建应用程序的文件夹，输入以下命令来创建React应用程序：

create-react-app my-app

这里以名称为my-app的应用程序为例。

1. 安装完成后，在CMD或终端中切换到应用程序文件夹：

cd my-app

运行React应用程序

通过create-react-app创建的应用程序已经包含了React所需的所有依赖包和一些示例代码。现在，我们可以运行该程序并查看示例UI。

1. 在CMD或终端中输入以下命令来启动应用程序：

npm start

1. 打开浏览器并访问以下地址：

http://localhost:3000/

现在，你应该能够看到React应用程序中运行的示例UI。

示例：

示例1：更改示例UI

1. 在my-app/src文件夹中找到App.js文件。
2. 打开App.js文件，你会看到其中包含了示例UI的代码。
3. 在文件中随便修改一些文字或样式，然后保存并刷新浏览器。你会发现修改后的UI已经在页面上展示出来了。

示例2：使用组件库添加UI元素

1. 在CMD或终端中进入my-app的根文件夹，并输入以下命令：

npm install antd

该命令将会安装一个UI组件库antd。
2. 在App.js文件中引入antd：

import { Button } from 'antd';

1. 在App组件的render方法中添加一个Button组件：

render() {
  return (
    <div className="App">
      <Button type="primary">Click me!</Button>
    </div>
  );
}

1. 保存并刷新浏览器，你将看到一个带有“Click me!”按钮的页面。

到此为止，你已经成功地安装了React和Node.js，并创建了一个React应用程序。同时，你还学习了如何更改示例UI并添加UI元素。