- Practice rendering React components, making use of the different parts of the component lifecycle
- Build a small React application
In this lab, we're going to build our very own application - a dashboard which shows us tweets from Twitter based on a particular keyword in real time. The real Twitter API requires authentication which is quite complex and out of the scope of this course (feel free to read more about it here). Thus, we will be using fake data from a mock API - that is, we will hardcode some past tweets and pretend the data is coming from the real Twitter API. Not to worry, this is a common practice in software engineering, especially at the early stages of a project or for testing.
The <App /> component is our root component and is responsible for fetching the data and passing it through
to the Tweet wall and our charting library. As you can see, there is a function fetchTweets() which handles
fetching the new lot of tweets and updating the state. Only it's never called! We need to hook this method up
to be called when the component is first mounted. That would be in the componentWillMount() lifecycle method!
Use the componentWillMount() lifecycle method to call fetchTweets().
This is all well and good, but nothing is being printed out to the screen still. Open <TweetWall /> and
investigate. As you can see, <TweetWall /> is expecting the tweets to be accessible from this.state, but
they are being passed down as newTweets from the props. Use componentWillMount() to set this.state.tweets
to be this.props.newTweets.
Important Note: You may have noticed that the data structure is a little bit weird in this lesson.
A much saner approach would be to have an array of all of the tweets in the <App /> and pass
those down to the <TweetWall /> (instead of it aggregating its own array of all tweets),
however that approach wouldn't allow us to work with all the lifecycle methods, which is why we're
doing this in a bit of a roundabout way.
If you've completed the last section, you should now see some tweets in the browser when you load
the app. Great! However, we'd like out tweet wall to update every few seconds and display us more tweets.
In order to do that, we have to set up an intercal to call our fake API every few seconds. Open up <App />
again and observe that startInterval() and cleanUpInterval() already exist. They're just not used.
Use the componentDidMount() and componentWillUnmount() lifecycle hooks to start the interval when
the component is mounted and to clean it up when the component is unmounted.
Now, even though you've fetching new tweets using the interval, they are still not being displayed. This
is because newTweets are being passed down as a prop to <TweetWall />, but the render() function
is only reading the tweets from the state. In order to fix this, use the componentWillReceiveProps() method
to update the state to combine nextProps.newTweets and this.state.tweets. Don't forget that new tweets
should go to the beginning of your array as you want to see the new tweets at the top of the page, not
at the bottom!
Our Tweet wall is starting to look pretty good! There's just a little inefficiency we need to tidy up:
Occasionally, an API call returns no new tweets, however our <TweetWall /> component will still rerender
unnecessarily. We can fix that easily using shouldComponentUpdate(). Use this lifecycle method in
<TweetWall /> to only rerender the component if there are more than 0 new tweets.
Now we've got a live updating Twitter wall. But what would make it even better is a visual representation
of the tweets coming in — a chart perhaps? Open <App /> and notice that we are importing two functions
at the top of the file: initialize and update. These control a third party charting library
Highcharts. The initialize() function is already called in the
constructor() to initialize the chart when the <App /> is created. Now use the componentDidUpdate()
lifecycle method to call the updateChart() function, passing in the number of tweets that were received
at the last request.
Voila! We've got our very own live Twitter wall!
