A collection of awesome things regarding the React ecosystem.

• React
  • React General Resources
  • React Tutorials
  • React Development Tools
  • React Frameworks
  • React Component Libraries
  • React State Management and Data Fetching
  • React Styling
  • React Routing
  • React Libraries
  • React Testing
  • React Awesome Components
  • React Components Sandboxes
  • React Forms
  • React Tables and Grids
  • React Maps
  • React Charts
  • React Renderers
  • React Internationalization
  • React Graphics and Animations
  • React Integration
  • React Real Apps
• React Native
  • React Native General Resources
  • React Native Navigation
  • React Native Awesome Components
  • React Native Libraries
• Contribution

• React Official Website
• React GitHub
• Reactiflux Discord Channel
• React Community
• React Conferences
• React CodeSandbox Playground

• React Official Tutorial
• Using React in Visual Studio Code
• React Interview Questions & Answers
• Design patterns and Component patterns for building powerful Web Apps
• A simple, scalable, and powerful architecture for building production ready React applications
• Cheatsheets for experienced React developers getting started with…

📚 A free book that talks about design patterns/techniques used while developing with React.

• GitBook
• Web
• PDF
• Mobi
• ePub

• 简体中文

• In brief

• Communication
  • Input
  • Output
• Event handlers
• Composition
  • Using React's children API
  • Passing a child as a prop
  • Higher-order component
  • Function as a children, render prop
• Controlled and uncontrolled inputs
• Presentational and container components

• One direction data flow
• Flux
  • Flux architecture and its main characteristics
  • Implementing a Flux architecture
• Redux
  • Redux architecture and its main characteristics
  • Simple counter app using Redux

• Dependency injection
  • Using React's context (prior to v. 16.3)
  • Using React's context (v. 16.3 and above)
  • Using the module system
• Styling
  • The good old CSS class
  • Inline styling
  • CSS modules
  • Styled-components
• Integration of third-party libraries
• React and separation of concerns

The code samples used in the book are available here.

• React Design principles
• …

30 Days Of React

_{Author: Asabeneh Yetayeh
October, 2020}

Day 1 >>

🧡🧡🧡 HAPPY CODING 🧡🧡🧡

Support the author to create more educational materials

• Introduction
• Requirements
• How to Use Repo
  • Star and Fork this Repo
  • Clone your Fork
  • Create a New Branch
  • Structure Exercise Solutions
  • Commit Exercise…

Real world React apps and their open source codebases for developers to learn from

Learn from React apps written by experienced developers.

You'll find the source code for the apps in the apps/ subdirectory.

Thank you to every developer who has worked on a project this repo links to, your work is helping developers learn React.

# Clone this git repo:
git clone git@github.com:jeromedalbert/real-world-react-apps.git

cd real-world-react-apps/

# The apps are linked to as git submodules.
# This will take some time... (see comment below for possible speedup)
git submodule update --init

# OR if you've got git 2.9+ installed try to run updates in parallel:
# git submodule update --init --jobs 4

Some of the examples below use ag, but could just as well use grep or equivalent.

# Look for

A compilation of React Patterns, techniques, tips and tricks.

Gitbook format: https://vasanthk.gitbooks.io/react-bits

Github repo: https://github.com/vasanthk/react-bits

Your contributions are heartily ♡ welcome. (✿◠‿◠)

Translations by community:

• 中文版 (Chinese): react-bits-cn
• 한국어 (Korean): react-bits-ko

• Design Patterns and Techniques
  • Conditional in JSX
  • Async Nature Of setState()
  • Dependency Injection
  • Context Wrapper
  • Event Handlers
  • Flux Pattern
  • One Way Data Flow
  • Presentational vs Container
  • Third Party Integration
  • Passing Function To setState()
  • Decorators
  • Feature Flags
  • Component Switch
  • Reaching Into A Component
  • List Components
  • Format Text via Component
  • Share Tracking Logic
• Anti-Patterns
  • Introduction
  • Props In Initial State
  • findDOMNode()
  • Mixins
  • setState() in componentWillMount()
  • Mutating State
  • Using Indexes as Key
  • Spreading Props on DOM elements
