This post originally appeared at my blog "React Today" https://reacttoday.com/2020/03/06/react-for-2020/
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):
For creating styles inside of your components.
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)
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:
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:
This magic tool can detect anything your user’s browser is capable of.
Query string will check those query parameters (like ?search or ?utm_campaign, etc) to let you grab them from the browser’s URL.
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.
• @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.
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.
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)
Jason Fleetwood-Boldt is runs the consulting agency VERSO COMMERCE. We can help you with site speed, analytics, competitive research, Wix, Shopify, React, or NextJS/Node apps. Get in touch today at https://versocommerce.com
more at his blog at https://jasonfleetwoodboldt.com