React中文入门教程 pdf 下载

5星(超过95%的资源)
所需积分/C币:50 2017-03-19 10:52:57 20.59MB PDF
353
收藏 收藏
举报

React中文入门教程
Introduction 上优程网,学优秀教程,做优秀程序员 React入门教程 按照惯例,在介绍一个新技术之前总是要为它背书的,作为Reac受众在开 始接触之前肯定会有一些喜闻乐见的疑问 ●为什么不用 Backbone? ·为什么不用 Angular? 在没有真正使用之前,其实没法评价哪一个好,没有最好的,只有最合适 的,如 Why React所说, Give it five minutes,希望你能克服初次遇到JSX 这种存在的偏见去尝试一下。 因为官方文档组织得比较散乱,希望本教程能成为一个不错的入门参考。 有任何问题→ Github 本文档对应 React v0.14X,使用ES6。 React概览 上优程网,学优秀教程,做优秀程序员 React概览 React的核心思想是:封裝组件 各个组件维护自己的状态和Ul,当状态变更,自动重新渲染整个组件。 基于这种方式的一个直观感受就是我们不再需要不厌其烦地来回查找某个 DOM元素,然后操作DOM去更改Ul。 React大体包含下面这些概念 组件 e JSX Virtual dOm Data Flow 这里通过一个简单的组件来快速了解这些概念,以及建立起对 React的一个 总体认识。 import React,i Component from react importi render from react-dom class HelloMessage extends Component i renders return <div>Hello ithis props. name]</div>; //加载组件到DoM元素 mountNode render(<helloMessage name=John/>, mountNode 组件 React应用都是构建在组件之上。 React概览 上优程网,学优秀教程,做优秀程序员 上面的 HelloMessage就是一个 React构建的组件,最后一句 render会 把这个组件显示到页面上的某个元素 mountnode里面,显示的内容就是 <div>hello john</div> props是组件包含的两个核心概念之一,另一个是 state(这个组件没 用到)。可以把 props看作是组件的配置属性,在组件内部是不变的,只 是在调用这个组件的时候传入不同的属性(比如这里的name)来定制显示 这个组件。 JSX 从上面的代码可以看到将HTML直接嵌入了JS代码里面,这个就是 React 提出的一种叫JsⅩ的语法,这应该是最开始接触 React最不能接受的设定之 ,因为前端被“表现和逻辑层分离”这种思想“洗脑”太久了。但实际上组件的 HTML是组成一个组件不可分割的一部分,能够将HTML封装起来才是组件 的完全体, React发明了JsX让Js支持嵌入HTML不得不说是一种非常聪 明的做法,让前端实现真正意义上的组件化成为了可能。 好消息是你可以不一定使用这种语法,后面会进一步介绍JSX,到时候你可 能就会喜欢上了。现在要知道的是,要使用包含JSX的组件,是需要“编 译”输岀Js代码才能使用的,之后就会讲到开发环境。 Virtual dom 当组件状态 state有更改的时候, React会自动调用组件的 render方 法重新渲染整个组件的Ul。 当然如果真的这样大面积的操作DOM,性能会是一个很大的问题,所以 React实现了一个 irtua/ dom,组件DOM结构就是映射到这个ua DOM上, React在这个 irtual dom上实现了一个d算法,当要重新渲染 组件的时候,会通过df寻找到要变更的DOM节点,再把这个修改更新到 浏览器实际的DOM节点上,所以实际上不是真的渲染整个DOM树。这个 Virtual dom是一个纯粹的JS数据结构,所以性能会比原生DOM快很多。 React概览 上优程网,学优秀教程,做优秀程序员 Data Flow “单向数据绑定”是 React推崇的一种应用架构的方式。当应用足够复杂时才 能体会到它的好处,虽然在一般应用场景下你可能不会意识到它的存在,也 不会影响你开始使用 React,你只要先知道有这么个概念。 开发环境配置 上优程网,学优秀教程,做优秀程序员 开发环境配置 要搭建一个现代的前端开发环境配套的工具有很多,比如 Grunt/Gu|p Webpack/ Broccoli,都是要解决前端工程化问题,这个主题很大,这里为了 使用Reac我们只关注其中的两个点 JSX支持 ES6支持 好消息是业界领先的ES6编译工具Babe随着作者被 Facebook招入麾下, 已经内置了对JsX的支持,我们只需要配置Babe一个编译工具就可以了, 配合 webpack非常方便。 Webpack 上优程网,学优秀教程,做优秀程序员 Webpack配置 React开发环境 Webpack是一个前端资源加载/打包工具,只需要相对简单的配置就可以提 供前端工程化需要的各种功能,并且如果有需要它还可以被整合到其他比如 Grunt/Gulp的工作流。 安装 Webpack: npm Insta1l- g webpack Webpack使用一个名为 Webpack. config.js的配置文件,要编译JSⅩ, 先安装对应的 loader: npm instal1 babel-1 oader--save-dev 假设我们在当前工程目录有一个入口文件 entry.js, React组件放置在 个 components′目录下,组件被 entry.js引用,要使用 entry.js 我们把这个文件指定输出到dist/bund1e.js, Webpack配置如下: var path require( path 'i moduleexports =i entry I,/entry. Js I output path: path. join( dir name /dist )r filename:bundle. js resolve: t extensions: D .Js js×"] }, module: loaders: D i test: /\js jsxs/, loaders: [] Webpack 上优程网,学优秀教程,做优秀程序员 resolve指定可以被 Import的文件后缀。比如He1lo.jsX这样的文 件就可以直接用 import Hello from' Hello′引用。 loaders指定babe}- loader编译后缀名为.js或者.js×的文件,这 样你就可以在这两种类型的文件中自由使用JSX和ES6了。 监听编译: Webpack-d-- watch 更多关于 Webpack的介绍 webpack-howto ISX 上优程网,学优秀教程,做优秀程序员 JSX 为什么要引入JsX这种语法 传统旳MVC是将模板放在其他地方,比如<scriρt>标签或者模板文件, 再在JS中通过某种手段引用模板。按照这种思路,想想多少次我们面对四 处分散的模板片段不知所措?纠结模板引擎,纠结模板存放位置,纠结如何 引用模板..下面是一段 React官方的看法: We strongly believe that components are the right way to separate concerns rather than templates and "display logic. We think that markup and the code that generates it are intimately tied together. Additionally, display logic is often very complex and using template languages to express it becomes cumbersome 简单来说, React认为组件才是王道,而组件是和模板紧密关联的,组件模 板和组件逻辑分离让问题复杂化了。显而易见的道理,关键是怎么做? 所以就有了JsⅩ这种语法,就是为了把HTML模板直接嵌入到JS代码里 面,这样就做到了模板和组件关联,但是JS不支持这种包含HTML的语 法,所以需要通过工具将JSⅩ编译输出成JS代码才能使用。 JsX是可选的 因为JsⅩ最终是输出成JS代码来表达的,所以我们可以直接用 React提供 的这些DOM构建方法来写模板,比如一个JsX写的一个链接 Kahref=http://facebook.github.io/react/>hello!</a> 用Js代码来写就成这样了: React createelement('a',thref:Http: //facebook. github.io/re 10

