React.js Repository

React.js Starter Kits

Client-Side React.js Starter Kits

Full-Stack React.js Starter Kit

Text Editors

Atom: language-babel – a special package of Atom text editor focused on JavaScript syntax, particularly, JSX which is a JavaScript extension for React.js. It supports all versions of JavaScript and includes automated editing functions for JSX

WebStorm – a powerful IDE for JavaScript app development with advanced support for React, Angular, Vue.js, and Meteor. It comes with embedded inspections to highlight issues and suggest fixes on-the-fly, unified UI to work with the most common Version Control Systems, integrated terminal, and rich plugin ecosystem

Visual Studio Code – a functional code editor that also offers useful features for the overall edit-create-debug workflow. It includes smart completions, built-in debugging option, and integrated Git commands to commit directly from the editor

Sublime Text: babel-sublime – syntax definitions for JavaScript with the JSX extensions for React.js

UI Components

Material UI – is one early set of React.js components that actualize Material Design developed by Google. The customizable UI kit includes all necessary components for interface design with minimal inputting

Belle – a package containing many reusable components, such as toggle switches, combo boxes, buttons, text fields, etc. The Belle components perform equally well in desktop and mobile versions of the application

Elemental UI – a toolkit for adding spinners, buttons, modal windows and other UI components

Login Components

UI Widgets

Infinite scroll – loads the UI content for infinite scroll in applications build with React.js

Toggle switches and checkboxes – embeds toggle switches and checkboxes

Slider – adds a slider element to an app screen

Color picker – integrates a color picker from other services, such as Photoshop or Sketch

React video – renders a placeholder where a YouTube or Vimeo video will be later loaded

React sidebar – creates a sidebar with a number of managed features, like docking, overlaying the main content, hiding a sidebar with a touch, etc.

React images – displays an array of images on the application screen

React tabs – renders tabs and their navigation elements

Routing Tools

React Router – a complete set of components adding routing to the entire React.js application

Aviator – a router for single-page applications

Component Router – a routing tool for applications that consist of multiple independent components to be synchronized separately

Build Tools

Create React App – this solution is highly recommended by the Facebook development community. This is the official tool for building React.js applications requiring no complicated configuration because the tool is already pre-configured. You only need to create your app and deploy, then the tool will update it whenever changes are made to the source code

Webpack – another common build tool for JavaScript-based applications. Webpack is a static module bundler to package modules used within application into bundles, thus turning the code into an executable format. The resulting JavaScript can be easily processed by a browser. Webpack is also capable of following the source code modifications and updating the corresponding modules to ensure that the changes are shown properly

Babel – a tool for transforming JavaScript source code into JavaScript which is understandable by a browser. With Babel, you can write your code in the latest version of JavaScript which will be converted into a browser-readable format

Debugging Tools

React Developer Tools is high on the list of React.js debugging tools. It is a toolkit developed by Facebook specially for inspecting React.js components, their hierarchy, properties, and state

React Inspector allows debugging React.js applications in a way similar to Browser DevTools

Testing Tools

Jest – a testing utility created and used by Facebook to test JavaScript code. Jest perfectly fits Facebook's “no configuration” principle and is a complete out-of-the-box tool for reliable JavaScript testing

Enzyme – a solution for testing React.js applications. It requires some configuration before it can be used, however, ensures easy testing of the performance of React.js components

React-unit – a lightweight library for running unit tests of React.js code

Final Thoughts

