Ask HN: What good open source projects written in React that I can learn from? | Hacker News Reader

Ask HN: What good open source projects written in React that I can learn from?

270 pointsGutenYe71 comments

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

Although it's cool that they open sourced this, I really wished they would open source their zero-knowledge backup client :(

Yes, every zero knowledge cryptosystem should be open source on the client side. Otherwise, what is the point?

This is a nice, non-trivial, but not too big project in react and redux:

https://github.com/andrewngu/sound-redux

Pretty nice commit history, this actually could be used to learn.

It is! It's part of a tutorial

Plugging in our own :) A Hearthstone replay engine

https://github.com/HearthSim/Joust

Example: https://hsreplay.net/replay/rjUdp6iC5FcQmKGmLX35RA

Oh this is very nice, didn't know you could export games to be replayed on the web, well done.

The whole thing is open source. Go check it out!

https://github.com/HearthSim/HSReplay.net

https://github.com/HearthSim/python-hearthstone

https://github.com/HearthSim/Hearthstone-Deck-Tracker

https://github.com/HearthSim/HearthstoneJSON

https://github.com/HearthSim/extract-scripts

Swing by the #hearthsim IRC channel some time and ping me (jleclanche) if you are interested.

This is interesting to see Heartstone mechanics with no animation or effects.

The new Wordpress frontend code seems to be utilizing React:

https://developer.wordpress.com/calypso/

https://github.com/Automattic/wp-calypso

It does (also redux), and their repo also contains a lot of useful reading material

I remember doing a lot of WP consulting in the 2006-12 timeframe. The PHP was (is?) god awful. Difficult to parse, difficult to follow, and followed no discernible best practices. Spaghetti all the way down.

I hope the React is better!

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

Thanks!

We'd love to have OSS help. We try to be as beginner friendly as possible.

Getting started is as easy as `npm install; npm start`. Here are our contributing docs - https://github.com/devtools-html/debugger.html/blob/master/C...

We have lots of great "up for grabs" issues for first time contributors - https://github.com/devtools-html/debugger.html/issues?q=is%3.... If you're interested, comment on one of the issues and it's yours.

This week we've had lots of first time contributors and there's a lot of low hanging fruit.

This sounds like fun. I'll have to see if my kiddos will cooperate with going to bed on time this weekend.

I wonder what the reasoning is behind not using JSX.

Not needing a transpiler would be a major plus.

yep - at the time we were not sure if we would want to transpile the code.

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."

[1] https://github.com/devtools-html/debugger.html

Redux is a great framework for ux development that maps well to architectural patterns like a service bus

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.

Is this based on OpenCV? You say "machine learning models", but the Github org says "computer vision as a service". Screenshots would be nice too :)

Hello, this will clear things up:

https://ashishchaudhary.in/gsoc-2016-finish

I should've posted it before!

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.

https://github.com/5tefan/universal-react-demo

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.

https://jedireza.github.io/aqua/

https://github.com/jedireza/aqua

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:

- http://breakerapp.com/r/breakerapp

- http://github.com/larvalabs/breaker

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.

[1] https://www.mattermost.org

As much as I'm reluctant to blame people who try to get cool products out there, I must say that I actually uninstalled mattermost from my server (well, deactivated from gitlab) after reading its source code, both go and react. I would not recommend to use it to learn react.

Hi @oelmekki,

Could you share more on your issues with how Mattermost implements React?

Hi @it33,

Sorry I had to say that, I know how depressing it can sound. Note that we're in the context of recommending examples to someone wanting to learn about react, so there's an expectation about finding the best code around.

The general critic I would make about Mattermost's React source code is that it does not take advantage of react composable nature, and instead just drop all the code in huge render methods, which are fairly difficult to read, and probably to maintain.

Here is an example: https://github.com/mattermost/platform/blob/master/webapp/co...

The render method takes 170 lines, putting tons of "stuff" in. This file could easily have been split into 15 to 20 components to make it easier to reason about.

Same here: https://github.com/mattermost/platform/blob/bb69e98631b25419...

Almost 200 lines in the same function, containing rendering, looping, conditional execution, more rendering, that is, about everything. This should be split into more components and more functions. Most of files can be taken as such examples.

I think that's actually a problem for Mattermost, because when you run someone else code on your server, you take the responsibility for security breaches. I know how horrible this sounds, it's super cool to be able to run a slack-like app for free, self hosted. The thing is, reading the code, I'm not confident the tools used has been properly understood yet, which in turn makes me reluctant to execute it on my servers.

I wish you the best, though, you're on something with Mattermost!

EDIT: please also note this is not just Mattermost. I usually review part of code of apps I want to put on premise, and decide whether to keep them or not based of my level of confidence in it.

Thanks oelmekki,

Highly appreciate the feedback--critique is valued, and we welcome hearing it publicly.

It benefits Mattermost to have more people with deep React experience looking over the project and suggesting changes.

One example is the discussion that influenced us to adopt React Router: https://github.com/mattermost/platform/issues/790

Mattermost started in the early days of React and you're right not all the patterns were in place from the start--and you've pointed out areas we know we want to re-write.

We're doing this by starting fresh with new React Native apps using Redux: https://github.com/mattermost/mattermost-mobile

The goal is to create a model for the future with React and Redux, and move that back into the server.

Would you be interested in dropping by our Developer channel some time (https://pre-release.mattermost.com/core/channels/developers) and maybe just hanging out with us and sharing more of your thoughts?

For example, how would you break the re-write into parts, and prioritize?

How might we organize tickets for people to help?

On Wednesdays at 10am California time we have open developer meetings via Hangouts if you're up for speaking in person (or any time really, we're always looking for feedback).

Just a thought,

What I would note is that we have significant test coverage on the Mattermost server and hundreds of manual tests run for each release, so the quality of the end product is generally high, even if the React code isn't pristine.

I would say the Mattermost project is closer to the beginning than it is to the end. Significant refactoring is on our roadmap, and we'd highly welcome help.

Very classy and open-minded response and attitude.

Sure! I'm already under contract half time, and I work on my own company for like two full time, so I can't be a big contributor, but I contribute here and there to open source projects, so I can look around from time to time.

> For example, how would you break the re-write into parts, and prioritize?

I would probably do it component per component, factoring out complexity one method at a time. I avoid "big rewrites", aka v2 or whatever, because I've seen too many startups doing that to disastrous consequences (typically: a whole dev team not releasing anything for like a year, and a "new" app that is at the end not better than the previous one). Not really a surprise: v1s are iterated on and always keep track of reality, by releasing often - which v2s never do, they just try to bring everything at once.

> How might we organize tickets for people to help?

I guess people at Gitlab have way better ideas than me, given how successful they've been at that :) I see you already have a "help wanted" section, that's probably the most important, so contributors can quickly spot low hanging fruits and help a bit.

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

https://react.rocks/

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

https://github.com/masasfm

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://www.presenter.club/

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.

https://github.com/Automattic/wp-calypso

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

https://github.com/robinjoseph08/pokedextracker.com

Octopush - A simple GUI for Capistrano built on React and Redux with server-side rendering

https://github.com/octahedron/octopush

I helped out a lot with this codebase, it's well on its way to becoming a production React SPA:

https://github.com/Linode/manager

Sentry is also a nice non-trivial one: https://github.com/getsentry/sentry/search?l=JSX

https://medium.mybridge.co/22-amazing-open-source-react-proj...

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

Reply on news.ycombinator.com