markerikson/react-community-tools-practices-cheatsheet

Descriptions and use cases for common tools and practices in the React community

React Community Tools and Practices Cheatsheet

This is a placeholder for an idea: (refs: https://twitter.com/acemarke/status/1365834578087333895, https://twitter.com/acemarke/status/1365888195070681092):

it feels like there maybe needs to be more of a community effort to build up some kind of a centralized "best practices" site, perhaps similar to the React+TS CheatSheet ( https://github.com/typescript-cheatsheets/react ) what if the community collaborated on putting together a centralized list of what the major options are in different categories, and when it might make sense to use them?
Obviously this could easily devolve into "NO, YOU SHOULD BE USING TOOL X INSTEAD OF TOOL Y", or "WHY ISN'T MY LIB WITH 27 STARS LISTED?". There'd need to be both curation and friendly cooperation from experts within the community in this. Example, state management. The main options by usage % are plain React state, Redux, MobX, XState. Those overlap with data fetching libs like Apollo, React Query, and SWR. What if each lib submitted a page saying "here's our tool, what it solves, and when you might use it"
Similarly, styling. Major options are inline styles, plain CSS, CSS Modules, and CSS-in-JS approaches. Have some pages that detail what those options are, pros/cons, and why you might consider each approach. Not flat-out saying "use X or Y". Just "here's options and use cases" One more: how do you pick between CRA, Next, Gatsby, or something like a Snowpack or Vite, to build a React app? When does it make sense to use any of those? Having a list of the major options and tradeoffs involved would be valuable.
Stackshare and Slant are sorta along the lines of what I'm describing, although I'm picturing something much more text-based and involving descriptions, examples, and use cases. I'm not saying any of this would be easy, and there'd be a lot of wrangling over how to format and present this info. also, not all would be "competing libs". like, fetch vs axios vs redaxios vs your own fetch wrapper

So, this is me sorta putting my money where my mouth is, and creating a repo to start this.

Initial Planning Discussion

see Discussion #1 - Initial RFC: Scope and Goals for discussion of what this project should actually involve and how we might make it a reality.

react-community-tools-practices-cheatsheet's Issues

Category: State Management

Add pages covering purpose, capabilities, tradeoffs, and use cases for common state management tools.

Initial examples:

• https://react-community-tools-practices-cheatsheet.netlify.app/state-management/overview
• https://react-community-tools-practices-cheatsheet.netlify.app/state-management/redux

Likely items to cover:

• Overview
• React components
• Redux
• Mobx
• XState
• Zustand
• Jotai/Recoil
• others?

Glossary

I'm not sure how essential this page is, but it's in the site right now so I figured I would create an issue.

Terms to define (incomplete list):

• Static rendering
• Server-side rendering
• Client-side rendering
• Component
• Class component
• Functional component
• Props
• State
• React Hooks
• State management
• Data fetching
• Pure function
• Side effects
• Single-page app
• Bundler
• Immutable
• Memoization
• Error boundary
• Node.js
• Composition
• Prop drilling
• React context
• Reducer

How About React-Router?

This is one of essential library in the React Community traditionally.
But recently React-Router betting data-fetch optimization like this Ryan Florence talk.

When To Fetch: Remixing React Router - Ryan Florence

This movement relating the who handle 'Framework' category in the here i think.

Category: Styling

Add pages covering purpose, capabilities, tradeoffs, and use cases for common data fetching tools.

Likely items to cover:

• Plain CSS
• Inline Styles
• CSS Modules
• CSS in JS:
  • Styled Componetns
  • Emotion
  • other?

Category: Data Fetching

Add pages covering purpose, capabilities, tradeoffs, and use cases for common data fetching tools.

Likely items to cover:

• Basic useEffect + fetch/Axios
• React Query
• Apollo
• Urql
• SWR
• RTK Query
• other?

Category: Common Mistakes

Add pages covering common mistakes when using React. I'm not sure how best to organize this.

• Beginner mistakes
• Intermediate mistakes
  • May be able to pull some points from my blog post — warning: the post is pretty opinionated
• Architectural mistakes

Better name?

It seems like the current name is either

• React Community Tools and Practices Cheatsheet (name of GitHub repo), or
• React Common Tools and Practices (what it says on the website)

I think having a short, memorable, and descriptive name will help the project succeed. Some ideas:

• The React Community Handbook (I think this is my personal favorite)
• The React Handbook
• The React Community Cheatsheet
• The React Compendium

"Common Tools and Practices in the React Ecosystem" could be a subtitle to provide additional detail.

Category: Build Tools

Add pages covering purpose, capabilities, tradeoffs, and use cases for common state management tools.

Likely items to cover:

• CRA
• Next
• Vite
• Roll-your-own Webpack + Babel
• ESBuild
• other?

Breadcrumb links don't work

I noticed the breadcrumbs links do not work. E.g. go to https://react-community-tools-practices-cheatsheet.netlify.app/styling/plain-css and try to click the "Styling" breadcrumb. It does nothing.

This example shows how to fix it by adding a link key to a type: category sidebar item: https://docusaurus.io/docs/sidebar#complex-sidebars-example

Do you want me to convert sidebars.js to the non-shorthand syntax so we can make the breadcrumbs work properly? Or should we just disable breadcrumbs? Or leave the links non-functional?

Funny, I noticed that the breadcrumb links do not work in the official Redux docs either. E.g. try to click "Introduction" on this page.

Page on component libraries

I don't think we need a whole category on this, but it would be useful to have a page that mentions popular component libraries like:

• Bootstrap (with react-bootstrap or reactstrap, see twbs/bootstrap#35665)
• MUI
• Ant Design
• Chakra UI (?)

The page can cover why you would use a component library and any strengths/weaknesses of each particular library.

Page on static vs. server vs. client rendering

This is probably the biggest decision to make when starting a new React project, so it would be good to have a page on it. I'm writing a blog post with my personal opinions on the subject and will link it here when it's published.