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):
• styled-components
https://styled-components.com/
For creating styles inside of your components.
• prop-types
https://reactjs.org/docs/typechecking-with-proptypes.html
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
https://www.npmjs.com/package/@dr-kobros/react-webfont-loader
For loading Google fonts. Want your website to look pretty and unique? Go choose a Google font.
• bootstrap, reactstrap
https://react-bootstrap.github.io/getting-started/introduction
For installing and using Bootstrap, the world’s most popular CSS framework.
For Bigger Apps:
• isomorphic-fetch
https://www.npmjs.com/package/isomorphic-fetch
This is what you need to make Ajax calls to a remote server.
• react-redux, react-thunk, thunk
https://react-redux.js.org/
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
https://github.com/streamich/react-use
This magic tool can detect anything your user’s browser is capable of.
• query-string
https://www.npmjs.com/package/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
https://github.com/nfl/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
https://github.com/testing-library/jest-dom
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
https://www.cypress.io/
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
https://www.npmjs.com/package/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)
https://enzymejs.github.io/enzyme/
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
Top comments (0)