124

[译] 听说你想学 React.js ?

 6 years ago
source link: https://juejin.im/post/5a2f8ea5f265da43305e6f6b
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

[译] 听说你想学 React.js ?

[译] 听说你想学 React.js ?

2017年12月12日 10:35 ·  阅读 5361

听说你想学 React.js ?

16049c80f1780eaf~tplv-t2oaga2asx-zoom-in-crop-mark:4536:0:0:0.awebp

首先,你需要接受一个事实,就是为了使用 React 你需要学习除了 React 之外更多的知识。这是件好事,React 这个库在某些场景下使用是非常棒的,但它并不能解决所有问题。

而且,请先确认你现在是否在学习 React,这主要是为了不让你对学习 React 本身感到困惑。一个熟悉 HTML 和其他一种编程语言的程序员,他应该能够在一天或更短时间内 100% 的掌握 React。一个新手程序员应该在一个星期就能掌握 React。当然,这不包括用来完善 React 的工具及其他库,例如 Redux 和 Relay。

有序地学习是一件重要的事情,这个顺序会根据你掌握的技能而有所不同。不言而喻,首先你需要对 JavaScript 本身有清晰的理解,当然, HTML 也是。我想在这详细说明下,如果你不知道如何使用数组的 map 或 reduce 方法,或者你不理解闭包,回调的概念,又或者如果在 JavaScript 代码中看到“this”使你感到困惑。那么你还没有准备好学习 React ,而且在 JavaScript 的领域你还有很多东西需要学习。

首先更新 JavaScript 的知识并不是一件坏事,主要是你需要学习 ES2015,并不是因为 React 依赖它(事实也并不依赖 ES2015)。但因为它是一个更好的语言,因此大多数示例,课程和教程都会使用现代的 JavaScript 语法。具体来说,你需要以下内容:

  • 对象字面量和模板字符串的新特性
  • 块级作用域 和 let/const 和 var 的区别
  • 解构和默认值/剩余参数/扩展运算符
  • 类和继承(用于定义组件,但是避免其他方式使用)
  • 使用类字段语法和箭头函数定义方法
  • Promise 对象以及如何配合 async/await 使用
  • 引入和导出模块(最重要的)

你不需要从 ES2015 开始学习,但最终你还是需要学习它(并不是因为你正在学习 React)

所以除了 ES2015 以外的东西,要成为一个高效的 React 开发者你还需要学习以下内容:

  • ReactReactDOMReactDOMServer 的 API:这些 API 并不是那么常用,我们平时用到的(谈论到的)大概只有 25 个左右,你很少会全部使用到。React 的官方文档 实际上它是一个很好的起点(它最近变得更好了),但是如果你还是很困惑,可以观看在线课程阅读一本书,或者参加一个专门的研讨会。你的选择无穷无尽,但要小心你挑选的内容,确保它关注的内容是 React 本身,而不是它的工具和生态系统。
16049c808f822665~tplv-t2oaga2asx-zoom-in-crop-mark:4536:0:0:0.awebp
  • node 和 npm:你需要学习这些(为了 React)的原因,是因为在 npmjs.org 上有很多的工具包,可以让你的编程生活更轻松。而且,自从 Node 允许在服务器端执行 JavaScript 代码后,你可以在服务器端复用前端的 React 代码(同构/跨平台应用)。大多数情况下,你会发现配合像 webpack 这样的模块打包工具时,就更能彰显 node 和 npm 的价值。更重要的是,当你编写大型应用程序时,你至少需要一个工具来处理 JSX (忽略 JSX 是可选的建议)。学习并使用 JSX,推荐的工具是 Babel.js。
  • React 生态系统库:因为 React 只是一个构建页面 UI 的语言,你需要结合其他工具库来完成页面的展示和 MVC 实现。不要等到你对 React 很熟悉后才开始这一步。一旦你完成 React 的学习,我建议你关注 react-router 和 redux 这两个工具库,忘掉你之前学习的东西,先学习这两个库。
  • 在熟悉 React 本身的原始概念之后,马上构建一个 React Native 的应用程序。你一旦这么做,你将会只体会到 React 的美。相信我。
16049c808f77844f~tplv-t2oaga2asx-zoom-in-crop-mark:4536:0:0:0.awebp

在你学习的过程中,你能做到最好的事就是靠自己双手构建东西。不要复制粘贴例子,也不要盲目地遵循说明,而是参照说明构建其他东西(理想情况下,你更在乎的东西)。无论你做什么,不要只做一个 TODOs 应用程序

我发现构建简单的游戏比用数据驱动的严肃的 web 应用程序能更好地展示 React 的思想。这就是为什么在我的 React.js 入门课程中,我专注于构建简单的游戏。我还在我的《简洁的 React.js》中构建了另一个不同的游戏,你可以免费阅读。尝试在 JavaScript 在线开发平台 中实现其他类似的游戏,这是一个好的开始,你不需要服务器,也不需要管理那些烦人的 state。

JavaScript REPL 和 React.js 开发平台 通过jsComplete交互式实验学习 JavaScript 和 React.js jscomplete.com

最近,我为 jsComplate 创建了一个交互式的音频学习工具。我测试这工具的第一个实验是一个 React.js 的例子。如果你有做实验,请务必留下你的反馈意见。

祝你好运并玩得开心!如果你提问得很好,我会很乐意的看看你第一个 React 应用程序并给你一些指导。

感谢您的阅读,如果你发现这篇文章对你有帮助,请点击下面的 💚,跟随我发现更多关于 React.js 和 JavaScript 的文章吧。


掘金翻译计划 是一个翻译优质互联网技术文章的社区,文章来源为 掘金 上的英文分享文章。内容覆盖 AndroidiOS前端后端区块链产品设计人工智能等领域,想要查看更多优质译文请持续关注 掘金翻译计划官方微博知乎专栏


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK