15个面向开发人员的React.js工具和资源

Z时代
2024-01-10
分类：综合

react

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

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

官方React.js文件

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

React.js Github回购

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

Hello World入门代码

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

React JSFiddle Playground（有和没有JSX）

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

创建React应用

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

ReactCSS

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

React Styleguidist

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

百丽React组件

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

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

DevTools插件也可用于Firefox浏览器，并且可以从Firefox插件页面安装。

用于Atom的React.js扩展

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

React入门指南

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