教程：面向初学者的React编程

最新推荐文章于 2024-08-09 17:25:10 发布

cxu0262

最新推荐文章于 2024-08-09 17:25:10 发布

阅读量182

点赞数

文章标签： ui javascript 运维 ViewUI

获取完整的书

建议零售价$ 39.99

看见

尽管React给桌面带来了极大的帮助，但开始它并不是最简单的过程。它的学习曲线陡峭，充满了许多小障碍和大障碍。

在这里，我从头开始，因此您可以通过构建一个简单的React应用程序来使自己不习惯。您将直面遇到其中一些障碍，而现在您将跳过其中一些障碍。到本文结束时，您不仅可以构建可以自豪地向您的朋友和家人炫耀的东西，而且可以为深入了解React提供的所有功能做好准备。

[了解React？ 不要错过InfoWorld关于React入门的后续步骤的教程。 | 通过InfoWorld的App Dev Report新闻通讯了解编程方面的热门话题。 ]

如果您遇到任何问题，请询问！

如果您有任何疑问，或者您的代码未按预期运行，请随时提出！在https://forum.kirupa.com上的论坛上发帖，并从互联网汇集到的一些最友好和最有知识的人们那里获得帮助！

处理JSX

在开始构建应用程序之前，有一个重要的要点要首先介绍：React与您可能使用过的许多JavaScript库不同。当您仅使用script标签引用为它编写的代码时，它并不会太高兴。这样，React令人讨厌，它与React应用程序的构建方式有关。

如您所知，您的Web应用程序（以及浏览器显示的所有其他内容）由HTML，CSS和JavaScript组成（请参见图1）。

反应图1 — 图1. Web应用程序是用HTML，CSS和JavaScript构建的。

您的Web应用程序是使用React还是其他库（例如Angular ，Knockout或jQuery）编写的，都没有关系。 最终结果必须是HTML，CSS和JavaScript的某种组合；否则，您的浏览器确实不知道该怎么办。

现在，这就是React的特殊性质所在。除了普通的HTML，CSS和JavaScript外，您的大部分React代码都将用JSX编写 。正如我在第一章中提到的那样，JSX是一种语言，它使您可以轻松地混合使用JavaScript和类似HTML的标记来定义用户界面（UI）元素及其功能。听起来很酷（很快就会看到JSX起作用），但是有一个小问题：您的浏览器不知道如何处理JSX。

要使用React构建Web应用程序，您需要一种将JSX转换为浏览器可以理解的普通旧JavaScript的方法（参见图2）。

如果您不这样做，那么您的React应用程序将根本无法工作。那不酷。幸运的是，有两种解决方案：

围绕Node和一些构建工具设置开发环境。 在这种环境中，每次执行构建时，所有JSX都会自动转换为JavaScript，并放置在磁盘上供您参考，就像任何普通JavaScript文件一样。
让您的浏览器在运行时自动将JSX转换为JavaScript。 您可以直接指定JSX，就像使用任何旧JavaScript一样，其余的工作由浏览器负责。

这两种解决方案都有自己的位置，但让我们探究每种解决方案的影响。

第一个解决方案虽然最初有点复杂且耗时，但如今却是现代Web开发的方式 。除了编译（transpiling，更准确）的JSX为JavaScript，这种方法使您可以充分利用的模块，更好的构建工具，并做了一堆其他功能，使构建复杂的网络应用程序有所管理。

第二种解决方案提供了一条快速而直接的途径，您最初可以在其中花费更多的时间来编写代码，而花更少的时间来摆弄开发环境。要使用此解决方案，您要做的就是引用一个脚本文件。这个脚本文件负责在页面加载时将JSX转换为JavaScript，而您的React应用程序将变为现实，而您无需对开发环境做任何特殊的事情。

在React的入门介绍中，我正在使用第二种解决方案。您可能想知道为什么不总是使用第二种解决方案。原因是您的浏览器每次将JSX转换为JavaScript时都会受到性能的影响。在学习如何使用React时，这是完全可以接受的，但是在实际应用中部署应用程序时，这是完全不能接受的。

