Useful tools to optimize your React workflow in 2019 While the frontEnd world knew some turbulence in the past decade, ’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 and it’s ecosystem, which has been growing rapidly. React React This might be a good time to take a look at some of the best features, 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. tools 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, revolutionized the way we share and manage components with new abilities. It’s getting popular fast and for a reason. Bit 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 helps you share, discover and use code components between projects and applications to build new features and…_bitsrc.io Bit - Share and build with code components : , , with more and . See StoryBook CodeSandBox Styleguidist playgrounds 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 , 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. enterprize-built libraries Extended list _23 best React UI component libraries and frameworks to build your next app!_hackernoon.com 23 Best React UI Component Libraries And Frameworks : , , , , , , & . 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 to Sass, Less, CSS modules, Inline CSS and even projects like Stylable. styled-components 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. _Making sense of styling React components in 2019 in a short yet detailed review_blog.bitsrc.io 5 Ways to Style React Components in 2019 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 , as well as the re-rise of which incorporates React’s encapsulated-components paradigm. It also reviews the new which is a promising alternative to Unstated Mobx Context-API Redux . _Observing state management in the wild… and the Store is open for business! 🐯_blog.bitsrc.io State of React State Management for 2019 Testing The 2018 the most in-demand testing frameworks looking forward into 2019, with popular testing frameworks such as , , and more to on the component level. “State of JS” survey lists Jest Mocha Karma make TDD simpler 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. _Everything you should know about testing React components using Jest & Enzyme. With examples._blog.bitsrc.io Testing React Components with Jest and Enzyme- In Depth _Learn how to test React components using Jest and Enzyme_blog.bitsrc.io How to Test React Components using Jest and Enzyme When combined with , every component can be tested individually in separation from the src repo, to make sure it’s really reusable anywhere. Bit Kick-Starters and Boilerplates With the release of 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 and which provide an alternative for different use cases. create-react-app 2.0 React-Boilerplate React Slingshot See section 5 of this article to get a look at the differences between them. _5 tools to speed the development of your React application, focusing on components._blog.bitsrc.io 5 Tools for Faster Development in React 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 which, after a long waiting period, is made official and comes into play as a potential replacement for Redux (and more). The second is 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 Hooks Context API _Convert a React App that uses Redux for State Management to use React's New Context API_blog.bitsrc.io React Context API - A Replacement for Redux? _The introduction of brand new React Context API._blog.bitsrc.io Why you should consider the new Context API in React? — A deep dive Hooks _An introduction to React 16.7 hooks, with examples._blog.bitsrc.io Understanding Hooks in React _Everything you need to know to start working with Hooks in React._blog.bitsrc.io Understanding React Hooks — useState 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 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. extension Redux dev-tools 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. extension React Static-site Generators React brought a new era into the composition of component-based static websites, with new frameworks like and . 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 ?). Take a look. Gatsby React static cuttlebelle _Awesome next-generation static site generators for React!_blog.bitsrc.io 9 React Static Site Generators for 2019 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 to speed the development of your React application, focusing on components._blog.bitsrc.io 5 Tools for Faster Development in React _Some of the finest JS and CSS animation libraries around._blog.bitsrc.io 11 JavaScript Animation Libraries For 2019 _How to easily share and sync your React UI components between all your team’s projects and applications with Bit._blog.bitsrc.io How to Share React UI Components between Projects and Apps

Flow

Google

7 FrontEnd JavaScript Trends and Tools You Should Know for 2020

4 Ways to Go Monorepo in 2019

I write code and words. Learn about Bit: github.com/teambit/bit

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

The React Developer Tools You Should Know in 2019

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

How to Manage Reusable UI Components

10 Resources That’ll Make You Better At Dashboard Creation

10+ Ridiculously Cool Admin Themes And Templates

10 Reasons Why Front End Development Is a Great Career Choice

10 Reasons To Use TailwindCSS In Your Next Project

How to Manage Reusable UI Components

10 Resources That’ll Make You Better At Dashboard Creation

10+ Ridiculously Cool Admin Themes And Templates

10 Reasons Why Front End Development Is a Great Career Choice

10 Reasons To Use TailwindCSS In Your Next Project

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps