• 自从Facebook在2013年发布了库之后,React.js正在快速被广大开发者所接受。它现在已经成为了GitHub上被收藏次数排名第5的...本文为广大开发者介绍了14个工具和资源,助力web开发。 作者:鲁行云来源:SD

    http://developer.51cto.com/art/201702/530404.htm?

    自从Facebook在2013年发布了库之后,React.js正在快速被广大开发者所接受。它现在已经成为了GitHub上被收藏次数排名第5的开源项目,越来越多的企业正在寻找React.js开发者。本文为广大开发者介绍了14个工具和资源,助力web开发。

    作者:鲁行云来源:SDK.cn|2017-02-09 15:19

    自从Facebook在2013年发布了库之后,React.js正在快速被广大开发者所接受。它现在已经成为了GitHub上被收藏次数排名第5的开源项目,越来越多的企业正在寻找React.js开发者。本文为广大开发者介绍了14个工具和资源,助力web开发。

    自从Facebook在2013年发布了库之后,React.js正在快速被广大开发者所接受。它现在已经成为了GitHub上被收藏次数排名第5的开源项目,越来越多的企业正在寻找React.js开发者。

    React有着更简单易懂的架构,而且专注于性能优化,这使它代替了一些MVC框架,例如Angular和Backbone等。在未来几年内,React一定还会继续发挥重要的作用。这篇文章中,我们总结了一些开发者工具,帮你更轻松的使用React。

    Facebook官方React.js文档

    Facebook为开发者提供了详细的说明文档。除了文档之外,还有一个相信的指导说明,以及一个针对React开发者打造的线上论坛。而且这份文档为开源项目,你甚至可以对它进行编辑。

    React.js Github repo

    在这个repo中,你可以查看React的源代码。如果你想关注它最新的状态,你也可以查看各种issue、里程碑以及最新的pull request。在遇到问题的时候,你还可以查看它的Trouble Shooting Guide

    Hello World starter code

    如果你想快速的尝试一下React,你可以使用Codepen上的这个“Hello World”互动式demo。

    React Starter Kit

    React Starter Kit是一个使用了Node.js、Express、GraphQL、React和Webpack、Babel以及Browsersync等web开发工具打造的web应用模板。而且它还提供了和Facebook一样的全段堆栈。

    ReactCSS

    ReactCSS让你可以在JavaScript中添加inline CSS样式。ReactCSS支持React、Redux、React Nativeautoprefixing、hover、pseudo-element和media请求。你可以使用npm对其进行快速安装。

    React JSFiddle integration (with and without JSX)

    这是一个非常不错的React线上练习工具。它被寄存在JSFiddle上,而且拥有两个版本:一个带有JSX,一个没有JSX,你可以根据自己的喜好进行选择。

    React style guide generator

    使用这个简单的React样式指导生成器,你可以为你的React项目快速生成样式指导。你只需要给文件添加一些文档,之后生成器就会自动完成剩下的事情。

    Belle configurable React components

    Belle是一个React组件库,它为你提供了大量React组件,例如按钮、卡片等。这些组件支持桌面设备和移动设备,并且支持个性化。

    除了Belle之外,你还可以找到其他一些React组件库,例如 React widgets或是Elemental

    React Storybook UI Development Environment

    如果你不想使用其他人做的组件库,你也可以自己做一个。你可以试试 React StoryBook,这是React组件的UI开发环境。你可以使用它自己做互动式组件。

    React-Bootstrap

    React-Bootstrap整合了React和流行的 Bootstrap 3前端框架。这个工具的开发者使用React.js重建了Bootstrap的组件。这样做的好处是减少了代码的重复,提高了diamante性能。

    但是需要注意的是,这个repo目前还在开发当中,因此未来其API还将会发生变化。

    React Developer Tools for Chrome

    React DevTools for Chrome是以个Chrome开发工具,开发方为Facebook。你可以用它来查看组件架构。你只需要在Chrome浏览器中添加这个扩展就可以使用了。你也可以在Github上查看它的源代码。

    React Developer Tools for Firefox

    React Developer Tools的Firefox版本。

    React.js Package for Atom

    使用这个工具,你可以让Atom代码编辑器也支持React。它包含代码高亮、自动补全、代码段、HTML向JSX转化等功能,

    React.js Fundamentals – free online course

    网络上有很多React课程,React.js Fundamentals就是其中之一,而且完全免费。它共有12节课,帮你了解React的基本知识和一些重要的概念。


    展开全文
  • react常用开发工具

    2019-08-13 15:02:14
    https://www.cnblogs.com/vipstone/p/7125338.html 转载于:https://www.cnblogs.com/dianzan/p/10795519.html

    https://www.cnblogs.com/vipstone/p/7125338.html

    转载于:https://www.cnblogs.com/dianzan/p/10795519.html

    展开全文
  • 一看就懂的ReactJs教程

    2016-09-11 15:43:06
    自从接触了ReactJSReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略 ReactJS的风采吧~~ 章有点长,耐心读完,你会有很大收获哦~ 一、ReactJS简介 React 起源于 Facebook 的...

    072107184074806.png


    现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略
    ReactJS的风采吧~~ 章有点长,耐心读完,你会有很大收获哦~

    一、ReactJS简介

    React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。

    ReactJS官网地址:http://facebook.github.io/react/

    Github地址:https://github.com/facebook/react

    二、对ReactJS的认识及ReactJS的优点

    首先,对于React,有一些认识误区,这里先总结一下:

    • React不是一个完整的MVC框架,最多可以认为是MVC中的V(View),甚至React并不非常认可MVC开发模式;

    • React的服务器端Render能力只能算是一个锦上添花的功能,并不是其核心出发点,事实上React官方站点几乎没有提及其在服务器端的应用;

    • 有人拿React和Web Component相提并论,但两者并不是完全的竞争关系,你完全可以用React去开发一个真正的Web Component;

    • React不是一个新的模板语言,JSX只是一个表象,没有JSX的React也能工作。

    1、ReactJS的背景和原理

    在Web开发中,我们总需要将变化的数据实时反应到UI上,这时就需要对DOM进行操作。而复杂或频繁的DOM操作通常是性能瓶颈产生的原因(如何进行高性能的复杂DOM操作通常是衡量一个前端开发人员技能的重要指标)。React为此引入了虚拟DOM(Virtual DOM)的机制:在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行,每当数据变化时,React都会重新构建整个DOM树,然后React将当前整个DOM树和上一次的DOM树进行对比,得到DOM结构的区别,然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新,在一个事件循环(Event Loop)内的两次数据变化会被合并,例如你连续的先将节点内容从A变成B,然后又从B变成A,React会认为UI不发生任何变化,而如果通过手动控制,这种逻辑通常是极其复杂的。尽管每一次都需要构造完整的虚拟DOM树,但是因为虚拟DOM是内存数据,性能是极高的,而对实际DOM进行操作的仅仅是Diff部分,因而能达到提高性能的目的。这样,在保证性能的同时,开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素,而只需要关心在任意一个数据状态下,整个界面是如何Render的。

    如果你像在90年代那样写过服务器端Render的纯Web页面那么应该知道,服务器端所要做的就是根据数据Render出HTML送到浏览器端。如果这时因为用户的一个点击需要改变某个状态文字,那么也是通过刷新整个页面来完成的。服务器端并不需要知道是哪一小段HTML发生了变化,而只需要根据数据刷新整个页面。换句话说,任何UI的变化都是通过整体刷新来完成的。而React将这种开发模式以高性能的方式带到了前端,每做一点界面的更新,你都可以认为刷新了整个页面。至于如何进行局部更新以保证性能,则是React框架要完成的事情。

    借用Facebook介绍React的视频中聊天应用的例子,当一条新的消息过来时,传统开发的思路如上图,你的开发过程需要知道哪条数据过来了,如何将新的DOM结点添加到当前DOM树上;而基于React的开发思路如下图,你永远只需要关心数据整体,两次数据之间的UI如何变化,则完全交给框架去做。可以看到,使用React大大降低了逻辑复杂性,意味着开发难度降低,可能产生Bug的机会也更少。

    2、组件化

    虚拟DOM(virtual-dom)不仅带来了简单的UI开发逻辑,同时也带来了组件化开发的思想,所谓组件,即封装起来的具有独立功能的UI部件。React推荐以组件的方式去重新思考UI构成,将UI上每一个功能相对独立的模块定义成组件,然后将小的组件通过组合或者嵌套的方式构成大的组件,最终完成整体UI的构建。例如,Facebook的instagram.com整站都采用了React来开发,整个页面就是一个大的组件,其中包含了嵌套的大量其它组件,大家有兴趣可以看下它背后的代码。

    如果说MVC的思想让你做到视图-数据-控制器的分离,那么组件化的思考方式则是带来了UI功能模块之间的分离。我们通过一个典型的Blog评论界面来看MVC和组件化开发思路的区别。

    对于MVC开发模式来说,开发者将三者定义成不同的类,实现了表现,数据,控制的分离。开发者更多的是从技术的角度来对UI进行拆分,实现松耦合。

    对于React而言,则完全是一个新的思路,开发者从功能的角度出发,将UI分成不同的组件,每个组件都独立封装。

    在React中,你按照界面模块自然划分的方式来组织和编写你的代码,对于评论界面而言,整个UI是一个通过小组件构成的大组件,每个组件只关心自己部分的逻辑,彼此独立。

    072132381261891600.jpg

    React认为一个组件应该具有如下特征:

    (1)可组合(Composeable):一个组件易于和其它组件一起使用,或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件,那么说父组件拥有(own)它创建的子组件,通过这个特性,一个复杂的UI可以拆分成多个简单的UI组件;

    (2)可重用(Reusable):每个组件都是具有独立功能的,它可以被使用在多个UI场景;

    (3)可维护(Maintainable):每个小的组件仅仅包含自身的逻辑,更容易被理解和维护;

    三、下载ReactJS,编写Hello,world

    ReactJs下载非常简单,为了方便大家下载,这里再一次给出下载地址(链接),下载完成后,我么看到的是一个压缩包。解压后,我们新建一个html文件,引用react.js和JSXTransformer.js这两个js文件。html模板如下(js路径改成自己的):

    QQ截图20150721110651.png

    这里大家可能会奇怪,为什么script的type是text/jsx,这是因为 React 独有的 JSX 语法,跟 JavaScript 不兼容。凡是使用 JSX 的地方,都要加上 type="text/jsx" 。 其次,React 提供两个库: react.js 和 JSXTransformer.js ,它们必须首先加载。其中,JSXTransformer.js 的作用是将 JSX 语法转为 JavaScript 语法。这一步很消耗时间,实际上线的时候,应该将它放到服务器完成。

    到这里我们就可以开始编写代码了,首先我们先来认识一下ReactJs里面的React.render方法:

    React.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点。

    下面我们在script标签里面编写代码,来输出Hello,world,代码如下:

    QQ截图20150721111143.png

    这里需要注意的是,react并不依赖jQuery,当然我们可以使用jQuery,但是render里面第二个参数必须使用JavaScript原生的getElementByID方法,不能使用jQuery来选取DOM节点。

    然后,在浏览器打开这个页面,就可以看到浏览器显示一个大大的Hello,world,因为我们用了

    标签。

    到这里,恭喜,你已经步入了ReactJS的大门~~下面,让我们来进一步学习ReactJs吧~~

    四、Jsx语法

    HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的语法,它允许 HTML 与 JavaScript 的混写,了解过AngularJs的看到下面的代码一定会感觉很熟悉的,我们来看代码:

    QQ截图20150721111531.png

    这里我们声明了一个names数组,然后遍历在前面加上Hello,输出到DOM中,输出结果如下:

    QQ截图20150721111639.png

    JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组,则会展开这个数组的所有成员,代码如下:

    QQ截图20150721111724.png

    显示结果如下:

    QQ截图20150721111738.png

    这里的星号只是做标识用的,大家不要被迷惑了~~

    你看到这里,说明你对React还是蛮感兴趣的,恭喜你,坚持下来了,那么下面,我们开始学习React里面的"真功夫"了~~ Are you ready?

    五、ReactJS组件

    1、组件属性

    前面说了,ReactJS是基于组件化的开发,下面我们开始来学习ReactJS里面的组件,React 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件。React.createClass 方法就用于生成一个组件类。

    下面,我们来编写第一个组件Greet,有一个name属性,然后输出hello + name的值,代码如下:

    QQ截图20150721111858.png

    看到这段代码,接触过AngularJS的朋友们是不是有一种熟悉的感觉,不过这里有几点需要注意:

    1)获取属性的值用的是this.props.属性名

    2)创建的组件名称首字母必须大写。

    3)为元素添加css的class时,要用className。

    4)组件的style属性的设置方式也值得注意,要写成style={{width: this.state.witdh}}。

    2、组件状态

    组件免不了要与用户互动,React 的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI 。下面我们来编写一个小例子,一个文本框和一个button,通过点击button可以改变文本框的编辑状态,禁止编辑和允许编辑。通过这个例子来理解ReactJS的状态机制。先看代码:

    QQ截图20150721112014.png

    这里,我们又使用到了一个方法getInitialState,这个函数在组件初始化的时候执行,必需返回NULL或者一个对象。这里我们可以通过this.state.属性名来访问属性值,这里我们将enable这个值跟input的disabled绑定,当要修改这个属性值时,要使用setState方法。我们声明handleClick方法,来绑定到button上面,实现改变state.enable的值。效果如下:

    072305421429007.gif

    原理分析:

    当用户点击组件,导致状态变化,this.setState 方法就修改状态值,每次修改以后,自动调用 this.render 方法,再次渲染组件。

    这里值得注意的几点如下:

    1)getInitialState函数必须有返回值,可以是NULL或者一个对象。

    2)访问state的方法是this.state.属性名。

    3)变量用{}包裹,不需要再加双引号。

    3、组件的生命周期

    组件的生命周期分成三个状态:

    • Mounting:已插入真实 DOM

    • Updating:正在被重新渲染

    • Unmounting:已移出真实 DOM

    React 为每个状态都提供了两种处理函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用,三种状态共计五种处理函数。

    • componentWillMount()

    • componentDidMount()

    • componentWillUpdate(object nextProps, object nextState)

    • componentDidUpdate(object prevProps, object prevState)

    • componentWillUnmount()

    此外,React 还提供两种特殊状态的处理函数。

    • componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用

    • shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用

    下面来看一个例子:

    QQ截图20150721112254.png

    上面代码在hello组件加载以后,通过 componentDidMount 方法设置一个定时器,每隔100毫秒,就重新设置组件的透明度,从而引发重新渲染。

    4、组件的嵌套

    React是基于组件化的开发,那么组件化开发最大的优点是什么?毫无疑问,当然是复用,下面我们来看看React中到底是如何实现组件的复用的,这里我们还写一个例子来说吧,代码如下:

    QQ截图20150721112325.png

    这里我们创建了一个Search组件,然后又创建了一个Page组件,然后我们在Page组件中调用Search组件,并且调用了两次,这里我们通过属性searchType传入值,最终显示结果如图:

    六、ReactJS小结

    关于ReactJS今天就先学习到这里了,下面来总结一下,主要有以下几点:

    1、ReactJs是基于组件化的开发,所以最终你的页面应该是由若干个小组件组成的大组件。

    2、可以通过属性,将值传递到组件内部,同理也可以通过属性将内部的结果传递到父级组件(留给大家研究);要对某些值的变化做DOM操作的,要把这些值放到state中。

    3、为组件添加外部css样式时,类名应该写成className而不是class;添加内部样式时,应该是style={{opacity: this.state.opacity}}而不是style="opacity:{this.state.opacity};"。

    4、组件名称首字母必须大写。

    5、变量名用{}包裹,且不能加双引号。

    七、参考资料

    React中文文档 

    React入门实例教程

    颠覆式前端UI开发框架:React


    展开全文
  • 译者:前端小智 为了保证的可读性,...下列工具中的重要性与排序无关。 1.Webpack Bundle Analyzer 有没有想过你的应用程序的哪些包或哪部分代码所占总大小的多少? Webpack Bundle Analyzer可以帮助咱们分析。 W...

    原文:medium.com/better-prog…

    译者:前端小智

    为了保证的可读性,本文采用意译而非直译。

    想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你!

    下列工具中的重要性与排序无关。

    1.Webpack Bundle Analyzer

    有没有想过你的应用程序的哪些包或哪部分代码所占总大小的多少? Webpack Bundle Analyzer可以帮助咱们分析。

    Webpack Bundle Analyzer创建一个实时服务器,并提供依赖包交互式树形图可视化。 通过这个工具包,可以看到所渲染文件的位置,gzip大小,解析大小以及所父子级之间详情。

    这个工具的好处是,可以根据你所看到来优化你的React应用。

    收下是它生成的一个分析图:

    可以清楚地看到pdf包大小占用应用程序是最多的,同时也是占用分析图片最大比例,这对于咱们来说是所看即所得效果。

    然而,生成分析图空间有限,你还可以传递一些有用的选项来更详细地查看它,比如generateStatsFile: true,还可以选择生成一个静态HTML文件,可以将其保存在开发环境之外的某个地方,以供以后使用。

    2. React-Proto

    React-Proto 是一个面向开发人员和设计人员的原型工具。这是一个桌面软件,所以在使用之前你必须下载并安装这个软件。

    以下是使用方式一个简单演示:

    该应用程序允许你声明props及其types,在树中查看组件,导入背景图像,将它们定义为有状态或无状态,定义其父组件将是什么,放大/缩小,以及将原型导出到新的或现有项目。

    该应用程序似乎更适合Mac用户,但它仍适用于Windows用户。

    完成用户界面后,可以选择导出到现有项目或新项目。 如果你选择导出到现有项目并选择根目录,它会将它们导出到./src/components,如下所示:

    随着React hook的发布,这个应用程序需要更新做更多的工作。当然,开源是这个应用程序的好处,因为它使它有可能成为未来流行的开源存储库列表。

    3. Why Did You Render

    Why Did You Render 猴子补丁React通知你有关可避免的重新渲染的信息。

    猴子补丁: 这个叫法起源于Zope框架,大家在修正Zope的Bug的时候经常在程序后面追加更新部分,这些被称作是“杂牌军补丁(guerilla patch)”,后来guerilla就渐渐的写成了gorllia((猩猩),再后来就写了monkey(猴子),所以猴子补丁的叫法是这么莫名其妙的得来的。

    猴子补丁主要有以下几个用处:

    • 在运行时替换方法、属性等
    • 在不修改第三方代码的情况下增加原来不支持的功能
    • 在运行时为内存中的对象增加patch而不是在磁盘的源代码中增加

    这非常有用,不仅可以指导咱们修复项目的性能,还可以帮助你理解React是如何工作的。而且,当你更好地理解React的工作原理时,你就会成为更好的React开发人员。

    通过声明一个额外的静态属性whyDidYouRender并将其值设置为true,可以将侦听器附加到任何自定义组件

    import React from 'react'
    import Button from '@material-ui/core/Button'
    
    const Child = (props) => <div {...props} />
    
    const Child2 = ({ children, ...props }) => (
      <div {...props}>
        {children} <Child />
      </div>
    )
    
    Child2.whyDidYouRender = true
    
    const App = () => {
      const [state, setState] = React.useState({})
    
      return (
        <div>
          <Child>{JSON.stringify(state, null, 2)}</Child>
          <div>
            <Button type="button" onClick={() => setState({ hello: 'hi' })}>
              Submit
            </Button>
          </div>
          <Child2>Child #2</Child2>
        </div>
      )
    }
    
    export default App
    复制代码

    这样做之后,在控制台才会打印令人恼人冗长警告:

    不要认为这是错误的提示,把它当成一件好事。 利用那些烦人的消息,这样你就可以修复那些浪费的重新渲染。

    4. Create React App

    大家都知道,Create React App是创建 React项目的最快方式(开箱即用)。

    还有什么比 npx create-react-app <name>更简单的呢

    咱们还有些人可能不知道的是如何使用CRA创建TypeScript项目,这个也很简单,只需要在末尾添加--typescript 即可:

    npx create-react-app <name> — typescript
    复制代码

    这样可以省去手动将TypeScript添加到CRA创建项目中的麻烦。

    5. React Lifecycle Visualizer

    React Lifecycle Visualizer是一个npm包,用于跟踪和可视化任意React组件的生命周期方法。

    Why Did You Render 工具类似,你可以选择任何组件来启动生命周期可视化工具:

    import React from 'react'
    import {
      Log,
      VisualizerProvider,
      traceLifecycle,
    } from 'react-lifecycle-visualizer'
    
    class TracedComponent extends React.Component {
      state = {
        loaded: false,
      }
    
      componentDidMount() {
        this.props.onMount()
      }
    
      render() {
        return <h2>Traced Component</h2>
      }
    }
    
    const EnhancedTracedComponent = traceLifecycle(TracedComponent)
    
    const App = () => (
      <VisualizerProvider>
        <EnhancedTracedComponent />
        <Log />
      </VisualizerProvider>
    )
    复制代码

    运行结果,如下所示:

    但是,其中一个缺点是它目前仅适用于类组件,因此尚不支持 Hook

    6. Guppy

    GuppyReact的一个友好且免费的应用程序管理器和任务运行器,它在桌面上运行且跨平台的,你可以放心用。

    它为开发人员经常面临的许多典型任务(如创建新项目、执行任务和管理依赖项)提供了友好的图形用户界面。

    Guppy 启动后的的样子

    7. react-testing-library

    react-testing-library 是一个很棒的测试库,编写单元测试时,它会让你感觉很好。这个包提供了React DOM测试实用程序,鼓励良好的测试实践。

    此解决方案旨在解决测试实现细节的问题,而不是测试React组件的输入/输出,就像用户会看到它们一样。

    这是react-test -library解决的一个问题,因为理想情况下,你只希望您的用户界面能够正常工作,并最终正确地渲染出来。

    如何将数据获取到这些组件并不重要,只要它们仍然提供预期的输出即可。

    以下是使用此库进行测试的示例代码:

    // Hoist helper functions (but not vars) to reuse between test cases
    const renderComponent = ({ count }) =>
      render(
        <StateMock state={{ count }}>
          <StatefulCounter />
        </StateMock>,
      )
    
    it('renders initial count', async () => {
      // Render new instance in every test to prevent leaking state
      const { getByText } = renderComponent({ count: 5 })
    
      await waitForElement(() => getByText(/clicked 5 times/i))
    })
    
    it('increments
    
     count', async () => {
      // Render new instance in every test to prevent leaking state
      const { getByText } = renderComponent({ count: 5 })
    
      fireEvent.click(getByText('+1'))
      await waitForElement(() => getByText(/clicked 6 times/i))
    })
    复制代码

    8. React Developer Tools

    React Developer Tools是一个扩展插件,允许在ChromeFirefox Developer Tools中检查React的组件层次结构。

    这是React开发中最常见的扩展插件,并且是React开发人员可以用来调试其应用程序的最有用的工具之一。

    9. Bit

    通过Bit可以看到数以千计的开源组件,并允许还可以使用它们来构建项目。

    列表中有很多很多React组件可供咱们使用,包括选项卡,按钮,图表,表格,导航栏,下拉列表,加载微调器,日期选择器,面包屑,图标,布局等。

    10. Storybook

    Storybook 是一个轻松地构建UI组件的库。该工具启动一个实时开发服务器,支持开箱即用的热重载,你可以在其中独立地实时开发React组件。

    这足以作为普通文档页面:

    11. React Sight

    你有没有想过你的应用程序在流程图中的样子? React Sight允许你通过展示整个应用程序的实时组件层次结构树来可视化React应用程序。

    它还支持react-routerRedux以及React Fiber

    使用此工具,您可以将鼠标悬停在节点上,这些节点是指向与树中组件直接相关的组件的链接。

    如果在查看结果时遇到问题,可以在地址栏中输入chrome:extensions ,查找“React Sight”框,然后单击“Allow access to file URLs”开关,如下所示:

    12. React Cosmos

    React Cosmos是一个用于创建可重用React组件的开发工具。

    它扫描项目中的组件,并使你能够:

    • 通过 props,context和state任意组合来渲染组件。
    • 模拟每个外部依赖项(API响应、localStorage等)。
    • 查看应用程序状态在与运行实例交互时的实时演变。

    13. CodeSandbox

    CodeSandbox一个在线编辑器,可以在上面创建Web应用程序并实行运行。

    CodeSandbox 最初只在早期阶段支持React,但它们现在已经扩展到VueAngular等库的其他入门模板。

    他们还支持使用常见的静态站点生成器(如GatsbyNext.js)创建项目来启动React Web项目。

    14. React Bits

    React Bits是一个React模式、技术、技巧和技巧的集合,所有这些都以类似于在线文档的格式编写,你可以在同一个选项卡上快速访问不同的设计模式和技术、反模式、样式、UX变体以及其他与React相关的有用材料。

    GitHub repo,目前有10083颗星星。

    15. folderize

    folderize是一个VS Code 扩展。 它允许您将组件文件转换为组件文件夹结构。 React 组件仍然是一个组件,只是转换为一个目录。

    例如,假设正在创建一个React组件,该组件将文件作为props来显示有用的信息,如元数据

    元数据组件的逻辑占用了大量的行,因此咱们决定将其拆分为单独的文件。 但是,当这样做时,咱们就有两个相互关联的文件。

    所以,就有有一个大概如下所示的目录:

    咱们可能想要将FileView.jsfilemetada.js抽象到目录结构中,就像Apple一样,尤其是考虑添加更多与FileScanner.js等文件相关的组件时。

    这就是folderize为咱们所做的,这样组件们就可以得到一个类似的结构

    16. React Starter Projects

    React starter projects 是一个依赖库列表,可以在上面快速你需要要的依赖库的名称并可以跳转对应的 github 上。

    一旦看到一个你喜欢的入门项目,你就可以简单地克隆这个库,并根据你的需要进行修改。

    但是,并不是所有的依赖库都是通过克隆使用,因为其中一些库需要通过安装形式,才能成为项目的依赖项。

    17. Highlight Updates

    这可能是开发工具包中最重要的工具。 Highlight UpdatesReact DevTools扩展的一个特性,可以查看页面中的哪些组件正在不必要地重新渲染。

    它可以帮助你在开发页面时是更容易发现一些性能问题,因为它们会使用橙色或红色对严重的重新渲染问题进行着色。

    18. React Diff Viewer

    React Diff Viewer是一个简单而美观的文本差异对比工具 这支持分割视图,内嵌视图,字符差异,线条突出显示等功能。

    19. JS.coach

    JS.coach 是我最常用来与 React 有需要的库的网站。从这个页面可以找到需要的任何东西。

    它快速、简单、不断更新,并且总是能给我所有项目所需的结果。最近还添加了React VR,非常棒。

    20. Awesome React

    Awesome React开源库是一个与React相关的很棒的列表。

    我可能会忘记其他网站并单独从这个链接学习React。 因为可以在此找到批量有用的资源,这些资源肯定会帮助我们构建出色的React应用程序!

    21. Proton Native

    Proton Native为咱们提供了一个React环境来构建跨平台的本机桌面应用程序。

    它是Electron的替代产品,具有一些简洁的功能,包括:

    • 与React Native语法相同。

    • 适用于现有的React库,例如 Redux。

    • 兼容所有正常的 Node.js 包。

    代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

    交流

    干货系列文章汇总如下,觉得不错点个Star,欢迎 加群 互相学习。

    github.com/qq449245884…

    我是小智,公众号「大迁世界」作者,对前端技术保持学习爱好者。我会经常分享自己所学所看的干货,在进阶的路上,共勉!

    关注公众号,后台回复福利,即可看到福利,你懂的。

    转载于:https://juejin.im/post/5d50a99cf265da03e61b0271

    展开全文
  • ReactJS

    2017-03-19 11:08:45
    自从接触了ReactJSReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略 ReactJS的风采吧~~ 章有点长,耐心读完,你会有很大收获哦~一、ReactJS简介React 起源于 Facebook 的内部...

    现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略
    ReactJS的风采吧~~ 章有点长,耐心读完,你会有很大收获哦~

    一、ReactJS简介

    React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。

    ReactJS官网地址:http://facebook.github.io/react/

    Github地址:https://github.com/facebook/react

    二、对ReactJS的认识及ReactJS的优点

    首先,对于React,有一些认识误区,这里先总结一下:

    React不是一个完整的MVC框架,最多可以认为是MVC中的V(View),甚至React并不非常认可MVC开发模式;
    React的服务器端Render能力只能算是一个锦上添花的功能,并不是其核心出发点,事实上React官方站点几乎没有提及其在服务器端的应用;
    有人拿React和Web Component相提并论,但两者并不是完全的竞争关系,你完全可以用React去开发一个真正的Web Component;
    React不是一个新的模板语言,JSX只是一个表象,没有JSX的React也能工作。
    1、ReactJS的背景和原理

    在Web开发中,我们总需要将变化的数据实时反应到UI上,这时就需要对DOM进行操作。而复杂或频繁的DOM操作通常是性能瓶颈产生的原因(如何进行高性能的复杂DOM操作通常是衡量一个前端开发人员技能的重要指标)。React为此引入了虚拟DOM(Virtual DOM)的机制:在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行,每当数据变化时,React都会重新构建整个DOM树,然后React将当前整个DOM树和上一次的DOM树进行对比,得到DOM结构的区别,然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新,在一个事件循环(Event Loop)内的两次数据变化会被合并,例如你连续的先将节点内容从A变成B,然后又从B变成A,React会认为UI不发生任何变化,而如果通过手动控制,这种逻辑通常是极其复杂的。尽管每一次都需要构造完整的虚拟DOM树,但是因为虚拟DOM是内存数据,性能是极高的,而对实际DOM进行操作的仅仅是Diff部分,因而能达到提高性能的目的。这样,在保证性能的同时,开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素,而只需要关心在任意一个数据状态下,整个界面是如何Render的。

    如果你像在90年代那样写过服务器端Render的纯Web页面那么应该知道,服务器端所要做的就是根据数据Render出HTML送到浏览器端。如果这时因为用户的一个点击需要改变某个状态文字,那么也是通过刷新整个页面来完成的。服务器端并不需要知道是哪一小段HTML发生了变化,而只需要根据数据刷新整个页面。换句话说,任何UI的变化都是通过整体刷新来完成的。而React将这种开发模式以高性能的方式带到了前端,每做一点界面的更新,你都可以认为刷新了整个页面。至于如何进行局部更新以保证性能,则是React框架要完成的事情。

    借用Facebook介绍React的视频中聊天应用的例子,当一条新的消息过来时,传统开发的思路如上图,你的开发过程需要知道哪条数据过来了,如何将新的DOM结点添加到当前DOM树上;而基于React的开发思路如下图,你永远只需要关心数据整体,两次数据之间的UI如何变化,则完全交给框架去做。可以看到,使用React大大降低了逻辑复杂性,意味着开发难度降低,可能产生Bug的机会也更少。

    2、组件化

    虚拟DOM(virtual-dom)不仅带来了简单的UI开发逻辑,同时也带来了组件化开发的思想,所谓组件,即封装起来的具有独立功能的UI部件。React推荐以组件的方式去重新思考UI构成,将UI上每一个功能相对独立的模块定义成组件,然后将小的组件通过组合或者嵌套的方式构成大的组件,最终完成整体UI的构建。例如,Facebook的instagram.com整站都采用了React来开发,整个页面就是一个大的组件,其中包含了嵌套的大量其它组件,大家有兴趣可以看下它背后的代码。

    如果说MVC的思想让你做到视图-数据-控制器的分离,那么组件化的思考方式则是带来了UI功能模块之间的分离。我们通过一个典型的Blog评论界面来看MVC和组件化开发思路的区别。

    对于MVC开发模式来说,开发者将三者定义成不同的类,实现了表现,数据,控制的分离。开发者更多的是从技术的角度来对UI进行拆分,实现松耦合。

    对于React而言,则完全是一个新的思路,开发者从功能的角度出发,将UI分成不同的组件,每个组件都独立封装。

    在React中,你按照界面模块自然划分的方式来组织和编写你的代码,对于评论界面而言,整个UI是一个通过小组件构成的大组件,每个组件只关心自己部分的逻辑,彼此独立。

    072132381261891600.jpg

    React认为一个组件应该具有如下特征:

    (1)可组合(Composeable):一个组件易于和其它组件一起使用,或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件,那么说父组件拥有(own)它创建的子组件,通过这个特性,一个复杂的UI可以拆分成多个简单的UI组件;

    (2)可重用(Reusable):每个组件都是具有独立功能的,它可以被使用在多个UI场景;

    (3)可维护(Maintainable):每个小的组件仅仅包含自身的逻辑,更容易被理解和维护;

    三、下载ReactJS,编写Hello,world

    ReactJs下载非常简单,为了方便大家下载,这里再一次给出下载地址(链接),下载完成后,我么看到的是一个压缩包。解压后,我们新建一个html文件,引用react.js和JSXTransformer.js这两个js文件。html模板如下(js路径改成自己的):

    QQ截图20150721110651.png

    这里大家可能会奇怪,为什么script的type是text/jsx,这是因为 React 独有的 JSX 语法,跟 JavaScript 不兼容。凡是使用 JSX 的地方,都要加上 type=”text/jsx” 。 其次,React 提供两个库: react.js 和 JSXTransformer.js ,它们必须首先加载。其中,JSXTransformer.js 的作用是将 JSX 语法转为 JavaScript 语法。这一步很消耗时间,实际上线的时候,应该将它放到服务器完成。

    到这里我们就可以开始编写代码了,首先我们先来认识一下ReactJs里面的React.render方法:

    React.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点。

    下面我们在script标签里面编写代码,来输出Hello,world,代码如下:

    QQ截图20150721111143.png

    这里需要注意的是,react并不依赖jQuery,当然我们可以使用jQuery,但是render里面第二个参数必须使用JavaScript原生的getElementByID方法,不能使用jQuery来选取DOM节点。

    然后,在浏览器打开这个页面,就可以看到浏览器显示一个大大的Hello,world,因为我们用了

    标签。
    到这里,恭喜,你已经步入了ReactJS的大门下面,让我们来进一步学习ReactJs吧

    四、Jsx语法

    HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的语法,它允许 HTML 与 JavaScript 的混写,了解过AngularJs的看到下面的代码一定会感觉很熟悉的,我们来看代码:

    QQ截图20150721111531.png

    这里我们声明了一个names数组,然后遍历在前面加上Hello,输出到DOM中,输出结果如下:

    QQ截图20150721111639.png

    JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组,则会展开这个数组的所有成员,代码如下:

    QQ截图20150721111724.png

    显示结果如下:

    QQ截图20150721111738.png

    这里的星号只是做标识用的,大家不要被迷惑了~~

    你看到这里,说明你对React还是蛮感兴趣的,恭喜你,坚持下来了,那么下面,我们开始学习React里面的”真功夫”了~~ Are you ready?

    五、ReactJS组件

    1、组件属性

    前面说了,ReactJS是基于组件化的开发,下面我们开始来学习ReactJS里面的组件,React 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件。React.createClass 方法就用于生成一个组件类。

    下面,我们来编写第一个组件Greet,有一个name属性,然后输出hello + name的值,代码如下:

    QQ截图20150721111858.png

    看到这段代码,接触过AngularJS的朋友们是不是有一种熟悉的感觉,不过这里有几点需要注意:

    1)获取属性的值用的是this.props.属性名

    2)创建的组件名称首字母必须大写。

    3)为元素添加css的class时,要用className。

    4)组件的style属性的设置方式也值得注意,要写成style={{width: this.state.witdh}}。

    2、组件状态

    组件免不了要与用户互动,React 的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI 。下面我们来编写一个小例子,一个文本框和一个button,通过点击button可以改变文本框的编辑状态,禁止编辑和允许编辑。通过这个例子来理解ReactJS的状态机制。先看代码:

    QQ截图20150721112014.png

    这里,我们又使用到了一个方法getInitialState,这个函数在组件初始化的时候执行,必需返回NULL或者一个对象。这里我们可以通过this.state.属性名来访问属性值,这里我们将enable这个值跟input的disabled绑定,当要修改这个属性值时,要使用setState方法。我们声明handleClick方法,来绑定到button上面,实现改变state.enable的值。效果如下:

    072305421429007.gif

    原理分析:

    当用户点击组件,导致状态变化,this.setState 方法就修改状态值,每次修改以后,自动调用 this.render 方法,再次渲染组件。

    这里值得注意的几点如下:

    1)getInitialState函数必须有返回值,可以是NULL或者一个对象。

    2)访问state的方法是this.state.属性名。

    3)变量用{}包裹,不需要再加双引号。

    3、组件的生命周期

    组件的生命周期分成三个状态:

    Mounting:已插入真实 DOM
    Updating:正在被重新渲染
    Unmounting:已移出真实 DOM
    React 为每个状态都提供了两种处理函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用,三种状态共计五种处理函数。

    componentWillMount()
    componentDidMount()
    componentWillUpdate(object nextProps, object nextState)
    componentDidUpdate(object prevProps, object prevState)
    componentWillUnmount()
    此外,React 还提供两种特殊状态的处理函数。

    componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用
    shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用
    下面来看一个例子:

    QQ截图20150721112254.png

    上面代码在hello组件加载以后,通过 componentDidMount 方法设置一个定时器,每隔100毫秒,就重新设置组件的透明度,从而引发重新渲染。

    4、组件的嵌套

    React是基于组件化的开发,那么组件化开发最大的优点是什么?毫无疑问,当然是复用,下面我们来看看React中到底是如何实现组件的复用的,这里我们还写一个例子来说吧,代码如下:

    QQ截图20150721112325.png

    这里我们创建了一个Search组件,然后又创建了一个Page组件,然后我们在Page组件中调用Search组件,并且调用了两次,这里我们通过属性searchType传入值,最终显示结果如图:

    六、ReactJS小结

    关于ReactJS今天就先学习到这里了,下面来总结一下,主要有以下几点:

    1、ReactJs是基于组件化的开发,所以最终你的页面应该是由若干个小组件组成的大组件。

    2、可以通过属性,将值传递到组件内部,同理也可以通过属性将内部的结果传递到父级组件(留给大家研究);要对某些值的变化做DOM操作的,要把这些值放到state中。

    3、为组件添加外部css样式时,类名应该写成className而不是class;添加内部样式时,应该是style={{opacity: this.state.opacity}}而不是style=”opacity:{this.state.opacity};”。

    4、组件名称首字母必须大写。

    5、变量名用{}包裹,且不能加双引号。

    展开全文
  • React-开发工具

    2016-03-23 11:41:02
    React使用了若干的抽象层来帮助你更轻松地开发组件、推导程序状态。然后调试构建及分发应应用时,这样设计就会产生负面影响了。 幸运的是,我们拥有一些非常好的开发工具能在开发及构建过程中为我们提供帮助。在...
  • 自从接触了ReactJSReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略 ReactJS的风采吧~~ 章有点长,耐心读完,你会有很大收获哦~ 一、ReactJS简介 React 起源于 Facebook ...
  • 不知道什么原因,有的时候,我从Github上把ReactJS的代下载下来,然后atom或者Sublime打开的时候,其没有被格式化,比如下面的样子:有的时候真的很无奈,突然想到,以前格式化JSON数据的时候,可以找一个在线网站...
  • 自从接触了ReactJSReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略 ReactJS的风采吧~~ 章有点长,耐心读完,你会有很大收获哦~ 一、ReactJS简介 React 起源于 ...
  • 上篇文章中了流行的前端UI几大框架,发现大部分评价都是Vue的UI组件库,从评论中得知漏掉了很多,也有人问React ui,自己就搜索总结下适应于ReactJS的UI组件库。 一.Material-UI   Material-UI是一款React...
  • ReactJs 模块编译

    2015-09-28 16:29:06
    ReactJS模块时,渲染的结构在js里就是这样来。 html语法js肯定识别不到。reactjs在执行时会编译标签。 编译后的标签有助于了解结果。 npm install -g react-tools //安装工具 cd 到项目目录 jsx --watch...
  • reactjs源码分析

    2015-09-16 00:31:04
    前端的发展特别快,经历过jQuery一统天下的工具库时代后,现在各种框架又开始百家争鸣了。angular,ember,backbone,vue,avalon,ploymer还有reactjs,作为一个前端真是稍不留神就感觉要被淘汰了,就在去年大家还...
  • ReactJS 知识简介

    2015-09-20 14:23:20
    自从接触了ReactJSReactJs的虚拟DOM(Virtual DOM)和组件化的开发  一、ReactJS简介  React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己一套,...
  • Reactjs源码分析

    2018-03-28 09:53:12
    前端的发展特别快,经历过jQuery一统天下的工具库时代后,现在各种框架又开始百家争鸣了。angular,ember,backbone,vue,avalon,ploymer还有reactjs,作为一个前端真是稍不留神就感觉要被淘汰了,就在去年大家还...
  • ReactJS好文分享
  • JS工具

    2018-06-29 11:11:27
    js 工具类/** * 判断指定名称的复选框是否被选中 * * @param {} * chname复选框名称 */function chkCheckCha(chname) { var obj = jQuery("[name='" + chname + "']"); var isCheck = ...
  • Reactjs+Redux 简介

    2017-09-28 16:55:43
    ReactwhatReact 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好,就在2013年5月开源了。React...
  • ReactJs入门教程

    2017-08-22 11:42:22
    自从接触了ReactJSReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略 ReactJS的风采吧~~ 章有点长,耐心读完,你会有很大收获哦~ 一、ReactJS简介 react 起源于 ...
  • 我们一定知道,React有两个视图,一个虚拟机DOM,也就是我们创建的Component, 另一个就是渲染到页面中的view,这也就导致我们调试过程中会有一定的障碍,所以我们尝试一下:这是一个全新的调试工具,名字是New React...
  • 对于React而言,组件的属性在程序中,我们多用this.props获取,讲到这里,可能有些人还不清楚什么是组件的属性呢,下面我们来看段代码:var Greet = React.createClass({ render: function() { return <h1>Hello {...
1 2 3 4 5 ... 20
收藏数 2,870
精华内容 1,148