React TL;DR #1 – A Human Filter For Most Useful React Content
What is React TL;DR?
How do you decide which React news can be useful to you? Or how something matches your interest or bring any value?
Content tools are easy to fool and collect a lot of crap that doesn’t really help or improve your work and this is why we decided to select the most useful React news ourselves.
Our TL;DR version delivers the essence from the article and helps you decide if it’s worth reading further to you.
Again – we don’t use any engines or tools. It is all selected by ourselves, based on what we have learned and gained profit from. No b#$%it provided.
Say hello to React TL;DR – a human filter for most useful React content.
React TL;DR – useful articles from July 2019
Typescript: Working with Paths, Packages and Yarn Workspaces
- Typescript path aliases are useful for shortening import statements and reaching modules from deep nested components.
- Deploying your own Typescript packages is an effective means of reusing your code and decreasing the size of your final projects.
- Where projects require multiple packages, yarn workspaces can be leveraged, and used in conjunction with a dedicated tool called Lerna.
Basic concepts of normalizing dataEach type of data gets its own “table” in the state.
- Each “data table” should store the individual items in an object, with the IDs of the items as keys and the items themselves as the values.
- Any references to individual items should be done by storing the item’s ID.
- Arrays of IDs should be used to indicate ordering.
- Use “Normalizr” library if you want to automate the normalization process
Why you should use an object, and not an array, for lists in Redux
- With object solution you won’t get duplicated items.
- Using an object will save your future self some time and bugs.
- CRUD operations do not iterate over all items each time.
- If you need an array of items, just add selector that will convert object to array.
All React + TypeScript Cheatsheets
- The Basic Cheatsheet (/README.md) is focused on helping React devs just start using TS in React apps
- The Advanced Cheatsheet (/ADVANCED.md) helps show and explain advanced usage of generic types for people writing reusable type utilities/functions/render prop/higher order components and TS+React libraries.
- The Migrating Cheatsheet (/MIGRATING.md) helps collate advice for incrementally migrating large codebases from JS or Flow, from people who have done it.
- The HOC Cheatsheet (/HOC.md) specifically teaches people to write HOCs with examples.
- Major improvements:
31% smaller bundle size
22% faster client-side mounting
26% faster updating of dynamic styles
45% faster server-side rendering
- All of your styled components are now fully hooks-powered
- Fully automatic RTL support for your styles