React.js: web开发者的14个工具和资源

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的基本知识和一些重要的概念。


  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React是一个用于构建用户界面的JavaScript库。它被广泛应用于Web应用程序开发中,特别适用于创建大型和复杂的应用程序。React的核心思想是组件化,将UI分解成独立可复用的组件,通过组件的组合和嵌套来构建整个应用程序。 React采用一种称为虚拟DOM(Virtual DOM)的机制来提高性能。虚拟DOM是一个轻量级的JavaScript对象树,它可以代表真实的DOM结构。当组件的状态发生变化时,React会通过比较新旧虚拟DOM树的差异并更新只有真正需要改变的部分,避免了无必要的DOM操作,从而提高了性能。此外,React还通过使用合适的Diff算法来进行快速而高效的虚拟DOM更新。 React具有强大而灵活的生命周期方法,可以在组件的不同阶段进行逻辑处理和与外部数据交互。通过这些生命周期方法,开发者可以精确地控制组件的渲染和更新行为,实现更好的性能和用户体验。 此外,React还支持一种称为JSX的语法扩展。JSX允许开发者在JavaScript代码中直接编写类似HTML的标记,使得页面结构和组件的关系更加清晰和易于理解。 React作为一个开源项目,有着庞大的社区支持和活跃的生态系统。许多优秀的第三方库和工具如Redux、React Router等都与React紧密集成,帮助开发者更加高效地构建复杂的应用程序。 总之,React是一个非常强大和灵活的前端开发库,它提供了快速、高效和可维护的方式来构建用户界面。无论是开发单页应用、移动应用还是响应式Web应用,React都是一个理想的选择。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值