开始你的反应

首先，您需要一个空白的HTML页面作为起点。因此，创建一个具有以下内容的新HTML文档：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>React! React! React!</title>
</head>

<body>
  <script>

  </script>
</body>

</html>

该页面没有什么有趣或令人兴奋的内容，但让我们通过添加对React库的引用来解决此问题。在标题下方，添加以下两行：

<script src="https://unpkg.com/react@16/umd/react.development.js">
</script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js">
</script>

这两行引入了核心React库以及React需要与DOM一起使用的各种功能。没有它们，您将根本无法构建React应用程序。

现在，您还没有完成。您需要再参考一个库。在这两个script标记的下面，添加以下行：

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

在这里，您将添加对Babel JavaScript编译器的引用。 Babel做了很多很酷的事情，但是我们关心的是将JSX变成JavaScript的能力。

此时，您的HTML页面应如下所示：

<!DOCTYPE html> <html>
<head>
  <meta charset="utf-8">
  <title>React! React! React!</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js">
  </script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js">
  </script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js">
  </script>
</head>

<body>
  <script>

  </script>
</body>

</html>

如果您现在预览页面，您会注意到该页面仍为空白，没有任何可见的进展。没关系。接下来，您将要修复它。

显示你的名字

现在，您将使用React在屏幕上显示您的姓名。您可以通过使用称为render的方法来实现。在正文中的空script标签内，添加以下内容：

ReactDOM.render(
  <h1>Sherlock Holmes</h1>,
   document.body
);

此时，如果这些都没有意义，请不要担心。目的是让某些内容首先显示在屏幕上，然后您便可以了解之后的操作。现在，在页面上预览此script以查看将发生什么之前，您需要将此script块指定为Babel可以发挥其魔力的东西。您可以通过将script标签上的type属性设置为text/babel的值来实现：

<script type="text/babel">
  ReactDOM.render(
    <h1>Sherlock Holmes</h1>,
    document.body
  );
</script>

进行更改后，预览浏览器中的内容。您将看到以大写字母印刷的Sherlock Holmes单词，如图3所示。

恭喜你！您刚刚使用React构建了一个应用程序。

随着应用的发展，这并不是那么令人兴奋。有可能，您的名字甚至没有福尔摩斯。这个应用程序并没有太多用处，但是确实向您介绍了您将在React Universe中使用的最常用方法之一： ReactDOM.render方法。

render方法带有两个参数：

您要输出的类似HTML的元素（又名JSX）。
React将JSX渲染到的DOM中的位置。

这是render方法的样子：

ReactDOM.render(
  <h1>Sherlock Holmes</h1>,
  document.body
);

第一个参数是文本Sherlock Holmes包装在某些h1标签中。 JavaScript内部的这种类似HTML的语法就是JSX的全部含义。稍后，我们将花费更多时间来钻研JSX，但我应该在前面提到这一点： 它看上去真是太疯狂了 。每当我在JavaScript中看到方括号和斜杠时，我的一部分就会死在里面，因为我需要做的所有字符串转义和引号都乱七八糟。但是，使用JSX，您无需执行任何操作。就像在这里一样，您只需按原样放置类似HTML的内容。神奇地（就像涉及龙和激光束的超棒那样），所有这些都起作用。

第二个参数是document.body 。这个论点并没有疯狂或奇怪。它只是指定从JSX转换后的标记最终将驻留在DOM中的位置。在此示例中，当render方法运行时， h1标签（及其内部的所有内容）都放置在文档的body元素中。

现在，这项工作的目的不是为了在屏幕上显示的名称。这是为了显示您的名字。继续并修改您的代码以执行此操作。就我而言， render方法将如下所示：

ReactDOM.render(
  <h1>Batman</h1>,
  document.body
);

好吧，如果我叫蝙蝠侠的话，看起来就像是！无论如何，如果现在预览页面，则会看到您的姓名，而不是Sherlock Holmes。

