React is also a tool that can replace MVC frameworks, like Angular or Backbone, with a clearer structure and focus on performance optimization. In this article, we will introduce you to a set of developer toolskit to help you set foot in React programming ground.
Facebook gives developers a detailed set of key concepts in React. Besides documents, you can also find a lot of instructions for this tool, and one Private forum for React programmers. Since this document is open source, you can edit them if you want.
In React Github repo, you can always preview React source code whenever you need it. If you want to keep up to date with the current state of the tool’s development, you can also look at issues, milestones, and latest pull requests. If “know how”, you can also study the Trouble Shooting Guide a bit.
If you want to try React quickly, you can start with this interactive “Hello World” demo on Codepen. Demo includes all the necessary resources and even starter code. With the introduction of Babel , you can use both ECMAScript 6 and JSX syntax. Just fork this pen, and you can work straight through a circuit without having to manually set up the environment.
The React Starter Kit is isomorphic web app boilerplate developed from Node.js, Express, GraphQL, React, and a variety of other web development tools, like Webpack, Babel, and Browsersync. The tool gives you the same technology platform for frontend stack Facebook and lets you jump right into programming React full-stack without having too much trouble.
This is a great playground for those who are practicing with React. React JSFiddle integration is hosted on JSFiddle, and there are two versions: one with JSX and one without JSX , choose which version is right for you.
Can quickly create style guide for your React project with this easy-to-use React style guide generator. You just add a bit of doc to the file, and the generator will take care of it all. The tool comes with detailed file readme.
Belle is the React component library that equips you with a set of React components that can be applied to your project, like “Button”, “Card”, “Spinner”, “Toggle”, “Rating”, various components, … Customized components, and works on both mobile and desktop.
If you don’t use other people’s component libraries but want to build your own, you should try React StoryBook , UI development environment for React components. Storybook allows you to develop components interactively. The tool comes with elaborate documentation , and you can start the development process in the Storybook Hub .
React-Bootstrap integrates Bootstrap 3 powerful frontend framework into React. The development team basically rebuilt Bootstrap components with React.js. Since then, the development of base code is cleaner, less repetitive, and higher performance.
Note that this repo is still under development, and the API will change in the future. To see the current development situation, check out the project roadmap .
React DevTools for Chrome is an extension for Chrome Developer Tools and allows you to check the level of the component. Facebook built tool with an effort to support the new React application developer community. You simply need to add the tool as an extension to your browser. Source code of source code is continuously updated on Github.
This is the React Developer Tools set by Facebook specifically for Firefox, this add-on is similar to the utility (near) with the same name for Chrome.
With Atom React this package, you can add React support to your Atom code editor. The tool has features to highlight syntax, autocomplete, code snippets, convert HTML to JSX, …
There are quite a few good courses and keep teaching you how to program with React. However, with React.js Fundamentals key, you will learn completely for free. The course consists of 12 lessons, starting with basics of React, with a science curriculum covering almost all important knowledge.