30 Days Of React

Learn with Asabeneh by joining the upcoming CODING BOOTCAMP

_{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
  • …

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…

Offer API docs that look as good as Stripe's using our sponsor Fern. Request a preview of your docs on Fern.

A collection of awesome things regarding the React ecosystem.

• React
  • React General Resources
  • React Tutorials
  • React Frameworks
  • React Component Libraries
  • React State Management and Data Fetching
  • React Styling
  • React Routing
  • React Development Tools
  • 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…

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.

See also: Awesome React Frameworks.

Maintainers:

• @petebray, author of Fluxguard — monitor PROD website changes.
• @brillout, author of Vike — a fast Vite-based React framework that is flexible, lean, community-driven and dependable.

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

🇬🇧 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…

A simple, scalable, and powerful architecture for building production ready React applications.

React is an excellent tool for building front-end applications. It has a diverse ecosystem with hundreds of great libraries for literally anything you might need. However, being forced to make so many choices can be overwhelming. It is also very flexible, you can write React applications in any way you like, but that flexibility comes with a cost. Since there is no pre-defined architecture that developers can follow, it often leads to a messy, inconsistent, and over-complicated codebase.

This repo attempts to present a way of creating React applications using some of the best tools in the ecosystem with a good project structure that scales very well. Based on my experience working with a lot of different codebases, this architecture turns out to be the most effective.

The goal here is to serve…

React is a JavaScript library for building user interfaces.

• Declarative: React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable, simpler to understand, and easier to debug.
• Component-Based: Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep the state out of the DOM.
• Learn Once, Write Anywhere: We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code. React can also render on the server using Node and power mobile apps using React Native.

Learn how to use React…

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
  • React Fragments
  • 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…

Quick scaffolding

Create components, containers, routes, selectors and sagas - and their tests - right from the CLI!

Instant feedback

Enjoy the best DX (Developer eXperience) and code your app at the speed of thought! Your saved changes to the CSS and JS are reflected instantaneously without refreshing the page. Preserve application state even when you update something in the underlying code!

Predictable state management

Unidirectional data flow allows for change logging and time travel debugging.

Next generation JavaScript

Use template strings, object destructuring, arrow functions, JSX syntax and more.

Next generation CSS

Write composable CSS that's co-located with your components for complete modularity. Unique generated class names keep the…

Cheatsheet for using React with TypeScript.

Web docs | Contribute! | Ask!

👋 This repo is maintained by @eps1lon and @filiptammergard. We're so happy you want to try out React with TypeScript! 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 reusable type utilities/functions/render prop/higher order components and TS+React libraries
  • It also has miscellaneous…

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…

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 :)

Learn once, write anywhere:
Build mobile apps with React

React Native brings React's declarative UI framework to iOS and Android. With React Native, you use native UI controls and have full access to the native platform.

• Declarative. React makes it painless to create interactive UIs. Declarative views make your code more predictable and easier to debug.
• Component-Based. Build encapsulated components that manage their state, then compose them to make complex UIs.
• Developer Velocity. See local changes in seconds. Changes to JavaScript code can be live reloaded without rebuilding the native app.
• Portability. Reuse code across iOS, Android, and other platforms.

React Native is developed and supported by many companies and individual core contributors. Find out more in our ecosystem overview.

• Requirements
• Building your first React Native app
• Documentation
• Upgrading
• How…

⭐️ If you like reactpatterns, give it a star! ⭐️

A curated list of React Patterns

React patterns & techniques to use in development for React Developer.

• Proxy Component

• Make the API Call in componentDidMount()

• Stateless Function (Presentational Component)

• Functional setState (Pass a function to setState)

• Higher-Order Function

• Higher-Order Component

• Accessing a Child Component

• JSX Spread Attributes

• Render Callback

• Function as Child Component

• Function as Prop Component

• Component Injection

• Conditional Rendering

  • If Else
  • Ternary Operation
  • Logical && Operator
  • Switch Case Operator
  • Conditional Rendering with Enum
  • Multi Level Conditional Rendering
  • With Higher Order Component
  • External Templating Component

• Destructuring

  • Basic Destructuring
  • Destructuring Function Argument
  • Nested Destructuring
  • Destructuring Rest/Spread Operator

• Promises Over Callbacks

• Stateful Component (Container Component)

• State Hoisting

• shouldComponentUpdate Avoid Heavy re-renders

• Controlled and Uncontrolled Input

• PureComponent Avoid Heavy re-renders

• Initializing the State Using Props

• Using Indexes as a Key

• Spreading Props on DOM Elements

• Mutating the…

Official React bindings for Redux Performant and flexible.

The recommended way to start new apps with React and Redux is by using our official Redux+TS template for Vite, or by creating a new Next.js project using Next's with-redux template.

