如何学习React--[转]

如果你是一个 React (或者前端) 新手, 出于以下的原因, 你可能会对这个生态圈感到困惑:

  • React 的目标群体历来是喜欢尝试新事物的开发者和前端专家.
  • Facebook 只开源了他们在实际使用的, 因此他们没有关注那些比 Facebook 小的工程需求.
  • 现有的 React 指引水平层次不齐.

在本文中, 我会假设你已有使用 HTML, CSS 和 JavaScript 开发网页的基础.

为什么要听我的?

关于 React, 现在已经有大量的相互冲突的建议了, 为什么要听我的?

因为我是在 Facebook 构建并开源 React 的最初成员之一. 现在我离开了 Facebook 并加入了一家初创公司, 所以我也不会站在 Facebook 的立场上来表态.

如何踏入 React 生态圈

所有的软件都是建立在某个技术栈之上的, 你需要对整个技术栈有足够深入的理解, 才能建造你的应用. 为什么 React 生态圈的工具似乎总让人感觉压力山大呢, 因为它总是以错误的顺序被解释:

你应该按照以下的顺序进行学习, 而不是跳着学或者同时学习:

你不需要把这些都学完才去使用 React. 只需要在你遇到问题需要解决的时候, 才进入下一步的学习.

另外, 在 React 社区中, 有一些前沿主题是经常被提及到的, 以下的这些主题很有意思, 但也很难弄懂, 所以它们远没有上面的主题流行, 大多数应用也不需要用到这些.

学习 React 本身

有一种常见的误解是: 你需要花费大量时间在配置工具上, 然后才开始学习 React. 在官方文档里, 你可以找到 copy-paste HTML template. 只需要保存为 .html 文件, 你就可以马上开始学习了. 这个步骤不需要任何工具, 你也无需额外学习工具使用, 直到你能熟练掌握 React 基础.

我依然觉得, 学习 React 最简单的方法是通过官方教程 the official tutorial.

学习 npm

npm 是 Node.js 包管理工具, 也是前端工程师和设计师分享 JavaScript 代码最流行的方式. 它包含了名为 CommonJS 的模块系统, 让你可以安装 JavaScript 写的命令行工具. 作为背景知识, 可以阅读 这篇文章 了解 CommonJS 对于浏览器的重要性, 阅读CommonJS Spec Wiki 了解关于 CommonJS API 的更多内容

在 React 生态圈中, 大部分可重用的组件、库和工具遵循 CommonJS 模块规范, 可通过 npm 来安装.

学习 JavaScript 打包工具

出于若干技术原因, CommonJS 模块 (也就是 npm 里的所有内容) 不能直接用到浏览器. 你需要一个 JavaScript “打包工具(bundler)” 来把这些模块打包成 .js 文件, 使你可以在网页中通过 <script> 标签引入它们.

JavaScript 打包工具包括有 webpack 和 browserify. 它们都是好的选择, 但我个人更喜欢 webpack , 因为它有许多功能简化大型应用开发. 鉴于 webpack 文档可能令人感到困惑, 我也写了两篇文章: plug-and-play template for getting started 和针对更复杂用例的 how-to guide for webpack.

要记住的一点: CommonJS 使用了 require() 函数来引入模块, 因此许多人对此感到疑惑, 并认为需要导入 require.js 到工程里. 出于若干技术原因, 我建议你避免使用 require.js. 它在 React 生态圈并不流行.

学习 ES6

在 JSX (你会在 React tutorial 中学习到) 以外, 你可能会注意到 React 例子中一些有趣的语法. 这被称为 ECMAScript6, 是 JavaScript 的最新版本. 由于 ES6 很新, 你可能还没学习到, 浏览器也可能尚未兼容, 但别担心, 通过合适的配置, 你的打包工具会为你自动转换成兼容代码.

如果你只想要使用 React 来把事情做完, 你可以跳过 ES6 的学习, 或者留到以后再学习.

学习路由 (routing)

“单页面应用” 是时下的技术热点. 当网页加载完成, 用户点击链接或者按钮的时候, JavaScript 会更新页面和改变地址栏, 但网页不会刷新. 地址栏的管理就是通过 路由(router) 来完成的.

目前 React 生态圈最受欢迎的路由解决方案是 react-router. 如果你正在创建一个单页面应用, 有什么理由不去使用它呢?

如果你创建的并非单页面应用, 请不要使用路由. 无论如何, 大部分项目都是从大型应用中的小组件开始的.

学习内联样式

