Jonathan Saring

@JonathanSaring

The React Developer Tools You Should Know in 2019

January 13th 2019

Useful tools to optimize your React workflow in 2019

React takes the lead into 2019

While the frontEnd world knew some turbulence in the past decade, React’s composable and extendable approach has proved itself viable and sustaining during the past couple of years. As it seems, 2019 will only mark another year of growth for React and it’s ecosystem, which has been growing rapidly.

This might be a good time to take a look at some of the best features, tools and libraries to introduce into your React workflow this year, to make the best of it. All of these are open source, so feel free to go ahead and give them a try.

Hopefully, these great tools can help speed your workflow and open the door to new capabilities when working in React in 2019. Feel free to comment, add your own suggestions and experience. For your convenience, I’ve divided these resources into categories, so feel free to review.

Sharing reusable components

Released early in 2018, Bit revolutionized the way we share and manage components with new abilities. It’s getting popular fast and for a reason.

Through Bit you can easily share the components from any project or library as a reusable collection, without any refactoring or code-changes. The components can then be discovered and used right off the cloud by you or other members of your team, much like pieces of Lego to build applications.

Components are made discoverable with a live playground, every component in tested in isolation presenting the results, and docs are automatically extracted. With a built-in component search and collections, this creates a component discoverability and collaboration experience like never before.

Components can be installed in any project using NPM and Yarn, and can even be imported with Bit itself so that you can develop them right from any project- and sync changes across your different applications.

Teams can share and collaborate over a component collection, and sync their components together to build new apps faster. Give it a try:

Component Libraries

While plenty of libraries are available to provide components in React, from community projects to enterprize-built libraries, coming 2019 some still seem to do the job. Here are some of the best, and you can find more below including ant-design, semantic-ui, elemental-ui, rebass and many others.

  • Extended list

Some of the finest: React Material-UI, Grommet 2.0, React Bootstrap, Reactstrap, Prime React, Elemental-UI, Semantic-UI & more.

Styling Components

In 2018 there’s been much discussion about styling components using methods that range from CSS in JS and styled-components to Sass, Less, CSS modules, Inline CSS and even projects like Stylable.

Down the line, it’s really a matter of personal preference and the needs of your application’s architecture, so the choice is yours. It seems like many teams still refrain from running straight to CSS in JS, and prefer to try more conventional methods first. You can find the full discussion here below, with a deeper review of pros and cons for every choice you make. Take a look.

State Management

A painful topic which was a great conversation (or brawl) starter in 2018. While Redux traditionally rules the DOM (got it?), the Store is now open for business (I did it again) and different tools are getting more common. Here you can find an in-depth review of the tools and differences.

Among the popular tools, you can find Unstated, as well as the re-rise of Mobx which incorporates React’s encapsulated-components paradigm. It also reviews the new Context-API which is a promising alternative to Redux.

Testing

The 2018 “State of JS” survey lists the most in-demand testing frameworks looking forward into 2019, with popular testing frameworks such as Jest, Mocha, Karma and more to make TDD simpler on the component level.

Here are a couple of useful and deep guides into testing React components with Jest & Enzyme, which is probably the best combination to bet on in the development of most React apps this year. Take a look.

  • When combined with Bit, every component can be tested individually in separation from the src repo, to make sure it’s really reusable anywhere.

Kick-Starters and Boilerplates

With the release of create-react-app 2.0 it seems like this React app boilerplate remains the most popular and recommended projects out there. However, it’s also worth taking a look at projects like React-Boilerplate and React Slingshot which provide an alternative for different use cases.

See section 5 of this article to get a look at the differences between them.

React Hooks and Context-API

While many new features were introduced to React in 2018, two are perhaps the most significant in terms of community discussion and potential. The first is React’s Context API which, after a long waiting period, is made official and comes into play as a potential replacement for Redux (and more). The second is React Hooks which lets you use state and other React features without writing a class, which contributes to managing states- and more. Take a look.

Context API

Hooks

Debugging

Well, not much is new here as React dev-tools and Redux dev-tools still get the job done quick and simple. React dev-tools extension allows you to inspect the React component hierarchies, inspect and edit a component props and state, and even see how component changes affect other components.

Redux dev-tools extension lets you inspect every state and action payload and re-evaluating “staged” actions.You can have multiple stores or different instances for every React component’s local state, and even “time travel” to cancel actions already takes. Here is a demo Video by Dan Abramov.

React Static-site Generators

React brought a new era into the composition of component-based static websites, with new frameworks like Gatsby and React static. These libraries leverage React’s components and ability to provide a fast, low effort yet flexible and powerful experience for building beautiful static websites. Here is a full review of 9 such libraries to keep and eye on for 2019 (have you heard of cuttlebelle?). Take a look.

Conclusion

The React ecosystem is moving fast, and so is the general ecosystem around components: from UI components to various APIs and Node.js modules. As the changes flow, new opportunities and tools sprout to provide us with new capabilities which can not only speed the way we build software, but to actually change the software we build. We can improve reusability, collaboration, test coverage, reduce bugs and bundle-size and so on.

Feel free to dig deeper, find the gems you need and share from your own experience. Thanks for reading and let’s have a great React year in 2019!

https://hackernoon.com/react/home

More by Jonathan Saring

More Related Stories