浏览器仍然很熟悉

多亏了JSX，JavaScript看起来新颖而有光泽，但是您的浏览器看到的结果是漂亮，干净的HTML，CSS和JavaScript。为了亲自了解这一点，让我们对应用程序的行为和外观进行一些更改。

改变目的地

首先，更改JSX的输出位置。使用JavaScript将事物直接放置在body元素中绝不是一个好主意。可能会出错，特别是如果您将React与其他JavaScript库和框架混合使用时。推荐的路径是创建一个单独的元素，将其视为新的根元素。此元素用作您的render方法将使用的目标。为此，请返回HTML并添加id值为container的div元素：

<body>
<div id="container"></div>
  <script type="text/babel">
    ReactDOM.render(
      <h1>Batman</h1>,
      document.body
   );
  </script>
</body>

安全定义container div元素后，修改render方法以使用它而不是document.body 。这是执行此操作的一种方法：

ReactDOM.render(
  <h1>Batman</h1>,
  document.querySelector("#container")
);

另一种选择是在render方法本身之外做一些事情：

vardestination = document.querySelector("#container");

ReactDOM.render(
  <h1>Batman</h1>,
  destination
);

请注意， destination变量存储对container DOM元素的引用。在render方法内部，您只需引用相同的destination变量，而不是将完整的元素查找语法编写为参数本身的一部分。原因很简单：我想向您展示您仍在编写JavaScript，而render只是另一个无聊的老方法，恰好有两个参数。

造型

最后更改的时间，我们称之为一天。现在，这些名称会以浏览器提供的默认h1样式显示。那太可怕了，因此请添加一些CSS来解决此问题。在head标签内，添加带有以下CSS的style块：

<style>
  #container {
    padding: 50px;
    background-color: #EEE;
  }
  #container h1 {
    font-size: 144px;
    font-family: sans-serif;
    color: #0080A8;
  }
</style>

添加完所有内容后，预览页面。请注意，当文本完全依赖浏览器的默认样式时，它的目的似乎比之前的目的多一些（请参见图4）。

之所以可行，是因为在运行所有React代码之后，DOM的body包含您的container元素，其中包含h1标签。 h1标签完全以这种JSX语法在JavaScript内定义，或者CSS完全在render方法之外定义都没关系。 React应用程序的结果仍将由约100％的有机（且无笼！）HTML，CSS和JavaScript组成。如果您可以看到此已转译JavaScript的外观，则外观将类似于以下内容：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>React! React! React!</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js">
</script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js">
</script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js">
</script>
 
 <style>
  #container {
    padding: 50px;
    background-color: #EEE;
  }
  #container h1 {
    font-size: 144px;
    font-family: sans-serif;
    color: #0080A8;
  }
  </style>
</head>

<body>
<div id="container"></div>
  <script type="text/babel"> 
     var destination = document.querySelector("#container");

    ReactDOM.render(React.createElement(
      "h1",
      null,
      "Batman"
    ), destination);
  </script>
</body>

</html>

请注意，几乎看不到任何类似React的代码。（此外，我们每个人在日常对话中都应更频繁地使用nary一词！）

结论

如果这是您第一次构建React应用，那么您已经在这里进行了很多介绍。最大的收获之一是，React与其他库不同，因为它使用一种称为JSX的全新语言来定义视觉效果。当您在render方法中定义h1标签时，您会对此h1 。

JSX的影响超出了如何定义UI元素。它还会改变您整体构建应用程序的方式。由于您的浏览器无法以其本机表示形式理解JSX，因此您需要使用一个中间步骤将JSX转换为JavaScript。一种方法是构建您的应用程序，以生成与JSX源相对应的转译JavaScript输出。另一种方法（您在此处使用的方法）是使用Babel库在浏览器本身上将JSX转换为JavaScript。尽管不建议在现场/生产应用程序中这样做会降低性能，但是当您熟悉React时，您将无法获得便利。

From: https://www.infoworld.com/article/3307858/tutorial-programming-in-react-for-beginners.html