在 React 出现之前, 很多人通过像 SASS 这样的预处理器来重用复杂的 CSS 样式表. 鉴于 React 使开发可重用组件变得容易, 你的样式表可以变得没那么复杂了. 社区中许多人 (包括我) 正尝试完全抛弃样式表.

由于一些原因, 其实这是个相当疯狂的主意. 这让媒体查询 (media quries) 更加困难了, 而且这种技术可能有性能上的局限性. 当你开始用 React 的时候, 只要用你平常使用的方法去写就好了.

一旦你找到了用 React 开发的感觉, 你就可以关注那些可作为替代的技术了. 其中一种流行技术是 BEM. 我建议你逐渐停用 CSS 预处理器, 因为 React 给了你一种更强大的方式去重用样式 (通过重用组件), 并且 JavaScript 打包工具可以为你生成更高效的样式表 (我曾经在 OSCON 上发表过关于这个的演讲). 说了这么多, 总之 React 就像其他 JavaScript 库一样, 可以和 CSS 预处理器很好地配合工作.

学习服务器端渲染

服务器端渲染经常被称为 "universal" 或 "isomorphic" JS. 这意味着你可以用 React 组件在服务器端渲染出静态 HTML. 这样做可以提高初始化加载的性能, 因为用户不用等到 JS 下载完才看得见初始界面, 并且 React 可以重用服务器端渲染出的 HTML, 无需客户端重新生成.

如果你发现首屏渲染速度过慢, 或者想提高网站在搜索引擎的排行, 你就需要服务器端渲染了. 尽管 Google 现在也会索引客户端渲染的内容, 但截至 2016 年 1 月, 这样做被证实会对排行有负面影响, 这可能是由于客户端渲染的性能问题所造成的.

服务器端渲染还需要许多工具的辅助, 因为显然 React 组件不是在考虑服务器端渲染的情况下写出来的, 你应该先构建你的应用, 之后再关心服务器端渲染的问题. 你不用担心重写所有组件才能支持它.

学习 Flux

你可能听过 Flux, 不过关于 Flux 有大量的错误资讯.

许多人一坐下来刚开始构建应用, 就认为需要用 Flux 来定义他们的数据模型. 这样采用 Flux 是不对的, Flux 应该在大量组件被建立完成以后才被引入.

React 组件之间存在层级关系. 在很多时候, 你的数据模型也跟随这种层级. 这种情况下, Flux 不会给你很大帮助. 但有些时候, 你的数据模型没有层次, 当你的 React 组件开始接受没有关联的 props 的时候, 或者当小部分组件开始变得复杂的时候, 你才可能需要看看 Flux.

你会知道什么时候需要用 Flux. 如果你不确定是否需要用它, 你就不需要它.

如果你决定使用 Flux, 现在最流行的、文档最全的 Flux 库是 Redux. 当然也有许多其他选择, 你或者会有兴趣尝试使用它们, 但我的建议是只需要用最流行的那一个就足够了.

学习 Immutable.js

Immutable.js 提供了一系列的数据结构, 以帮助解决构造 React 应用时的某些性能问题. 这是一个很棒的库, 你可能会在应用发展的过程里大量用到它, 但直到你在意识到性能问题以前, 它是完全不必要的.

学习 Relay, Falcor 等

这些技术可以帮你减少 AJAX 请求数, 它们仍然是非常前沿的, 所以如果你没有遇到过多 AJAX 请求的问题, 就不需要用到 Relay 或者 Falcor.

