Real world React apps

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.

How to install on your computer

# 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

How you can analyze the apps

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

Global searches

# Look for

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

💡 Why?

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…

Awesome React

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

React General Resources

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

React Tutorials

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

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…

⭐️ Looking for collaborators ⭐️

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.

Sponsored

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.

The Challenges

Easy 🙂

🚀 Rocket Ship

Unnecessary re-renders, fine grained control.

Medium 😐

🌙 Dark Mode

State / shared state, DOM manipulation.

🐝 Coinbee

Data visualisation and graphing. API usage.

Hard 😬

🎧 Spootify

Loading state, API usage.

🤖 Chatter

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

editorjs.io | documentation | changelog

About

Editor.js is an open-source text editor offering a variety of features to help users create and format content efficiently. It has a modern, block-style interface that allows users to easily add and arrange different types of content, such as text, images, lists, quotes, etc. Each Block is provided via a separate plugin making Editor.js extremely flexible.

Editor.js outputs a clean JSON data instead of heavy HTML markup. Use it in Web, iOS, Android, AMP, Instant Articles, speech readers, AI chatbots — everywhere. Easy to sanitize, extend and integrate with your logic.

• 😍  Modern UI out of the box
• 💎  Clean JSON output
• ⚙️  Well-designed API
• 🛍  Various Tools available
• 💌  Free and open source

Installation

It's quite simple:

1. Install Editor.js
2. Install tools you need
3. Initialize Editor's instance

Install using NPM, Yarn, or CDN:

npm i @editorjs/editorjs

Choose and install tools:

• Heading
• Quote
• Image
• …