初学者学习 React

我对 React 一无所知，只知道它是一个 JavaScript 框架，而且我猜它专注于响应式编程。我对 JavaScript 也知之甚少——我以前经常做 Web 开发，但大约在 2012 年就停止了。但我想重建我的网站，而且现在大家都在使用 JavaScript 框架，所以我觉得这个项目很适合积累经验。我会持续记录我的尝试和磨难。希望这篇文章能为和我处境相同的新手提供有用的资源，也希望它能为经验丰富的开发者提供宝贵的资源——你将能够看到初学者在 React 方面遇到的困难或误解。

首映礼

我在谷歌上搜索“intro to react”，大概能得到 2700 万个结果。前几个看起来挺相关的：

React 是一个声明式、高效且灵活的 JavaScript 库，用于构建用户界面。它允许你使用一些小型且独立的代码片段（称为“组件”）来构建复杂的 UI。 （来源）

好吧，这似乎很有道理。我们去看看吧——毕竟这个网站叫reactjs.org ……他们肯定知道自己在做什么。

好的，这是一个简洁漂亮的教程。它看起来不长，而且格式很好（有语法高亮的代码片段等等）。我想我应该可以慢慢看完，不会觉得无聊。开始吧！

ReactJS.org 教程第一印象

很快我就发现了这个“秘诀”：

“……我更喜欢‘边做边学’吗？”我不知道。一方面我觉得我应该直接跳到“分步指南”，因为我从 URL 上就能看出它指向一个“Hello, World!”的示例。但我又觉得我应该继续用这个，因为另一个我可能会觉得无聊。现在就先这样吧。

再写几行之后，我得到了...

“我要看看最终结果！”我对着虚空大喊，点击了链接：

哦，这是“代码笔”。我以前见过别人用这个，但我从来没用过。以后我做网页开发的时候，或许能多见识一下这个？代码看起来挺有意思的：

function Square(props) {
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}

返回 HTML 标签的函数？带有程序化确定的参数和内容？这绝对是我从未见过的。这看起来真的很有趣。我现在对构建这个东西非常感兴趣。我们回到教程页面学习如何构建它吧。

我觉得第一段我理解得还行，但第二段就差强人意了。const语句显然引用的是常量，对吧？我知道类是什么，但可能classes它们不一样？箭头函数是lambda表达式，对吧？我以前在 Java 里见过。或许我不用读任何 ES6 相关的知识就能理解了……

哦，我无聊了，刷了一会儿推特。我回来了。好，接下来做什么？

我不喜欢做那种代码教程，因为有些代码已经写好了，所以我强烈反对方案 1。我们来试试方案 2：

好的，我必须先完成所有这些设置步骤。让我们安装 Node.js。在 Mac 上安装非常简单，因为教程中的链接会直接带我到下载页面，在那里我可以下载一个*.pkg文件，然后以安装程序的形式运行。超级快捷方便。

我想，下一步是按照那些安装说明操作。我需要点击链接吗？还是直接运行那个命令？不太清楚。我点击了链接：

看起来指令都一样。所以我将忽略该链接中的其他所有内容，只运行教程中的那条命令：

$ npx create-react-app my-app

...这个命令似乎运行了很长时间。可能是因为我第一次使用 npm / React，所以它正在做一些初始化工作？

Creating a new React app in /Users/andrew/my-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...

⸨       ░░░░░░░░░░░⸩ ⠹ extract:eslint-plugin-flowtype: sill extract ...

……是啊，看起来就是这样。我去喝点东西再回来。

这是我回来时看到的景象：

added 1980 packages from 735 contributors and audited 36246 packages in 163.458s
found 63 low severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

Initialized a git repository.

Success! Created my-app at /Users/andrew/my-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd my-app
  npm start

Happy hacking!

关于“漏洞”的那句话让我感觉很不舒服。尤其是最近 npm 的负面报道。我真的需要安装1980 个包才能运行这个演示应用吗？这难道不疯狂吗？

无论如何，这个小小的“入门”菜单很不错。教程的下一步是删除项目src/目录中的所有文件。所以我照做了：

$ ls my-app/src/
App.css           App.test.js       index.js          serviceWorker.js
App.js            index.css         logo.svg

$ rm my-app/src/*

继续本教程，我点击了此部分...

……呃。他们还是让我复制粘贴代码。我不想那样做，所以我选择在我的机器上从头开始这个项目。也许我最终还是想做一个“Hello, World!”应用。

不管怎样，我想我暂时还是会继续做下去。我会按照步骤 4、5 和 6 的说明来。我讨厌复制粘贴代码。感觉很脏。

我npm start在项目文件夹中运行，然后……什么也没发生。好久都没反应。当终端请求访问Google Chrome 的权限时，我开始担心我是不是做错了什么。它肯定打开了那个应用程序！

我又等待了一段难以忍受的漫长时间。

哇！就在这里！我的第一个 React 应用。

这就是这篇日志的第一部分，也是ReactJS.org 上React 教程的第一部分。下次再回来读我的更多胡言乱语和抱怨吧！