React offers an alternative for MVC frameworks, such as Angular or Backbone, with a more straightforward structure and a focus on performance optimization. As React will be surely defining the web development landscape in the coming years, in this article we would like to provide you with a developer toolkit to help you set foot in the realm of React development.
Facebook provides developers with a detailed documentation on the main concepts of React. Besides the docs, you can also find here a great tutorial on how to build an interactive tic-tac-toe game with React, and a discussion forum for React developers. As the docs are open-source, you can even edit them if you want.
If you want to give a quick try to React, you can start with this “Hello World” interactive demo on Codepen. It includes all the necessary assets and the starter code as well. As Babel is also on, you can use both ECMAScript 6 and the JSX syntax. Just fork this pen, and you can go ahead without having the set up the whole environment on your own.
The React Starter Kit is an isomorphic web app boilerplate built of Node.js, Express, GraphQL, React, and a handful web development tools, such as Webpack, Babel, and Browsersync. It provides you with the same frontend stack Facebook uses and allows you to jump into full-stack React development without too much hassle.
This is a great online playground if you want a place where you can start practicing React. It’s hosted on JSFiddle, and has two versions: one with JSX and one without JSX, choose whichever one you’re more comfortable with.
You can quickly generate a style guide for your React project with this easy-to-use React style guide generator. You only have to add a little documentation to your files, and the generator takes care of the rest. The tool comes with a detailed readme file.
Belle is a React component library that equips you with a set of React components you may want to use in your project, such as “Button”, “Card”, “Spinner”, “Toggle”, “Rating”, different form components, and others. The components work both on mobile and desktop, and they are customizable as well.
If you don’t want to use someone else’s component library but want to build your own, it’s worth giving a try to React StoryBook which is a UI development environment for React components. Storybook allows you to develop components interactively. It has an elaborate documentation, and you can get started with the development in the Storybook Hub.
React-Bootstrap integrates React with the popular Bootstrap 3 frontend framework. Its developers basically rebuilt Bootstrap components with React.js. This results in a cleaner code base with less repetition, and a higher performance.
Note that as the repo is under active development, the APIs will change in the future. For the current state of development, check out the roadmap of the project.
React DevTools for Chrome is an extension to Chrome Developer Tools and allows you to inspect component hierarchy. It was created by Facebook with the endeavour to assist the developer community in building new React apps. You can simply add it as a Chrome extension to your browser. You can browse the belonging source codeon Github as well.
You can add React support to your Atom code editor with this Atom React package. It comes with syntax highlighting, autocomplete, code snippets, HTML to JSX conversion, and some other useful features that can greatly facilitate React development.
There are many excellent & fairly inexpensive courses where you can learn React development, however you can enroll this React.js Fundamentals online course for completely free. It’s made up of 12 lessons, starts with the basics of React, and has a nice curriculum that covers all the important things.