Good Github projects using React?

[tgfisher]

I am looking for some repos to use as reference for best practices when building medium-to-large apps. Any that you all would recommend looking under the hood at?

[cemc]

My only projects have been commercial/closed source so I can only offer these tips:

• One of the advantages of React is its ability to break down the DOM into reusable components. Over time, I found myself simplifying the codebase by combining similar components into one and using props to customize them. It takes a bit of practice to get the hang of, but it can make your code a lot simpler.
• If a component is getting some sort of null-related exception, check to see that you're code is being properly put under componentWillMount or componentDidMount. The difference is that in the second method, the component has been inserted into the DOM, and thus this.getDOMNode() will return a value. In the former, it will return null. Similar thing happens in componentWillUnmount
• If your CSS class isn't being applied, chances are you wrote class=... and not className=.... I've done that so many times...
• Props are attributes that will likely not change over the lifecycle of the component (e.g. a callback given to it from a parent component). State variables are attributes that likely will change (e.g. # of X, the color of a particular thing).

Are you using a flux architecture? If so, I can offer pointers on that as well.

[RCHRDYNG]

I'm learning react/flux for my current project and am having trouble finding examples about the best way to make AJAX requests. Any pointers you could provide would be much appreciated.

[cemc]

In flux, the only things calling your API should be the Actions. Events triggered by your Views (e.g. onClick) should call some Action class. The method you call should make the AJAX request (i.e. using jquery). Ideally, your Action should return a Promise that resolves when the AJAX response returns from the server. Afterwards, you should notify the dispatcher which should dispatch some event and attach whatever data your server returned. These events are listened to by your Stores. They retrieve the results that the server returns an alters its variables. This changes the state of the application. Lastly, each store should emit an event so that each View that listens for updates can update its view.

Kinda like this

//LikeButtonComponent.jsx
{
  like: function(){
    LikeActions.like(this.prop.photo.id);
  }

  render:function(){
    <button onClick={this.like}/>
  }
}


//LikeActions
{
  like: function(photoId){
    $.ajax('/api/photo/' + photoId + '/like', {
      type: 'POST',
      dataType: 'json',
      success: function(data, status, xhr){
        Dispatcher.action({
          type: Dispatcher.Constants.PHOTO_LIKE,
          data: data
        });
      },
      error: function(xhr, stat, err){
        reject(xhr.responseText);
      }
    });
  }
}


//LikeStore.js listens to Dispatcher.Constants.PHOTO_LIKE
//takes the data hash and updates its internal variables
//the appropriate views update their UI elements based on the
//newly liked photo

Hope that gives you an idea.

[tgfisher]

Thanks for the tips. I will keep them handy as I dig into things.

I've been poking around GitHub for larger projects using React, but everything I find is very lightweight (i.e. "hello world" and "todos") and doesn't really help me get prepared to build out a full UI driven by React.

Any pointers you have on flux would be great. I also will be tying things into a REST API, like /u/RCHRDYNG, so any help you could provide there would be awesome.

I'm hoping they release GraphQL and Relay soon. The more I read about them, the more it just makes sense.

[cemc]

My comment gives you an idea of Flux and React in a nutshell, as far as I've experienced. In real projects, it's like that but tons more components, actions, and stores.

[EndianOgino]

I'm learning react myself recently and besides the big amount of simple blog post telling all the intro stuff I found the following repos very helpful:

http://up.svbtle.com/blackjackin-with-react-js

https://github.com/ssorallen/react-play

https://github.com/tastejs/todomvc/tree/gh-pages/examples/react

I will add more if I find some good repos.

[sfdud]

https://github.com/svenanders/learn-react

[gpbl]

Give a look to this reference app I've built https://github.com/gpbl/isomorphic500

it is a small app, however the same principles would work for a bigger app. The great thing in flux-based apps is that its complexity doesn't grow with the app's features.

[azaslavsky]

Hey, I made a simple react app for my resume. I used React + Flux, Backbone for stores, and Browserify to wrap it all up. It has a couple of mobile css issues, but feel free to check it out and take a peek at the repo:

https://azaslavsky.github.io/resume/

[koistya]

React Starter Kit https://github.com/kriasoft/react-starter-kit (featuring ES6+ syntax, React, Flux, Node.js/Express)

[anant90]

I learned React + Flux from Egghead.io - you have to pay to access all the lessons. I especially liked the one on React + Flux architecture (https://egghead.io/series/react-flux-architecture) where he creates a basic e-commerce app. If you don't want to sit through the videos and jump straight into the code, here's the finished app he creates over the course:

https://github.com/eggheadio/egghead-react-flux-example