15 React.js Tools & Resources for Developers

15 React.js Tools & Resources for Developers


The popularity of React.js has been rapidly growing since Facebook first released the library back in 2013. It’s the fifth most frequently starred open source project on Github, and job ads for React developers are also heavily on the rise. React is a lightweight JavaScript framework for building user interfaces — the most prominent examples are Facebook and Instagram.

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.

Official React.js Docs

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.

Official Facebook Docs

React.js Github Repo

In the React Github Repo, you can check out React’s source code whenever you need it. If you want to stay informed with the current state of development, you can also have a look at the issues, the milestones, and the latest pull requests. If you got stuck, it can also be a good idea to study the Trouble Shooting Guide a bit.

React.js Github Repo

Hello World Starter Code

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.

React JSFiddle Playground (with and without JSX)

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.

Create React App

The Create React App is an boilerplate to build an application with React.js. It’s equipped with a handful web development tools such as Webpack, Babel, and Browsersync. These tools work out-of-the-box, so you can start working immediately instead of befuddled with the tool configuration. It provides you with the same frontend stack Facebook uses and allows you to jump into full-stack React development without too much hassle.

Create React App website homepage

ReactCSS

ReactCSS makes it possible to add inline CSS styles in JavaScript. ReactCSS comes with support for React, Redux, React Native (a framework for building native mobile apps using React), autoprefixing, hover, pseudo-elements, and media queries. You can quickly install it with npm.

React CSS

React Styleguidist

React Styleguidist allows you can quickly generate a style guide for your React.js application. Simply write README.md of the component in MDX, and the generator will take care of the rest. It also works out-of-the-box with Create React App.

React Style Guide Generator

Belle React Components

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.

Belle is not the only React component library out there, you can find other great ones on Github, such as React widgets or Elemental.

Belle React Components

Storybook

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 Storybook

React-Bootstrap

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-Bootstrap

React DevTools

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 code on Github as well.

React DevTools for Chrome

The DevTools add-on is also available for the Firefox browser and it can be installed from the Firefox Add-on page.

React DevTools for Firefox

React.js Extension for Atom

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.

Atom React Support

Beginner’s Guide to React

There are many excellent courses where you can learn React.js development and Egghead’s one of which provides free quality materials on the topic. This course covers the very basic concept of React.js, you will learn how to create a basic React.js component, JSX, Props and PropTypes, and States. It’s a great source if you just get started with React.js.

React Beginner's guide video

Getting Started with Redux

Another great free video course from Egghead.io. Brought by Dan Abramov, one of the key maintainers of React.js, this video course will teach you how to use Redux to manage your application state or data across the React.js components in your application. This couse complement your React.js skill.

Redux video tutorial

Design Systems in Storybook

Storybook allows you to create styleguides of your React.js components providing a central reference and documentation to use the components. While we’ve mentioned Storybook on this list, this video course will help you further in details to use Storybook. Egghead.io also provides this video course for free.

Learn StoryBook video



Source link

Related Posts

Comments

comments