• Handling UX Variations
  • Introduction
  • Composing UX Variations
  • Toggle UI Elements
  • HOC for Feature Toggles
  • HOC props proxy
  • Wrapper Components
  • Display Order Variations
• Perf Tips
  • Introduction
  • shouldComponentUpdate() check
  • Using Pure Components
  • Using reselect
• Styling
  • Introduction
  • Stateless UI Components
  • Styles Module
  • Style Functions
  • NPM…

React & Redux in TypeScript - Complete Guide

"This guide is a living compendium documenting the most important patterns and recipes on how to use React (and its Ecosystem) in a functional style using TypeScript. It will help you make your code completely type-safe while focusing on inferring the types from implementation so there is less noise coming from excessive type annotations and it's easier to write and maintain correct types in the long run."

Found it useful? Want more updates?

Show your support by giving a ⭐

---

What's new?

🎉 Now updated to support TypeScript v4.6 🎉 🚀 _Updated to typesafe-actions@5.x 🚀

---

• Complete type safety (with --strict flag) without losing type information downstream through all the layers of our application (e.g. no type assertions or hacking with any type)
• Make type annotations concise by eliminating redundancy in types using advanced TypeScript Language features like Type Inference and…

This is a list of AWESOME components. Nope, it's NOT a comprehensive list of every React component under the sun. So, what does "awesome" mean? Well:

