React学习教程，从入门到精通， ReactJS - 安装：初学者指南(3）
ReactJS - 安装：初学者指南
ReactJS是什么？
在我们开始安装之前，让我们快速了解一下ReactJS是什么。React是一个流行的JavaScript库，用于构建用户界面，尤其是单页应用程序。它主要是关于创建可重用的UI组件，这些组件管理自己的状态，使得构建复杂的界面变得更加容易。
现在，让我们动手开始设置React！
工具链：你的React工具箱
在React开发中，我们使用一套工具，称为“工具链”。把它想象成你的React瑞士军刀——它包含了构建出色Web应用程序所需的一切。
工具链中的必备工具
| 工具 | 用途 |
|---|---|
| Node.js | JavaScript运行时 |
| npm（Node包管理器） | JavaScript的包管理器 |
| Babel | JavaScript编译器 |
| Webpack | 模块打包器 |
| ESLint | 代码检查器 |
| Jest | 测试框架 |
如果这些术语现在听起来像外星语言，别担心。我们会在接下来的内容中一一探索！
静态服务器：你的本地游乐场
在我们跳入复杂的设置之前，让我们从简单开始——一个静态服务器。这将允许我们在本地计算机上服务我们的React应用程序。
设置一个简单的静态服务器
- 首先，确保你安装了Node.js。你可以从nodejs.org下载。
- 打开你的终端或命令提示符，并运行：
npm install -g serve
这个命令会在你的系统上全局安装’serve’包。
- 现在，为你的项目创建一个新的目录：
mkdir my-react-app
cd my-react-app
- 创建一个名为
index.html的简单HTML文件：
<!DOCTYPE html>
<html>
<head>
<title>我的第一个React应用</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, React!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
- 现在，运行serve命令：
serve
太棒了！你应该会看到一个消息，告诉你应用程序正在哪里服务。通常，它是http://localhost:5000。在浏览器中打开这个URL，你将看到你的第一个React应用程序！
Babel编译器：翻译未来
记得我们工具链中的Babel吗？现在该见见这个神奇的翻译器了！Babel是一个JavaScript编译器，它允许你使用最新的JavaScript特性，即使浏览器还不支持它们。
我们为什么需要Babel？
想象你正在给一个说不同语言的朋友写信。Babel就像一个可以立即将你的信翻译成朋友语言的翻译员。在React世界中，Babel将现代JavaScript和JSX（React的语法扩展）翻译成所有浏览器都能理解的JavaScript版本。
在我们的项目中使用Babel
我们实际上已经在上面的简单HTML文件中包含了Babel。让我们分解那一部分：
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
// 你的React代码在这里
</script>
第一行包含了Babel独立库。第二行告诉Babel编译script标签内的代码。
Create React App工具链：一站式解决方案
现在我们已经浅尝辄止地接触了React，让我们使用Create React App工具链深入探索。这是一个舒适、功能丰富的环境，适合学习和构建新的React单页应用程序。
设置Create React App
- 打开你的终端并运行：
npx create-react-app my-app
- 完成后，导航到你的新应用：
cd my-app
- 启动开发服务器：
npm start
你的新React应用程序应该会自动在浏览器中打开，通常是http://localhost:3000。
内部有什么？
Create React App设置了一个完全配置好的开发环境。让我们看看我们得到了什么：
| 特性 | 描述 |
|---|---|
| React | React核心库 |
| webpack | 打包你的代码和资源 |
| Babel | 编译现代JavaScript |
| ESLint | 检查你的代码错误 |
| Jest | 允许你编写测试 |
| 热重载 | 在浏览器中立即看到你的更改 |
你的第一个组件
让我们创建一个简单的React组件。打开src/App.js并替换其内容为：
import React from 'react';function App() {
return (
<div>
<h1>欢迎来到我的React应用</h1>
<p>这是我的第一个组件！</p>
</div>
);
}export default App;
保存文件并检查你的浏览器。你应该能看到你的新组件被渲染！
结论
恭喜你！你已经迈出了进入React开发激动世界的第一步。我们涵盖了大量的内容——从设置简单的静态服务器到使用强大的Create React App工具链。