Next学习手册（二）- React

Next学习手册（二）- React

九月 25, 2023

使用unpkg

当我们使用React进行开发时，首要做的应该是先引用这个库。就像Python开发要先pip导入包一样，这个同理。

我们想在项目中引用React这个库时，无外乎有两种方式，一种是直接下载下React库的文件来，部署在本地，然后引用本地文件。另一种就是通过<script src=url...的方式，从网络中的资源进行引用。

而在网络中引用的方式很多，其中unpkg就是其中一种。

什么是unpkg?

官方：unpkg is a fast, global content delivery network for everything on npm. Use it to quickly and easily load any file from any package using a URL like:

  • 翻译：unpkg是一个快速的全球内容交付网络，适用于npm上的所有内容。使用它可以使用以下URL快速轻松地从任何包加载任何文件

格式：

1
unpkg.com/:package@:version/:file

使用

我们将使用unpkg导入 react 和 react-dom 两个库

  • react ：React的核心库。
  • react-dom ：提供了特定于dom的方法，以此能够将react与dom一起使用。
1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- index.html -->
<html>
  <body>
    <div id="app"></div>
	<! -- 使用unpkg -->
    <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 type="text/javascript">
      const app = document.getElementById('app');
    </script>
  </body>
</html>

直接使用react-DOM中的ReactDOM.render()方法来告诉react在id=app元素中呈现<h1>，而不必使用纯JavaScript操作DOM。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- index.html -->
<html>
  <body>
    <div id="app"></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 type="text/javascript">
      const app = document.getElementById('app');
      ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app);
    </script>
  </body>
</html>

按理说这么写没错对吧？

运行一下，好，一片空白！

按下 F12 我们看到一个孤零零的报错。

这是一个语法错误，原因很简单，官方的解释一目了然。

  • This is because <h1>...</h1> is not valid Javascript. This piece of code is JSX.
    • 翻译： 这是因为 <h1>...</h1>不是有效的Javascript。这段代码是JSX。

什么是JSX?

  • 官方：JSX is a syntax extension for JavaScript that allows you to describe your UI in a familiar HTML-like syntax. The nice thing about JSX is that apart from following three JSX rules, you don’t need to learn any new symbols or syntax outside of HTML and JavaScript.

    • 翻译： JSX是JavaScript的语法扩展，允许用熟悉的类似HTML的语法描述UI。JSX的好处在于，除了遵循三条JSX规则外，不需要学习HTML和JavaScript之外的任何新符号或语法。

  • 官方：Note that browsers don’t understand JSX out of the box, so you’ll need a JavaScript compiler, such as a Babel, to transform your JSX code into regular JavaScript.

    • 请注意，浏览器无法开箱即用地理解JSX，因此您需要一个JavaScript编译器，如Babel，来将您的JSX代码转换为常规JavaScript。

也就是说，浏览器并不理解这个名为 JSX的代码。但只要搭配个解释器，JSX代码也可以被转译为常规JavaScript代码，就可以运行了。

将Babel添加进项目

将这个 script写入 index.html文件中即可。

1
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

同时，把<scritp>标签中的类型改了type=text/jsx，以此通知Babel需要转换哪些代码。

代码总览：

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
  <body>
    <div id="app"></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>
    <!-- Babel Script -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/jsx">
      const app = document.getElementById('app');
      ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app);
    </script>
  </body>
</html>

那么我们 run 一下！

毫无问题！

将React的脚本代码和普通的纯JavaScript进行对比，可以看出简洁了许多。

1
2
3
4
<script type="text/jsx">
  const app = document.getElementById("app")
  ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app)
</script>
1
2
3
4
5
6
7
<script type="text/javascript">
  const app = document.getElementById('app');
  const header = document.createElement('h1');
  const headerContent = document.createTextNode('Develop. Preview. Ship. 🚀');
  header.appendChild(headerContent);
  app.appendChild(header);
</script>

官方：And this is exactly what React does, it’s a library that contains reusable snippets of code that perform tasks on your behalf - in this case, updating the UI.

- 翻译：这正是React所做的，它是一个库，包含可重复使用的代码片段，可以代表您执行任务——在本例中，更新UI。

官方：Note: You don’t need to know exactly how React updates the UI to start using it, but if you’d like to learn more, take a look at the UI trees and the react-dom/server sections in the React Documentation.

  • 注意：您不需要确切知道React是如何更新UI来开始使用它的，但如果您想了解更多信息，请查看React文档中的UI树和React dom/server部分。
  1. 1. 使用unpkg
    1. 1.1. 什么是unpkg?
    2. 1.2. 使用
  2. 2. 什么是JSX?
  3. 3. 将Babel添加进项目