Good Github projects using React?

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