ReactJS - 安装：初学者指南

你好，未来的React开发者们！我很高兴能成为你进入ReactJS世界的向导。作为一名教授计算机科学多年的教师，我可以向你保证，学习React就像学习骑自行车——一开始可能看起来很困难，但一旦你掌握了要领，你很快就能轻松驾驭！

ReactJS - Installation

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工具链。

记住，学习React是一个旅程。如果一切不会立即明了，请不要担心。继续练习，继续构建，最重要的是，保持乐趣！

在我们下一次的课程中，我们将更深入地探讨React组件，并开始构建更复杂的应用程序。在此之前，祝你编程愉快！

Credits: Image by storyset