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

   <p>自从非死book在2013年发布了库之后，React.js正在快速被广大开发者所接受。它现在已经成为了GitHub上被收藏次数排名第5的开源项目，越来越多的企业正在寻找React.js开发者。本文为广大开发者介绍了14个工具和资源，助力web开发。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/1ec89249434c0ca3033452a7015c6d88.png"></p>    <p>自从 非死book 在 2013 年发布了库之后， <strong>React.js</strong> 正在快速被广大开发者所接受。它现在已经成为了 GitHub 上被收藏次数排名第 5 的开源项目，越来越多的企业正在寻找 React.js 开发者。</p>    <p>React 有着更简单易懂的架构，而且专注于性能优化，这使它代替了一些 MVC 框架，例如 Angular 和 Backbone 等。在未来几年内， React 一定还会继续发挥重要的作用。这篇文章中，我们总结了一些开发者工具，帮你更轻松的使用 React 。</p>    <p><a href="/misc/goto?guid=4958968605084997344" rel="nofollow,noindex"><strong><u>非死book</u> </strong> <u> 官方 </u> <strong> <u>React.js</u> </strong> <u> 文档 </u> </a></p>    <p>非死book 为开发者提供了详细的说明文档。除了文档之外，还有一个相信的指导说明，以及一个针对 React 开发者打造的线上论坛。而且这份文档为开源项目，你甚至可以对它进行编辑。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/dee98fcb17cbd4ee44d2a7cb1ce184d2.jpg"></p>    <p>React.js Github repo</p>    <p>在这个 repo 中，你可以查看 React 的源代码。如果你想关注它最新的状态，你也可以查看各种 issue 、里程碑以及最新的 pull request 。在遇到问题的时候，你还可以查看它的 <a href="/misc/goto?guid=4959736559934335245" rel="nofollow,noindex"> <strong>Trouble Shooting Guide</strong> </a> 。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/7faaf23f0ff7150fea49a40c52fd035d.jpg"></p>    <p>Hello World starter code</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/18097c93a5bf6db5933c357bed7dbf97.png"></p>    <p>如果你想快速的尝试一下 React ，你可以使用 Codepen 上的这个 <strong>“</strong> <strong>Hello World</strong> <strong>”</strong> 互动式 demo 。</p>    <p>React Starter Kit</p>    <p><strong>React Starter</strong> <strong>Kit</strong> 是一个使用了 Node.js 、 Express 、 GraphQL 、 React 和 Webpack 、 Babel 以及 Browsersync 等 web 开发工具打造的 web 应用模板。而且它还提供了和 非死book 一样的全段堆栈。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/4bff5e4a33ed0709bfaa5f735ed104e3.jpg"></p>    <p>ReactCSS</p>    <p><strong>ReactCSS</strong> 让你可以在 JavaScript 中添加 inline CSS 样式。 ReactCSS 支持 React 、 Redux 、 React Nativeautoprefixing 、 hover 、 pseudo-element 和 media 请求。你可以使用 npm 对其进行快速安装。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/ddf9d07720bdc2473a5a4fe897d1f138.jpg"></p>    <p>React JSFiddle integration (with and without JSX)</p>    <p>这是一个非常不错的 React 线上练习工具。它被寄存在 JSFiddle 上，而且拥有两个版本：一个带有 JSX ，一个没有 JSX ，你可以根据自己的喜好进行选择。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/fa1b2356cdd6d4cc4c84fbc2bede0c5c.jpg"></p>    <p>React style guide generator</p>    <p>使用这个简单的 React 样式指导生成器，你可以为你的 React 项目快速生成样式指导。你只需要给文件添加一些文档，之后生成器就会自动完成剩下的事情。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/742753dbc395f2b840e53947b14da2f1.jpg"></p>    <p>Belle configurable React components</p>    <p><strong>Belle</strong> 是一个 React 组件库，它为你提供了大量 React 组件，例如按钮、卡片等。这些组件支持桌面设备和移动设备，并且支持个性化。</p>    <p>除了 Belle 之外，你还可以找到其他一些 React 组件库，例如 <a href="/misc/goto?guid=4959736560017196715" rel="nofollow,noindex"> <strong>React widgets</strong> </a> 或是 <a href="/misc/goto?guid=4959736560096200645" rel="nofollow,noindex"> <strong>Elemental</strong> </a> 。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/52036ff867627f4a837f8365d2d0ebb2.jpg"></p>    <p>React Storybook UI Development Environment</p>    <p>如果你不想使用其他人做的组件库，你也可以自己做一个。你可以试试 <a href="/misc/goto?guid=4959736560185335965" rel="nofollow,noindex"> <strong>React StoryBook</strong> </a> ，这是 React 组件的 UI 开发环境。你可以使用它自己做互动式组件。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/db305f2f825cdc8edf28ff126a42dbf8.jpg"></p>    <p>React-Bootstrap</p>    <p><a href="/misc/goto?guid=4959617562318761016" rel="nofollow,noindex"><strong>React-Bootstrap</strong> </a> 整合了 React 和流行的 <a href="/misc/goto?guid=4958332662969681733" rel="nofollow,noindex"> <strong>Bootstrap 3</strong> </a> 前端框架。这个工具的开发者使用 React.js 重建了 Bootstrap 的组件。这样做的好处是减少了代码的重复，提高了 diamante 性能。</p>    <p>但是需要注意的是，这个 repo 目前还在开发当中，因此未来其 API 还将会发生变化。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/e1cbb0cfdbb94682a0cb82ae7b6d7f06.jpg"></p>    <p>React Developer Tools for Chrome</p>    <p><a href="/misc/goto?guid=4958966584826053678" rel="nofollow,noindex"><strong>React DevTools for Chrome</strong> </a> 是以个 Chrome 开发工具，开发方为 非死book 。你可以用它来查看组件架构。你只需要在 Chrome 浏览器中添加这个扩展就可以使用了。你也可以在 <a href="/misc/goto?guid=4958967466898774749" rel="nofollow,noindex">Github</a> 上查看它的源代码。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/5a09373e6d936af2641be78ac3127f69.jpg"></p>    <p>React Developer Tools for Firefox</p>    <p><strong>React Developer Tools</strong> 的 Firefox 版本。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/5d9f59466f87e89c2bdee58d4d4e8390.jpg"></p>    <p>React.js Package for Atom</p>    <p>使用这个工具，你可以让 Atom 代码编辑器也支持 React 。它包含代码高亮、自动补全、代码段、 HTML 向 JSX 转化等功能，</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/cfbbbd367221c5737e7dcb791e5ec709.jpg"></p>    <p><a href="/misc/goto?guid=4959736560386468841" rel="nofollow,noindex"><strong><u>React.js Fundamentals</u> </strong> <strong> <u>–</u> </strong> <strong> <u>free online course</u> </strong> </a></p>    <p>网络上有很多 React 课程， <a href="/misc/goto?guid=4959736560386468841" rel="nofollow,noindex"> <strong>React.js Fundamentals</strong> </a> 就是其中之一，而且完全免费。它共有 12 节课，帮你了解 React 的基本知识和一些重要的概念。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/547dd5c26e53e89fcc9bf824fdcb9bcd.jpg"></p>    <p> </p>    <p>来自：http://developer.51cto.com/art/201702/530404.htm</p>    <p> </p>