Essential React Packages of Early 2020 ( do not develop without )

The most essential Node packages to set up your React app today.

(This article was written in the context of React versions 16.9, 16.10, and 16.11 in late 2019/early 2020)

Absolutely Standard (you should install by default):

• styled-components

For creating styles inside of your components. 

• prop-types

prop-types is used for validating the properties are what they are supposed to be. This is invaluable for speed in development. In a nutshell, you should get used to the idea of declaring what the valid types for your properties are (string, array, number, etc)

• @dr-kobros/react-webfont-loader

For loading Google fonts. Want your website to look pretty and unique? Go choose a Google font.

• bootstrap, reactstrap

For installing and using Bootstrap, the world’s most popular CSS framework. 

For Bigger Apps: 

• isomorphic-fetch

This is what you need to make Ajax calls to a remote server. 

• react-redux, react-thunk, thunk

You will need react and thunk if you want to create a Redux tree of data. You will have to learn how to do fun things like mapStateToProps and mapDispatchToProps, and then you will have a giant data tree that will be mapped to your react components. 

For feature detection:

• react-use

This magic tool can detect anything your user’s browser is capable of. 

• query-string

Query string will check those query parameters (like ?search or ?utm_campaign, etc) to let you grab them from the browser’s URL. 

• react-helmet
You use React helmet if you want to set the page’s HEAD tags, for example, if you want unique meta or content tags to be generated depending on what is on the page.

For Testing:

• @testing-library/dom, @testing-library/jest-dom, @testing-library/react

With these you do fun things like unit testing, watching all your specs as you develop, and run a coverage report of how many lines of code you have covered. 

• cypress

This is what you use if you want to integration testing. You’ll note that Cypress is written in jQuery, ironically, because you aren’t supposed to use jQuery with React.

• deep-freeze

This package makes sure that your pure functions return with no side effects and without mutating the original objects

• enzyme and enzyme-adapter-react-16 (for React 16)