Whenever there is a discussion on frontend development environments, the name of React.js is sure to come up sooner or later. This JavaScript library fairly holds one of the top ranks in the JS framework popularity ratings . Moreover, it is often the platform of choice for projects that are in want of a robust and scalable frontend.React.js is a product of Facebook which, naturally, uses it as the frontend environment, both for Facebook and Instagram. This fact also helps React.js to score points as a trusted and reliable framework With such popularity of React.js, it is no wonder that the development community has put together all sorts of React developer tools to ease the work of the colleagues in full-stack React.js development.There are dozens of well-tried tools and components which can be used to create React.js environments. Our React developers have tried and tested most of them and in this article we'll look at the most popular ones.React.js is an open-source library, and its source code can be found in the React repository on Github.You can look at the existing React.js code or contribute to it. Other Github repositories contain all sorts of reusable React.js components which you can apply in your project.If you are seeking ways to create your frontend quickly and take advantage of the tools which have been already tested by the development community, there are a lot of React.js basic starter kits available. In general, all starter kits are project templates complete with the code and some sample data. A starter kit project is ready to be run, however, you can enhance it with custom features and adornments.Depending on the main purpose, there are client-side starter kits helping you develop only the client side of your application, and full-stack starter kits to create complete React.js applications.Within each group, you will find lots of different starter kits using a certain development technology.You can choose from dozens of React.js starter kits aimed at making client-side development easier. Check, for example, the React Static Boilerplate which is a great platform for creating standalone applications in serverless architectures. The kit uses the state-of-the-art technologies and allows building complete functional applications at a lower cost due to the absence of servers.If you prefer building your React.js applications with Redux, try the React Redux Workflow Boilerplate which includes all necessary components for making a complete project. We'd also recommend using Redux-Saga to handle side effects or Redux-Thunk middleware to get support for asynchronous actions.To build both frontend and backend of your application and to ensure smooth and reliable integration with React.js look at full-stack starter kits, such as React Starter Kit , an isomorphic boilerplate for web application development Or, check React, Universally – a kit containing all tools needed to build a complete React project. It also includes a small «demo» project allowing you to expand its architecture and customize it according to your requirements.Before engaging in application engineering, select a suitable text editor to create React.js code and support its specifics. You can find brief descriptions of the recommended solutions below.React.js is a framework for building user interfaces, so one of its primary tasks is creating UI components. The React.js community has put together quite a number of reusable UI components which you can include in your app instead of writing them from scratch. Once you integrate them into your project, they can be used anywhere within your application.Open-source platforms offer both comprehensive packages containing all sorts of UI components and resources dedicated to a certain type of UI elements. If you are looking for multiple UI components in one place, check out the following resources:At the same time, many developers share their know-how in building separate UI components, so if you are looking for a particular widget, check the list below.It is always a good practice to enable login with a social media account or any other service. The available React.js tools include ready-made login modules for Facebook and Google which can be easily embedded into your project.Open-source React.js tools include an overall collection of solutions for adding various widgets to your UI – sliders, scrolls, selectors, etc. Take a look at the following resources for the reusable components to increase your app users' engagement This is just a short list of reusable React.js components to take advantage of. You can also browse the Github or npm resources for more shared elements, should you need them.In application development, the routing functionality ensures synchronization between the application URL and the UI returned when that URL is accessed. To enable smooth routing within your application, the following options can be used:React.js applications require special tools automating the build flows to compile the source code and pack it, creating an executable application. Small applications can be compiled manually, while large software solutions require automation of the build process to ensure necessary performance. There are a lot of JavaScript build tools , however, the React.js developers recommend the following ones:Debugging is a time-consuming but necessary process of checking each line of code for issues which may cause application failures. For complex applications, automated debugging is essential to the thorough inspection of the source code in a relatively short time.Before pushing your code to production, you need to verify that it is working as expected. For that purpose, you need to run tests – unit tests, functional tests and integration tests. If you browse the available collections of open-source code, you will find quite a number of testing tools covering all aspects of application testing.With this article, we have barely scratched the surface of the huge pile of tools for React.js developers available as open-source. According to various surveys , JavaScript is the most popular and loved programming language nowadays, so it is no wonder that JS-related tools are offered in such great abundance and new ones are added on a regular basis.The article you have just read gives only a couple of examples of tools for each functional category, however, you can use our suggestions to put together your development kit for React.js. At the same time, each project, application, and development team are unique, and you can surely find other tools and utilities suiting your purposes perfectly. And, of course, stay tuned for the latest news from the JS universe, as each day brings something new.