Awesome React Resources
Published: 2021-12-05 01:11:49


#### React General Resources

- [React Official Website](https://reactjs.org/)
- [React Documentation](https://reactjs.org/docs/getting-started.html)
- [React GitHub](https://github.com/facebook/react)

#### React Community

- [Reactiflux Discord Channel](http://www.reactiflux.com/)
- [React StackOverflow](http://stackoverflow.com/questions/tagged/reactjs)
- [React Twitter](https://twitter.com/reactjs)

#### React Online Playgrounds

- [CodePen](https://reactjs.org/redirect-to-codepen/hello-world)
- [CodeSandbox](https://codesandbox.io/s/new)
- [JSFiddle](https://jsfiddle.net/boilerplate/react-jsx)

#### Another Awesome Lists

- [https://bestofreactjs.com/](Find The Best React Components & Libraries For Your Project)

#### React Tutorials

##### React General Tutorials

- [React Official Tutorial](https://reactjs.org/tutorial/tutorial.html)
- [Using React in Visual Studio Code](https://code.visualstudio.com/docs/nodejs/reactjs-tutorial)
- [Scrimba - Learn React for free interactively](https://scrimba.com/g/glearnreact)
- [FreeCodeCamp React Challenges](https://learn.freecodecamp.org/front-end-libraries/react)
- [React Cheatsheet](https://devhints.io/react)
- [React Patterns](https://reactpatterns.com/)
- [Setup Flow with React](https://flow.org/en/docs/react/)

##### React Hooks

- [React Hooks](https://reactjs.org/docs/hooks-intro.html)
- [Awesome React Hooks](https://github.com/rehooks/awesome-react-hooks)
- [Thinking in React Hooks](https://wattenberger.com/blog/react-hooks)
- [Replacing Redux with React Hooks and Context](https://medium.com/octopus-labs-london/replacing-redux-with-react-hooks-and-context-part-1-11b72ffdb533)
- [React Hooks cheat sheet: Unlock solutions to common problems](https://blog.logrocket.com/react-hooks-cheat-sheet-unlock-solutions-to-common-problems-af4caf699e70/)
- [How to fetch data with React Hooks?](https://www.robinwieruch.de/react-hooks-fetch-data/)
- [Easy to understand React Hook recipes](https://usehooks.com/)
- [React Hooks Video Tutorial](https://www.youtube.com/playlist?list=PLN3n1USn4xlmyw3ebYuZmGp60mcENitdM)

##### React and TypeScript

- [TypeScript, React and Webpack](https://www.typescriptlang.org/docs/handbook/react-&-webpack.html)
- [JSX in TypeScript](https://www.typescriptlang.org/docs/handbook/jsx.html)
- [Cheatsheets for experienced React developers getting started with TypeScript](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet)
- [React by Example](https://reactbyexample.github.io/)

##### React Performance

- [React Optimizing Performance](https://reactjs.org/docs/optimizing-performance.html)
- [Introducing the React Profiler](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html)
- [Optimizing React: Virtual DOM explained](https://evilmartians.com/chronicles/optimizing-react-virtual-dom-explained)
- [A Definitive Guide to Optimize Major Performance issues in React](https://www.simform.com/react-performance/)
- [Twitter Lite and High Performance React Progressive Web Apps at Scale](https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3)
- [Using the React DevTools Profiler to Diagnose React App Performance Issues](https://www.netlify.com/blog/2018/08/29/using-the-react-devtools-profiler-to-diagnose-react-app-performance-issues/)
- [Top 5 Practices to Boost React Performance](https://www.codementor.io/blizzerand/top-5-practices-to-boost-react-performance-jv6zr89ep)
- [React is Slow, React is Fast: Optimizing react Apps in Practice](https://medium.com/dailyjs/react-is-slow-react-is-fast-optimizing-react-apps-in-practice-394176a11fba)
- [Rendering large lists with react-window](https://addyosmani.com/blog/react-window/)

##### React Internals

- [Reconciliation](https://reactjs.org/docs/reconciliation.html)
- [React Fiber Architecture](https://github.com/acdlite/react-fiber-architecture)
- [Build your own React](https://engineering.hexacta.com/didact-learning-how-react-works-by-building-it-from-scratch-51007984e5c5)
- [Inside Fiber: In-depth overview of the new reconciliation algorithm in React](https://medium.com/react-in-depth/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react-e1c04700ef6e)
- [Entire React code base explanation by visual block schemes](https://github.com/Bogdan-Lyashenko/Under-the-hood-ReactJS)

##### React Interview Questions

- [13 Essential React Interview Questions](https://www.toptal.com/react/interview-questions)
- [List of React interview Questions and Answers](https://github.com/sudheerj/reactjs-interview-questions)
- [React Coding Challenges](https://github.com/alexgurr/react-coding-challenges/)

#### React Tools

##### React Development Tools

- [react-devtools](https://github.com/facebook/react-devtools) - Inspection of React component hierarchy in the Chrome and Firefox Developer Tools
- [react-hot-loader](https://github.com/gaearon/react-hot-loader) - Tweak React components in real time
- [react-loadable](https://github.com/jamiebuilds/react-loadable) - A higher order component for loading components with promises
- [loadable-components](https://github.com/smooth-code/loadable-components) - React code splitting made easy
- [reactotron](https://github.com/skellock/reactotron) - A desktop app for inspecting your React and React Native projects
- [storybook](https://github.com/storybookjs/storybook) - UI component dev & test
- [docz](https://github.com/doczjs/docz) - Zero Config, live-reloading documentation with Markdown + JSX
- [react-styleguidist](https://github.com/styleguidist/react-styleguidist) - Isolated React component development environment with a living style guide
- [react-cosmos](https://github.com/react-cosmos/react-cosmos) - Dev tool for creating reusable React components
- [eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react) - React specific linting rules for ESLint
- [eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y) - Static AST checker for a11y rules on JSX elements
- [@axe-core/react](https://github.com/dequelabs/axe-core-npm) - Accessibility auditing for React applications
- [DataFormsJS JSX Loader](https://github.com/dataformsjs/dataformsjs/blob/master/docs/jsx-loader.md) - Small JavaScript Compiler for quickly converting JSX to JS directly on a web page
- [Why Did You Render](https://github.com/welldone-software/why-did-you-render) - Monkey patches React to notify you about avoidable re-renders.
- [Divjoy](https://divjoy.com) - React codebase and UI generator to speed up development (paid)
- [Plasmic](https://www.plasmic.app/) - Powerful design tool for building your React components visually.
- [jsx-ast-utils](https://github.com/jsx-eslint/jsx-ast-utils) - AST utility module for statically analyzing JSX
- [react-scanner](https://github.com/moroshko/react-scanner) - Extract React components and props usage from code

##### React Starter Kits and Toolchains

- [create-react-app](https://github.com/facebook/create-react-app) - Set up a modern Web app by running one command
- [Razzle](https://razzlejs.org/) - Build production ready React applications. Razzle is toolchain for modern static and dynamic websites and web applications
- [Neutrino React Preset](https://neutrinojs.org/packages/react/) - `@neutrinojs/react` is a Neutrino preset that supports building React web applications
- [react-starter-kit](https://github.com/kriasoft/react-starter-kit) - Isomorphic Web app boilerplate
- [create-react-library](https://github.com/transitive-bullshit/create-react-library) - CLI for creating reusable, modern React libraries using Rollup and create-react-app.
- [tsdx](https://tsdx.io/) - Zero-config CLI for TypeScript package development

##### React Frameworks

- [next.js](https://github.com/vercel/next.js) - The React Framework
- [gatsby.js](https://github.com/gatsbyjs/gatsby) - Free and open source framework based on React
- [react-admin](https://github.com/marmelab/react-admin) - Frontend Framework for building B2B applications on top of REST/GraphQL APIs
- [remix](https://remix.run/) - Finally, a killer React framework from the creators of React Router
- [Blitz](https://blitzjs.com) - The Fullstack React Framework
- [aleph.js](https://github.com/alephjs/aleph.js) - The React Framework in Deno