Code Monkey home page Code Monkey logo

real-world-react-apps's Introduction

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 [email protected]: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 Yarn in markdown instructions
ag -C 'yarn' -G '\.md'

# Find out what cookie libraries people use
ag cookie -G 'package.json'

Compare a lot of files at once

# Find ideas on how to configure Webpack
# Opens all webpack.config files in your editor of choice (vim/code/etc)
vim $(find . -name '*webpack.config*')

# Output content from all package.json files
find . -name package.json | xargs cat

Find out how long eslintrc files tend to be

find . -name '*eslintrc*' | xargs wc -l | sort

Compare the popularity of let vs const

ag 'let ' --js --stats-only | head -n 1
ag 'const ' --js --stats-only | head -n 1

Other Real World codebase collections

Information for contributors

Is your app the right fit?

  • A real world app should be publicly accessible and used by real people in a production environment.
  • Boilerplate, starter kits, libraries, and small demo/example projects are not accepted.
  • Most of the code should be frontend-oriented, in order to focus on React. Small backends may be OK, but should constitute the minority of the codebase.
  • For React Native only apps, contribute to Real World React Native instead.

Don't hesitate to submit a pull request if you meet the criteria!

How to add a Real World app

Given a GitHub repo for an app githubuser/foo:

# Inside the project root:
git submodule add -b master [email protected]:githubuser/foo.git apps/foo

Updating the apps submodules to latest

The apps in apps/ are git submodules. Git submodules are locked to a revision and don't stay in sync with the latest revision.

To update the revisions, run:

# This will take some time:
git submodule foreach git pull origin master

Contributors

  • Jerome Dalbert http://jeromedalbert.com
  • Contributions are welcome, fork the GitHub repo, make your changes, then submit your pull request! Reach out if you'd like some help.

real-world-react-apps's People

Contributors

bukinoshita avatar ckrybus avatar eliotsykes avatar guyellis avatar ismaelgt avatar jeromedalbert avatar onur-ozkan avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

real-world-react-apps's Issues

Should demo/clone apps be included?

Hi,

I really like the concept of having a curated list of open source production react projects (in fact I have made one myself).

I am just thinking maybe apps like dribble-demo, react-yelp-clone... should not be included? They are good projects for learning purpose but they are not real world production projects, and they are already in other awesome react list.

My suggestion is that this list should only be focused on projects like reddit mobile or wp-calypso.

Just my two cents:)

Which kind of projects are considered "real"?

Although there are some details about the term "real" in README file, it is not clear for me that which kind of projects are considered real. For example, I don't know if my app, Wanna, is a kind of so-called real React project. Can anyone provide a more exact definition of the word? :)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.