(英文原文:https://github.com/petehunt/react-howto;转载自:https://github.com/petehunt/react-howto/blob/master/README-zh.md)

时间: 2024-10-18 04:37:01

如何学习React--[转]的相关文章

正式学习 react(三)

有了基础的webpack基础,我们要对react的基本语法进行学习. 我这个教程全部用es6 实现.可能会忽略一些最基本的语法讲解,这些你在官网上或者其他别的地方都比我讲的全. 今天我要讲一下react用的较多的bind函数. 源码分析一波: 1 Function.prototype.bind = function() { 2 var __method = this; 3 var args = Array.prototype.slice.call(arguments); 4 var object

学习React前的准备工作

学习React前提必须拥有Javascript和DOM知识.这个门槛已经很低了.但是很多的教程里面都提到npm,nodejs.要先安装nodejs.在零基础的情况,我一度以为学习React的运行必须依靠nodejs环境.其实不是这样子的. 一.常用工具介绍 1.nodejs: Node.js? is a JavaScript runtime built on Chrome's V8 JavaScript engine.  how to understand?首先node.js是一个JavaScr

学习react

推荐资源: 一位react的最初构建者写的学习react的建议,这是翻译过的http://www.360doc.com/content/16/0129/07/13518188_531384175.shtml 官网上面的文档组织的确是有点乱,但还是要通过官网学习,建议从认真跟着官网上这篇教程做 http://reactjs.cn/react/docs/tutorial.html  ,之后可以选择性看其他部分内容 慕课网上面关于react的视频  http://www.imooc.com/index

如何从零学习 React 技术栈

达人课是GitChat的一款轻阅读产品,由特约讲师独家发布.每一个课程你都可获得6-12篇的深度文章,同时可在读者圈与讲师互动交流.GitChat达人课,让技术分享更简单. 如何从零学习 React 技术栈 余博伦 · 前端颜值担当 这里写图片描述 本课程共六篇文章 在学会 React 之后,你的能力将不止局限于浏览器,React 还可以拓宽到使用 React Native 开发原生应用,以及使用 ReactVR 开发虚拟现实等各个领域.除了示例代码的讲解之外,本课程还会对个别核心概念的原理进行

为什么要学习React,学习React在大数据开发上有什么好处

为什么要学习React,学习React在大数据开发上有什么好处 分享之前我还是要推荐下我自己创建的大数据学习资料分享群716581014,这是全国最大的大数据学习交流的地方,2000人聚集,不管你是小白还是大牛,小编我都挺欢迎,今天的源码已经上传到群文件,不定期分享干货,包括我自己整理的一份最新的适合2018年学习和零基础入门教程,欢迎初学和进阶中的小伙伴. 如何学习React 如果你是一个 React (或者前端) 新手, 出于以下的原因, 你可能会对这个生态圈感到困惑: React 的目标群

学习React前端框架,报错 &#39;React&#39; must be in scope when using JSX react/react-in-jsx-scope

问题 import react from 'react'  改成  import React from 'react'   小写 react  改成 React 学习React前端框架,报错 'React' must be in scope when using JSX react/react-in-jsx-scope 原文地址:https://www.cnblogs.com/BensonHai/p/9952156.html

新手学习 React 迷惑的点

网上各种言论说 React 上手比 Vue 难,可能难就难不能深刻理解 JSX,或者对 ES6 的一些特性理解得不够深刻,导致觉得有些点难以理解,然后说 React 比较难上手,还反人类啥的,所以我打算写两篇文章来讲新手学习 React 的时候容易迷惑的点写出来,如果你还以其他的对于学习 React 很迷惑的点,可以在留言区里给我留言. 为什么要引入 React 在写 React 的时候,你可能会写类似这样的代码: import React from 'react' function A() {

react-native 学习 ----- React Navigation

很久没有的登陆博客园了,密码都是找回的,从当年的大学生已经正常的走上了程序员的道路,看到之前发的博客还是写的android,现在自己已经在使用了react-native了. 大学毕业了,做了java后台台发,就再也没有写过移动端的东西了,知道rn的出现,发现这个比当年的web app phonegap好用多了就此一发不可收拾.公司app就是用的rn,我主要还是负责数据在store中的处理,框架也是公司大牛封装的,但是我心中总有一个移动端的梦想,所以我准备开始从零开始学习react-native.

学习react一个多月来的总结

Javascript通过事件驱动机制,在单线程模型下,以异步的形式来实现非阻塞的IO操作.这种模式使得JavaScript在处理事务时非常高效,但这带来了很多问题,比如异常处理困难.函数嵌套过深.下面介绍几种目前已知的实现异步操作的解决方案. 几乎所有的硬件设备都需要安装驱动后才能正常工作,我们重装系统后第一件事就是要为各设备安装好驱动,我们可以下载官方驱动手动安装,也可以让我Windows自动扫描安装,还可以使用驱动精灵.电脑管家之类的工具帮我们安装,为了发挥硬件设备最好的性能,我们还需要及时

正式学习React( 三)

最基本的jsx语法什么的,我就不介绍了,唯一觉得有用点的,就是声明周期了. 下面的内容是转来的,自己也可以网上去搜,我觉得别人归纳的挺不错的,不过写法可能不是es6的,不影响学习. 在组件的整个生命周期中,随着该组件的props或者state发生改变,它的DOM表现也将有相应的变化.组件本质上是状态机:对于特定的输入,它总会返回一致的输出. ???????React为每个组件提供的生命周期分三个阶段:  一.实例化: getDefaultProps:组件初次实例化创建(不管是否成功)才会被调用,