• It solves a real problem
• It does so in a 🦄 unique, 🦋 beautiful, or 🏆 exceptional way. (And it's not super popular and well-known... no point in listing those.)
• It has recent code commits!

Look for a 🚀 for truly amazing projects. And look for quickie maintainer commentary and reviews in (italic parens) after some listings of note.

Maintainers:

• @petebray, author of Fluxguard — monitor PROD website changes.
• @brillout, author of vite-plugin-ssr (like Next.js / Nuxt but as do-one-thing-do-it-well Vite plugin) and Telefunc (remote functions instead of APIs).

Please review our contributing guidelines. We keep this list fresh by requiring all PRs to remove one or more non-awesome entries from this list…

• English
• 中文

• Easy to learn and use
• Supports SSR
• Special treatment for functions, avoid closure problems
• Contains a large number of advanced Hooks that are refined from business scenarios
• Contains a comprehensive collection of basic Hooks
• Written in TypeScript with predictable static types

$ npm install --save ahooks
# or
$ yarn add ahooks
# or
$ pnpm add ahooks
# or
$ bun add ahooks

import { useRequest } from 'ahooks';

$ git clone git@github.com:alibaba/hooks.git
$ cd hooks
$ pnpm run init
$ pnpm start

Open your browser and visit http://127.0.0.1:8000

We welcome all contributions, please read our CONTRIBUTING.MD first, let's build a better hooks library together.

Thanks to all the contributors:

🇬🇧 English | 🇨🇳 简体中文 | 🇮🇹 Italiano | 🇪🇸 Español | 🇺🇦 Ukrainian | 🇧🇷 Brazilian Portuguese | 🇵🇱 Polski | 🇯🇵 日本語 | 🇹🇷 Türkçe

Custom React hooks allow developers to abstract the business logic of components into single, reusable functions.
I have noticed that many of the hooks I have created and shared across projects involve callbacks, references, events, and dealing with the component lifecycle.
Therefore, I have created beautiful-react-hooks, a collection of useful React hooks that may help other developers speed up their development process.
Moreover, I have strived to create a concise and practical API that emphasizes code readability, while keeping the learning curve as low as possible, making it suitable for larger teams to use and share t -- Please before using…

👍
react-use

^{Collection of essential React Hooks Port of libreact
Translations: 🇨🇳 汉语}

npm i react-use

• Sensors
  • useBattery — tracks device battery state.
  • useGeolocation — tracks geo location state of user's device.
  • useHover and useHoverDirty — tracks mouse hover state of some element.
  • useHash — tracks location hash value.
  • useIdle — tracks whether user is being inactive.
  • useIntersection — tracks an HTML element's intersection.
  • useKey, useKeyPress, useKeyboardJs, and useKeyPressEvent — track keys.
  • useLocation and useSearchParam — tracks page navigation bar location state.
  • useLongPress — tracks long press gesture of some element.
  • useMedia — tracks state of a CSS media query.
  • useMediaDevices — tracks state of connected hardware devices.
  • useMotion — tracks state of device's motion sensor.
  • useMouse and useMouseHovered — tracks state of mouse position.
  • useMouseWheel — tracks deltaY of scrolled mouse wheel.
  • useNetworkState — tracks the state of browser's network connection.
  • useOrientation — tracks…

A collection of modern, server-safe React hooks – from the ui.dev team.

Compatible with React v18.0.0+.

npm i @uidotdev/usehooks

• useBattery
• useClickAway
• useCopyToClipboard
• useCounter
• useDebounce
• useDefault
• useDocumentTitle
• useFavicon
• useGeolocation
• useHistoryState
• useHover
• useIdle
• useIntersectionObserver
• useIsClient
• useIsFirstRender
• useList
• useLocalStorage
• useLockBodyScroll
• useLongPress
• useMap
• useMeasure
• useMediaQuery
• useMouse
• useNetworkState
• useObjectState
• useOrientation
• usePreferredLanguage
• usePrevious
• useQueue
• useRenderCount
• useRenderInfo
• useScript
• useSessionStorage
• useSet
• useThrottle
• useToggle
• useVisibilityChange
• useWindowScroll
• useWindowSize

npm i @uidotdev/usehooks@experimental react@experimental react-dom@experimental

• useContinuousRetry
• useCountdown
• useEventListener
• useFetch
• useInterval
• useIntervalWhen
• useKeyPress
• useLogger
• usePageLeave
• useRandomInterval
• useTimeout

Cheatsheets for experienced React developers getting started with TypeScript

Web docs | Español | Português | Contribute! | Ask!

👋 This repo is maintained by @swyx, @eps1lon and @filiptammergard. We're so happy you want to try out TypeScript with React! If you see anything wrong or missing, please file an issue! 👍

| |

• The Basic Cheatsheet is focused on helping React devs just start using TS in React apps
  • Focus on opinionated best practices, copy+pastable examples.
  • Explains some basic TS types usage and setup along the way.
  • Answers the most Frequently Asked Questions.
  • Does not cover generic type logic in detail. Instead we prefer to teach simple troubleshooting techniques for newbies.
  • The goal is to get effective with TS without learning too much TS.
• The Advanced Cheatsheet helps show and explain advanced usage of generic types for people writing…

We're looking for people to come and help work on the latest challenge Coinbee. If you're interested, get in touch via our slack community or via my website alexgurr.com!

A series of ReactJS coding challenges with a variety of difficulties. Deep dive into the why here.

Interested in some React fundamentals / philosophies? Check out the react-philosophies GitHub repo.

Time To Estimate. A fun, simple way for agile teams to remotely estimate tasks together. Free, with no sign-up required.

mixmello. Create remixed versions of your favourite Spotify playlists.

Unnecessary re-renders, fine grained control.

State / shared state, DOM manipulation.

Data visualisation and graphing. API usage.

Loading state, API usage.

Web sockets, events, callbacks & React hooks. Talks to Botty…

Click ⭐if you like the project. Pull Request are highly appreciated. Follow me @SudheerJonna for technical updates.

Note: This repository is specific to ReactJS. Please check Javascript Interview questions for core javascript questions.

IMPORTANT NOTICE:

As of May, 2023, all 30-seconds content repositories have been merged into 30-seconds-of-code.

Please watch, star and follow relevant activity there.

Short React code snippets for all your development needs

• Visit our website to view our snippet collection.
• Use the Search page to find snippets that suit your needs. You can search by name, tag, language or using a snippet's description. Just start typing a term and see what comes up.
• Browse the React Snippet collection to see all the snippets in this project or click individual tags at the top of the same page to narrow down your search to a specific tag.
• Click on each snippet card to view the whole snippet, including code, explanation and examples.
• You can use the button at the bottom of a snippet card to view the snippet in Codepen.
• If you like the project, give…

A Cheatsheet with live editable examples 💪

• A one-stop reference for the React hooks APIs
• Doesn't replace the official docs.
• However, it contains actual code examples each mimicking all APIs of hooks.
• Contains some real world examples of cases / issues you'll likely run into
• Most importantly, the cheatsheet contains live editable codes.

• includes live examples 🙋‍

👉🏿👉🏿👉🏿 Get Started

• Add example call signatures to all hooks
• Add more examples that explain interesting use cases from the official Hooks FAQ

Contributions of any kind are welcome. If you wanna knock off any of the todos above, please feel free to issue a PR. Got an interesting idea for the cheatsheet? Issue a PR :)