Both of these already have Redux Toolkit and React-Redux configured appropriately for that build tool, and come with a small example app that demonstrates how to use several of Redux Toolkit's features.

# Vite with our Redux+TS template
# (using the `degit` tool to clone and extract the template)
npx degit reduxjs/redux-templates/packages/vite-template-redux my-app

# Next.js using the `with-redux` template
npx create-next-app --example with-redux my-app

React Redux 8.0 requires React 16.8.3 or later (or React Native 0.59 or later).

To use React Redux with your React app, install it as a dependency:

# If you use npm:

React Router is a lightweight, fully-featured routing library for the React JavaScript library. React Router runs everywhere that React runs; on the web, on the server (using node.js), and on React Native.

If you're new to React Router, we recommend you start with the tutorial.

If you're migrating to v6 from v5 (or v4, which is the same as v5), check out the migration guide. If you're migrating from Reach Router, check out the migration guide for Reach Router. If you need to find the code for v5, it is on the v5 branch.

Documentation for v6 can be found on our website.

There are many different ways to contribute to React Router's development. If you're interested, check out our contributing guidelines to learn how you can get involved.

This repository is a monorepo containing the following packages:

• …

react-spring is a cross-platform spring-physics first animation library.

It's as simple as:

const styles = useSpring({
  from: {
    opacity: 0
  },
  to: {
    opacity: 1
  }
})

<animated.div style={styles} />

Just a small bit about us:

• Cross-Platform: We support react-dom, react-native, react-three-fiber, react-konva & react-zdog.
• Versatile: Be declarative with your animations or if you prefer, imperative.
• Spring-Physics First: By default animation use springs for fluid interactivity, but we support durations with easings as well.

There's a lot more to be had! Give it a try and find out.

# Install the entire library
npm install react-spring
# or just install your specific target (recommended)
npm install @react-spring/web

The web's most popular Jamstack front-end template for building web applications with React.

• Optimized for serverless deployment to CDN edge locations (Cloudflare Workers)
• HTML page rendering (SSR) at CDN edge locations, all ~100 points on Lighthouse
• Hot module replacement during local development using React Refetch
• Pre-configured with CSS-in-JS styling using Emotion.js
• Pre-configured with code quality tools: ESLint, Prettier, TypeScript, Vitest, etc.
• Pre-configured with VSCode code snippets and other VSCode settings
• The ongoing design and development is supported by these wonderful companies:

This project was bootstrapped with React Starter Kit Be sure to join our Discord channel for assistance.

├──.github — GitHub configuration including CI/CD workflows
├──.vscode — VSCode settings including code snippets, recommended extensions etc.
├──app — Web application front-end built with React and Joy UI
├──db — Firestore database schema, seed data, and admin tools
├──edge…

React Testing Library

Simple and complete React DOM testing utilities that encourage good testing practices.

Read The Docs | Edit the docs

• The problem
• The solution
• Installation
  • Suppressing unnecessary warnings on React DOM 16.8
• Examples
  • Basic Example
  • Complex Example
  • More Examples
• Hooks
• Guiding Principles
• Docs
• Issues
  • 🐛 Bugs
  • 💡 Feature Requests
  • ❓ Questions
• Contributors
• LICENSE

You want to write maintainable tests for your React components. As a part of this goal, you want your tests to avoid including implementation details of your components and rather focus on making your tests give you the confidence for which they are intended. As part of this, you want your testbase to be maintainable in the long run so refactors of your components (changes to implementation but not functionality) don't break your tests and slow you and your team down.

The React Testing Library is a very…

Decouple your Authentication and Authorization from your components!

npm install --save redux-auth-wrapper

redux-auth-wrapper is a utility library for handling authentication and authorization in react + redux applications.

Read the documentation at https://mjrussell.github.io/redux-auth-wrapper

Version 3.x has the same external API as version 2, however it only supports React >= 16.3. It is also tested with react-router v5 and connected-react-router which replaced react-router-redux.

Version 2.x is a big internal rewrite! It provides a massive increase in flexibility when using redux-auth-wrapper and also introduces some breaking changes. See the Migration Guide for more details if coming from 1.x. Or check out the Getting Started guide if you've never used redux-auth-wrapper before.

Looking for Version 1.x? You can browse the 1.x README here.

Having trouble? First check out the Troubleshooting section of the documentation, and then search the issues, both open and closed for your…

This repository contains an explanation of inner work of React. In fact, I was debugging through the entire code base and put all the logic on visual block-schemes, analyzed them, summarized and explained main concepts and approaches. I've already finished with Stack version and now I work with the next, Fiber version.

Each scheme is clickable and can be opened in a new tab, use that to zoom it and be able to read from it. Keep the article and a scheme you are reading about at that moment in separate windows (tabs), that will help to match text and code flow easier.

We…