30 Days of React challenge is a step by step guide to learn React in 30 days. These videos may help too: https://www.youtube.com/channel/UC7PNRuno1rzYPb1xLa4yktw
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.
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.
Bulletproof React 🛡️ ⚛️
A simple, scalable, and powerful architecture for building production ready React applications.
Introduction
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.
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.
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…
👋 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
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?"
Disclaimer
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…
Add more examples that explain interesting use cases from the official Hooks FAQ
Contributing
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 :)
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.
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
An Existing React 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:
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.
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.
Packages
This repository is a monorepo containing the following packages:
├──.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…
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.
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
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.
Submitting Issues
Having trouble? First check out the Troubleshooting section of the documentation, and then search the issues, both open and closed for your…
Entire React code base explanation by visual block schemes (Stack version)
Under the hood: React
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.
I wanted to automate process of "learning and documenting" a complex codebase as much as possible, so I started Codecrumbs project. It will help to build projects like "Under the hood ReactJs" in a shorter time and in a simpler way!
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.
Shefali
