ReactJs has got a lot of buzz lately, and for some seemingly good reasons, so I thought it would be a good time to check it out and create a little application that streams a real-time Twitter feed.
Right off the bat, one of things I like about React is that it only focuses on “View” part of an MV* (model, view, *) application, so if you have a large legacy application and want to start modernizing it without much stripping of all the existing code, using React might be a suitable approach for you.
What’s a Virtual DOM
React uses what they call a “Virtual DOM” to interact with DOM elements, so when you as a developer are working with React, you actually never get a direct reference to a DOM element, but instead you write JSX code which is very similar to HTML and then React manages the interactions with the DOM for you.
This is where React really shines, because it optimizes the interaction so it is really fast. So whatever changes you want to make to the DOM, you make the changes in the JSX code, and then React figures the fastest possible way to make the changes to the DOM behind the scenes.
The Stream with Node, Twitter, and Socket.IO
So for this sample application, I am using NodeJs for the server, and a Node package called Socket.IO for real-time communication between the server and the client. Since Twitter has some streaming API feeds, I am going to use those to have Socket.IO listen to the stream and send tweets to the client real-time.
Here is the server code that starts up the server and Socket.IO listiner.
Note: for obvious reasons I did not check in the twitter.js file in the secret folder but basically it is the following. You just need to supply your own Twitter credentials. You can set that up on their application site.
The Client Side
On the client side, I am then listening for the stream of tweets via Socket.IO and when a tweet comes in I am firing off a callback function that will update the list of tweets.
The React Code
I have broken my React code into three different files for demo.
The fist file is parent file and it contains the starting point where React is going to take over the DOM and inject my code. React will always have just one starting point per application.
Since in React, you are building components, the basic way do that is to call the React.createClass function. Inside that function you can set several properties as well as add your own properties to create the component.
Ultimately, once a component is built, I then call the React.render function which takes two parameters (the parent component, and in this case, the DOM element I am attaching the component to.
The properties in my TwitterFeed class are as follows:
- getInitialState: this property takes a function that allows you set the initial state of properties I am going to use. In my case I have a tweets array. This property should only be called in the parent component.
- addTweet: this is a function I created to add a tweet to the tweet list and then setting the state. The state is what React uses to pass data from one component to the other. Only the parent component should change the state. All child components are immutable and only listen for changes made by the parent.
- componentWillMount: this is a React event that fired right before it renders the component. There are various event similar to this one like componentDidMount which fire immediately after rendering the component.
- render: this is the function the renders the final HTML to the DOM. Inside this render function I am calling the child component TwitterList and passing that component the tweets array from the state. The second parameter is where in the DOM you want the component to be attached to.
This component takes the tweets from the parent Twitter-Feed component and create the DOM container which is a DIV and then makes a call to its child to create a single tweet component.
This components gets the tweets from the parent via the “props” object.
Also note that am calling a propTypes property. This is useful as it sets the expectation of what type of data it expects. When this is set and you don’t pass in the correct data to the component, React will send a nice error explaining what went wrong in the console.
The final child component builds the single tweet row. It is passed the tweet from the parent Twitter-List component.
The Final Result
Obviously I need to work on the presentation a little bit but when the tweet list is automatically being updating realtime as the tweets are being made.
I have uploaded the code to GitHub, so take a look and let me know what you think.