...展开详情
试读 71P React中文入门教程 pdf 下载
立即下载
限时抽奖 低至0.43元/次
身份认证后 购VIP低至7折
一个资源只可评论一次,评论内容不能少于5个字
羊圈里最帅的羊 不怎么好看,有时点了页面要翻页,就打开外部网站了,很烦人。
2019-02-28
回复
集成显卡 对新人还是可以的
2018-11-26
回复
hayalu_2012 很好,很不错的资料,多谢分享。
2018-10-14
回复
thinkingmysky 不错的,还是可以看看, 虽然有不行的
2018-08-17
回复
zzw5561122 多谢分享了
2018-05-16
回复
mushan123 好东西,下载来看看
2018-03-30
回复
itflash 感谢分享。
2018-03-24
回复
hi808 好东西,值得下载
2018-02-06
回复
猛将-Gerhardt 我的入门教程,推荐下载,感谢分享
2018-01-28
回复
slwenyi 资源不错,谢谢分享了
2017-09-28
回复
您会向同学/朋友/同事推荐我们的CSDN下载吗?
谢谢参与!您的真实评价是我们改进的动力~
上传资源赚钱or赚积分
最新推荐
React中文入门教程 pdf 下载 50积分/C币 立即下载
1/71
React中文入门教程 pdf 下载第1页
React中文入门教程 pdf 下载第2页
React中文入门教程 pdf 下载第3页
React中文入门教程 pdf 下载第4页
React中文入门教程 pdf 下载第5页
React中文入门教程 pdf 下载第6页
React中文入门教程 pdf 下载第7页
React中文入门教程 pdf 下载第8页
React中文入门教程 pdf 下载第9页
React中文入门教程 pdf 下载第10页
React中文入门教程 pdf 下载第11页
React中文入门教程 pdf 下载第12页
React中文入门教程 pdf 下载第13页
React中文入门教程 pdf 下载第14页
React中文入门教程 pdf 下载第15页

试读结束, 可继续读5页

50积分/C币 立即下载