Useful tools to optimize your React workflow in 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:
Bit - Share and build with code components_Bit helps you share, discover and use code components between projects and applications to build new features and…_bitsrc.io
- See: StoryBook, CodeSandBox, Styleguidist with more playgrounds and tools.
- See: Building a UI component design system.
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
23 Best React UI Component Libraries And Frameworks_23 best React UI component libraries and frameworks to build your next app!_hackernoon.com
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.
5 Ways to Style React Components in 2019_Making sense of styling React components in 2019 in a short yet detailed review_blog.bitsrc.io
- Also see: 9 CSS in JS libraries for 2019
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.
State of React State Management for 2019_Observing state management in the wild… and the Store is open for business! 🐯_blog.bitsrc.io
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.
Testing React Components with Jest and Enzyme- In Depth_Everything you should know about testing React components using Jest & Enzyme. With examples._blog.bitsrc.io
How to Test React Components using Jest and Enzyme_Learn how to test React components using Jest and Enzyme_blog.bitsrc.io
- 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.
5 Tools for Faster Development in React_5 tools to speed the development of your React application, focusing on components._blog.bitsrc.io
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
React Context API - A Replacement for Redux?_Convert a React App that uses Redux for State Management to use React's New Context API_blog.bitsrc.io
Why you should consider the new Context API in React? — A deep dive_The introduction of brand new React Context API._blog.bitsrc.io
Hooks
Understanding Hooks in React_An introduction to React 16.7 hooks, with examples._blog.bitsrc.io
Understanding React Hooks — useState_Everything you need to know to start working with Hooks in React._blog.bitsrc.io
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.
9 React Static Site Generators for 2019_Awesome next-generation static site generators for React!_blog.bitsrc.io
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
Learn more
5 Tools for Faster Development in React_5 tools to speed the development of your React application, focusing on components._blog.bitsrc.io
11 JavaScript Animation Libraries For 2019_Some of the finest JS and CSS animation libraries around._blog.bitsrc.io
How to Share React UI Components between Projects and Apps_How to easily share and sync your React UI components between all your team’s projects and applications with Bit._blog.bitsrc.io