自从Facebook在2013年首次发布该库以来， React.js的知名度一直在Swift增长 。它是Github上第五个最经常出演的开源项目 ，面向React开发人员的招聘广告也在大量增加。 React是用于构建用户界面的轻量级JavaScript框架 -最突出的示例是Facebook和Instagram。

React 为MVC框架 （例如Angular或Backbone）提供了一种替代方案 ，其结构更加简单明了，并且专注于性能优化 。 由于React肯定会在未来几年中定义Web开发格局，因此在本文中，我们将为您提供一个开发人员工具包，以帮助您踏入React开发领域。

Facebook为开发人员提供了有关React主要概念的 详细文档 。 除文档外，您还可以在此处找到有关如何使用React 构建交互式井字游戏的绝佳教程，以及面向React开发人员的讨论论坛 。 由于文档是开源的 ，因此您甚至可以根据需要对其进行编辑。

在React Github Repo中 ，您可以在需要时检出React的源代码 。 如果您想随时了解当前的开发状态，还可以查看问题 ， 里程碑和最新的请求 。 如果您被卡住了，稍微学习一下《 故障排除指南》也是个好主意。

如果您想快速尝试React，可以从Codepen上的这个“ Hello World”交互式演示开始。 它包括所有必需的资产以及启动程序代码 。 随着Babel的启用，您可以同时使用ECMAScript 6和JSX语法 。 只需拨动这支笔，就可以继续进行，而无需自己设置整个环境。

如果您想要一个可以练习React的地方，这是一个很棒的在线游乐场 。 它托管在JSFiddle上 ，有两个版本 ： 一个带有JSX ， 一个没有JSX ，请选择您更喜欢的一个。

Create React App是使用React.js构建应用程序的样板。 它配备了少数Web开发工具，例如Webpack，Babel和Browsersync。 这些工具是开箱即用的，因此您可以立即开始工作，而不必为工具配置感到困惑。 它为您提供Facebook使用的相同前端堆栈，并允许您轻松进行全堆栈React开发 。

ReactCSS使得可以在JavaScript中添加内联CSS样式 。 ReactCSS带有对React， Redux ， React Native （使用React构建本地移动应用程序的框架），自动前缀，悬停，伪元素和媒体查询的支持。 您可以使用npm快速安装它 。

React Styleguidist允许您快速为React.js应用程序生成样式指南 。 只需在MDX中编写组件的README.md，然后生成器将处理其余的工作。 它也可以与Create React App一起使用。

Belle是一个React组件库 ，为您提供了可能要在项目中使用的一组React组件 ，例如“按钮”，“卡片”，“微调”，“切换”，“评分”，其他表单组件，和别的。 这些组件既可以在移动设备上运行 ，也可以在台式机上运行 ，并且都可以自定义 。

Belle 并不是唯一的React组件库 ，您可以在Github上找到其他很棒的 库 ，例如React窗口小部件或Elemental 。

如果您不想使用别人的组件库，但是想构建自己的组件库，那么值得尝试一下React StoryBook ，它是React组件的UI开发环境 。 使用Storybook可以交互式地开发组件 。 它具有详尽的文档 ，您可以在Storybook Hub中 开始开发 。

React-Bootstrap将React与流行的Bootstrap 3前端框架集成在一起。 它的开发人员基本上使用React.js重建了Bootstrap组件。 这样可以使代码库更简洁，重复次数更少， 性能更高 。

请注意，由于仓库正在积极开发中，因此API将来会更改。 对于当前的开发状态 ，请查看该项目的路线图 。

React DevTools for Chrome是Chrome开发人员工具的扩展，可让您检查组件层次结构 。 它是由Facebook创建的，旨在帮助开发人员社区构建新的React应用程序。 您只需将其作为Chrome扩展程序添加到浏览器即可。 您也可以在Github上浏览相关的源代码 。

您可以使用此Atom React软件包将React支持添加到您的Atom代码编辑器中 。 它带有语法高亮，自动完成，代码段，HTML到JSX转换以及其他一些有用的功能 ， 这些功能可以极大地促进React开发。

您可以在许多优秀的课程中学习React.js开发，Egghead的其中一门课程提供有关该主题的免费优质材料。 本课程涵盖了React.js的非常基本的概念，您将学习如何创建基本的React.js组件，JSX，Props和PropTypes以及状态。 如果您刚开始使用React.js，这是一个很好的资源。

Egghead.io的另一个很棒的免费视频课程。 该视频课程由React.js的关键维护者之一Dan Abramov带来，它将教您如何使用Redux在应用程序中的React.js组件中管理应用程序状态或数据。 这可以补充您的React.js技能。

使用Storybook可以为React.js组件创建样式指南，提供使用组件的主要参考资料和文档。 虽然我们在此列表中提到了Storybook，但该视频课程将帮助您进一步详细使用Storybook。 Egghead.io还免费提供此视频课程。

翻译自: https://www.hongkiat.com/blog/react-js-web-developers-toolkit/