Ask HN: What good open source projects written in React that I can learn from?
Not sure just what you're looking for, but SpiderOak's Semaphor is a desktop/mobile end-to-end-encrypted Slack alternative where the presentation layer is React, and the client side app backend (networking, crypto, database) is Go. That keeps the React code focused and easy to follow.
Source is here: https://spideroak.com/solutions/semaphor/source
This is a nice, non-trivial, but not too big project in react and redux:
Plugging in our own :) A Hearthstone replay engine
The new Wordpress frontend code seems to be utilizing React:
My buddy Jason and the Mozilla devtools team have been working on the next version of the Firefox debugger, written in React and Redux:
https://github.com/devtools-html/debugger.html
Open source FTW
FormidableLabs (https://github.com/FormidableLabs) is doing some very good work in the React ecosystem. Here are projects that I'm particularly excited about:
1. Spectacle (https://github.com/FormidableLabs/spectacle), Presentation Library
2. Victory (https://github.com/FormidableLabs/victory), Graphing Library
3. Radium (https://github.com/FormidableLabs/radium), Component Styling
I'm currently building a React app while trying to explain how/what I do in weekly(-ish) videos. You can find the source code (along with links to videos) on github: https://github.com/yamalight/building-products-with-js
I recommend 'debugger.html' [1] from Mozilla.
"debugger.html is a hackable debugger for modern times, built from the ground up using React and Redux. It is designed to be approachable, yet powerful. And it is engineered to be predictable, understandable, and testable.
Mozilla created this debugger for use in the Firefox Developer Tools."
I highly recommend checking out React Toolbox [http://react-toolbox.com/#/]. It's a horrible name for what it is - but it's a Material Design implementation in React.
There are simple components, and then more complicated concepts like higher-order components and factories. It has very good documentation, and is under active development.
I'll plug in my project here.
Work in progress: https://github.com/Cloud-CV/cvfy-frontend
It is a platform to build pipelines to showcase machine learning models on the web. You select input components, output components, and use the cvfy-lib python client to connect all these.
You might be interested in building React apps that support plugins safely: https://nylas.com/blog/react-plugins/
The code is also open source: http://github.com/nylas/n1
(I work at Nylas)
ES6 React with react-router, server side rendering, and Webpack code splitting + tree shaking. It's based on the "huge-app" example from the react-router project.
A website and user system starter. Server side is built with hapi.js. The front-end is built with React. Redux as the state container. Client side routing with React Router.
I have a video series with source code, you can follow along if you want.
Videos: https://www.codemy.net/channels/react-foundation
Source Code: https://github.com/codemy/invoiced-ui
We wrote slack-like app for reddit called Breaker and the front-end is written in React:
Admin-on-rest: Admin GUI for REST APIS, using react + redux + react-router + saga + material ui
https://github.com/marmelab/admin-on-rest
Contains documentation and unit tests, plus a few neat react tricks (like a custom React-router Route component and an accumulator saga), documented there:
* http://marmelab.com/blog/2016/09/20/custom-react-router-comp... * http://marmelab.com/blog/2016/10/18/using-redux-saga-to-dedu...
If you're interested in component composition, react-bootstrap is a good one to look at for ideas:
https://github.com/react-bootstrap/react-bootstrap
They are also accepting of new contributors.
Sentry (https://github.com/getsentry/sentry) has a React frontend but it's a big enough project that it's less ideal for learning.
React + Redux SoundCloud Application
GitHub: https://github.com/rwieruch/favesound-redux Live: http://www.favesound.de/
Basic feature set: Login, Sort/Filter/Search, Play Audio in Browser, Pagination, ...
No over engineered libraries: normalizr, redux-thunk, react-touter, enzyme ...
Tutorial to build your own: http://www.robinwieruch.de/the-soundcloud-client-in-react-re...
I had this same question awhile back: https://news.ycombinator.com/item?id=12497202
Just leaving this here for reference and as a resource.
Metabase is written in React: https://github.com/metabase/metabase
Mattermost[1]: Open-source Slack alternative written in React and Go.
parse-dashboard: https://github.com/ParsePlatform/parse-dashboard
It even has user interface guidelines for the components.
https://github.com/madou/armory-react
A Guild Wars 2 Armory. Fairly impressive. You can view it live too https://gw2armory.com/
Nice resource
I don't know how much you can learn from it, but here is a react + three.js project I've done for testing: https://github.com/alexadam/bridges
MASAS - "Make A Sound And Share" www.masas.fm
All I know is that it written in react and by what seems to be three, very passionate, brothers.
"MASAS.fm is going to be a platform on which all of an Artist's needs, from creating music, to getting it discovered, to selling it and playing at live events, can be met, for free. Thus eliminating the need for all the vicious middlemen that have placed themselves between Artists and their fans. Together, we can build that platform, one that will truly help all Artists, without ripping them off of their music rights!"
www.MASAS.fm
For another type of application, you can check brave browser source code https://github.com/brave/browser-laptop
Facebook has some great tutorials and examples on their site: https://facebook.github.io/react/tutorial/tutorial.html
Also: I would highly recommend getting familiar with both npm and Babel/ES6/ES2015 -- even if you're not a node developer.
I found that understanding the tech was one thing, but when I actually started building my own projects I sought out community help with specific questions I had.
Have fun!
Ill plug our new project, Desklamp. Its a replacement for the Redux + React Router standard. These two just weren't built to work with each other and so take a lot of extra code. Desklamp solves this problem by delivering a single library that handles both state and routing.
check it out here https://github.com/desklamp-js/desklamp and feel free to make pull requests and submit issues.
good luck in your tech journey
I build this trivial SPA front end https://github.com/javascript-obfuscator/javascript-obfuscat... to a Node.js package.
demo here: https://javascriptobfuscator.herokuapp.com
It has just two reducers, uses redux-promise-middleware to make one ajax call, and uses Semantic-UI for the UI.
Hi! Here is the top 100 of the most rated react apps in Github: https://airtable.com/shrB7DlRYXDlU23a6 And the article that describes how I obtained this list: https://medium.com/@sAbakumoff/react-entourage-6d51e7df9944#...
Presenter Club is written in React/Redux:
https://gitlab.com/presenter.club/presenter.club/tree/master...
https://github.com/callemall/material-ui is a great collection of components -- there's perhaps some insight into how to make (and document!) reusable components, since the project is built to be a component library for others' use
I built my own react-cellar to learn react, redux, typescript, and so on.
GitHub: https://github.com/ayxos/react-cellar Web: https://react-cellar.herokuapp.com/
WordPress.com front end is written with React. It's one of the biggest React projects, and it is used in production. We are actively developing on GitHub and trying develop out in the open.
If you are looking for more of a learning project (and in typescript) I converted Wes bos' react tutorial series for my own learning http://www.github.com/ryanluker/typed-catch-of-the-day
https://pokedextracker.com is written in react
Octopush - A simple GUI for Capistrano built on React and Redux with server-side rendering
I helped out a lot with this codebase, it's well on its way to becoming a production React SPA:
Sentry is also a nice non-trivial one: https://github.com/getsentry/sentry/search?l=JSX
React Isomorphic Starter Kit: https://github.com/RickWong/react-isomorphic-starterkit
You can't miss this one: https://github.com/airbnb/react-dates
Provided by Airbnb.
We have a bunch of open source react apps in https://github.com/auth0-extensions
I found this tutorial really really helpful: http://academy.plot.ly/#react
f8app - https://github.com/fbsamples/f8app
React Native, but same idea. There's also an excellent set of posts at http://makeitopen.com/ which run through how it was built and why.
It's responsible for a lot of my 'aha' moments about Flow type-checking and Redux.
Check this out: https://github.com/zeit/hyper
undefined
undefined
Octopush - A simple GUI for Capistrano built on React and Redux with server-side rendering