Curated tutorial and resource links I've collected on React, Redux, ES6, and more, meant to be a collection of high-quality articles and resources for someone who wants to learn about the React-Redux ecosystem, as well as a source for quality information on advanced topics and techniques. Not quite "awesome", but hopefully useful as a starting point I can give to others. Suggestions welcome.

Another important resource is the Reactiflux community on Discord, which has chat channels dedicated to discussion of React, Redux, and other related technologies. There's always a number of people hanging out and answering questions, and it's a great place to ask questions and learn. The invite link is at https://www.reactiflux.com.

You might also want to check out my categorized list of Redux-related addons, libraries, and utilities, at Redux Ecosystem Links. Also see Community Resources for links to other links lists, podcasts, and…

README in Chinese

README in Japanese

README in Korean

README in Portuguese (Brazil)

README in Russian

README in Spanish

Roadmap to becoming a React developer in 2019:

Below you can find a chart demonstrating the paths that you can take and the libraries that you would want to learn to become a React developer. I made this chart as a tip for everyone who asks me, "What should I learn next as a React developer?"

The purpose of this roadmap is to give you an idea about the landscape. The road map will guide you if you are confused about what to learn next, rather than encouraging you to pick what is hip and trendy. You should grow some understanding of why one tool would be better suited for some cases than the other and remember hip and trendy does not always mean best suited for…

Awesome React Hooks Resources

• React Hooks Docs

• React Hooks RFC

• "Making Sense of React Hooks" by Dan Abramov
• "From React.Component to hooks" by Octave Raimbault
• "React Hooks: What’s going to happen to my tests?" by Kent C. Dodds
• "State Management with React Hooks - No Redux or Context API" by André Gardi
• "How to Fetch Data with React Hooks?" by Robin Wieruch
• Primer on React Hooks
• React Hooks - A deeper dive featuring useContext and useReducer
• "Using Custom React Hooks to Simplify Forms" by James King
• Testing of a Custom React Hook for Fetching Data with Axios
• The Guide to Learning React Hooks (Examples & Tutorials) by Eric Bishard
• "Sanely Testing React Hooks" by Dave Cooper
• React by Example: Hooks

• 🎬 ReactConf 2018: React Today and Tomorrow by Sophie Alpert and Dan Abramov Official announcement and first demo.
• 🎬 ReactConf 2018: 90% Cleaner React by…

Curated list of resources: books, videos, articles about using Next.js.

Next.js: The React Framework.

List inspired by the awesome list thing. You might also like awesome-tdd.

• Awesome Next.js
  • Contents
  • Community
  • Essentials
  • Articles
  • Boilerplates
  • Extensions
  • Apps
  • Books
  • Videos
  • Projects(Beginner level)
  • Newsletters
  • Contributing
  • License

• GitHub
• GitHub discussions for Next.js

• Blog
• Learn
• Vercel TV
• Bulletproof Next

• Instant Site Updates with On-Demand Revalidation and Directus
• Dynamic CMS-driven Redirects with Next.js
• Getting Started with Next.js, GraphQL and React Query
• Using Next.js with FaunaDB: How to Query the Database from Your App
• How to Build a Serverless Next.js Blog with ButterCMS
• Build a Universal JavaScript App with Next.js
• Getting Started with Next.js — Setting Up Your App
• Getting Started with Next.js — Bringing Data In
• How to build a Next.js React Universal App
• Next on Next.js
• Accept payments on your site with nextjs, stripe, and micro
• Next.js on…