react 入坑思考

场景

吾辈为什么要学 react 呢？难道 HTML+CSS+JavaScript 已经满足不了了？是的，传统前端确实满足不了吾辈了，前端在快速发展，而后端手中（甚至眼中）的前端仍然是只有 HTML+CSS+JavaScript+JQuery 的世界。吾辈不想就这样下去，所以想要了解、学习、使用现代前端的内容。
谜之音：难道 vuejs 还不够么？
vuejs 既是国产（阿里），所以文档（中文）相对而言应该是最好的。而且相比于 react，vuejs 的门槛相对而言还是比较低的。至少，不用一开始就接触 webpack（天坑），在不用 webpack 的情况下使用 react 将是很困难的。
或许有人说，react 不是有 create-react-app 可以快速创建 web app 么？然而使用 create-react-app 之后，一大波僵尸（概念）将会袭来。

对白

让我们先来看一段对白

问：react 好像不推荐在浏览器中直接使用 <script> 标签引入呢？
答：是呀，你需要 npm/yarn 这类工具呢
问：npm 是什么？
答：npm 能帮助我们管理依赖的库 只要 install 一下就可以啦
问：那么安装的包要怎么引用呢？
答：你需要用 commonjs/es2016 之类的方式引入呢？
问：等等，commonjs？es2016？这都是什么呀？
答：哦，这是一种 js 模块化的规范而已，我们只要知道 import 和 export 就好啦？
问：嗯，那么我应该在哪里写 HTML？
答：不不不，react 里面没有 HTML，只有 jsx。
问：OMG，jsx 又是什么？
答：一种 js + xml 的 dsl，语法上很像 HTML，no problem！
问：那写完的的 jsx 组件怎么在浏览器中查看啊？
答：你需要使用打包工具，例如 webpack，将 jsx 打包成 HTML+JavaScript 才行
问：额，不是没有 HTML 了么？
答：写的时候没有，但浏览器只认识 HTML/CSS/JavaScript，所以最终还是要变成这些才行呀
问：嗯，那么 webpack 是什么呢？
答：现代前端的一个打包工具
问：好的，那我去看看文档
一段时间后。。。
问：我看了 webpack 官网的文档，但还是不明白应该怎么打包
答：额，不行的话就用 create-react-app 吧。它会自动帮你生成一个完整配置的项目的，你只要懂得配置的意思并且会修改就好了。
问：于是，我开始了愉快的 react 之旅。。。个鬼呀！idea 怎么没提示？
答：额，你需要插件，不过更推荐 vscode，毕竟已经是事实上的前端标准编辑器了。
问：也就是说，我又要用一个新的 IDE 了？
答：不是啦，vscode 只是一个编辑器，比 idea 轻量太多了。而且，vscode 对前端生态支持很好哦
一段时间后。。。
问：我写了几个组件，但不知道应该怎么控制页面跳转？我好像并不能在后端映射到组件呀
答：react 需要使用 react router 之类的前端路由，现在前端的跳转由前端来控制就好了
问：所以说，不能使用 java 来控制么？≥﹏≤
答：额，可能真不行，为什么不用 react router 呢？
问：好吧，我先去看看。。。
问：唉，组件之间的交互好麻烦呀，每次都要依赖传递 props 啊
答：哦，你可以尝试一下状态管理。例如 redux
问：redux？那是什么？
答：react 中的一个状态管理，可以不用一层层的传递 props 了呢
问：听起来很不错，我现在就去看一下！
问：两天后，woc，redux 去死吧？就想改个状态怎么这么麻烦，而且异步那里什么鬼？(ノ =Д=) ノ ┻━┻
答：看来你不适合 react，或许你可以看看 vuejs，更简单一点。国产，中文文档齐全，门槛很低的呢！

诚然，以上的问题不一定是指 react 本身，但依赖于如此之多的工具，本就造成了 react 的复杂性。

思考

看完以上对话，或许吾辈看起来很讨厌 react 的样子？
事实上，吾辈第一次学习现代前端的时候，就是从 react 开始的，然后基本上就像上面的对话所述，直接败退了，然后滚去学了一段时间的 vuejs。
然而，直到最近，吾辈发现 vuejs 的生态实在太小了。最开始吾辈就了解过这两个框架，也知道 vuejs 的生态很小，然而确实没想到会这么小。。。
深层次来讲，vuejs 毕竟是国产，毕竟是阿里，所以还是慎用。想想 Dubbo 放弃维护 和 Ant Design 圣诞彩蛋，一切皆是不言自明的！

现在再看 react，感觉简单了一些。一方面，由于 vuejs 的原因，接触到了 es6/npm/yarn/webpack/babel/vscode 这些前端工具链，对现代前端有了基本的概念与认知。不再因为某些代码看不懂而卡住，也不会面对各种工具一脸懵逼了。