Chapter 5. Use Your React Components with Another Library

React is a great library used for building user interfaces. What if we want to integrate it with another library that is responsible for receiving data? In the previous chapter, we outlined five tasks that our Snapterest web application should be able to perform. We decided that four of them were related to the user interface, but one of them was all about receiving data; receive tweets from the Snapkite Engine server in real time.

In this chapter, we'll learn how to integrate React with the external JavaScript library and what React component lifecycle methods are, all while solving the very important task of receiving data.

Using another library in your React component

As we discussed earlier in this book, our Snapterest web application will consume a live stream of tweets. In Chapter 1, Installing Powerful Tools for Your Project, you installed the Snapkite Engine library that connects to the Twitter Streaming API, filters the incoming tweets, and sends them to our client application. In turn, our client application needs a way of connecting to that live stream and listening for the new tweets.

Luckily, we don't need to implement this functionality ourselves because we can reuse another Snapkite module called snapkite-stream-client. Let's install this module.

Navigate to the ~/snapterest directory and run the following command:

npm install --save snapkite-stream-client

It will install the snapkite-stream-client module, and add it to package.json as a dependency.

Now we're ready to reuse the snapkite-stream-client module in one of our React components.

In the previous chapter, we created the Application component...

Understanding React component's lifecycle methods

Think about what a React component does. It describes what to render. We know that it uses the render() method for this. However, sometimes, having only the render() method is not enough because what if we want to do something before or after the component has rendered? What if we want to be able to decide whether a component's render() method should be called at all?

Looks like what we're describing is a process during which the React component is rendered. This process has various stages, for example, before render, render, after render, and so on. In React, this process is called the component's lifecycle. Each React component goes through this process. What we want is a way to hook into that process, and call our own functions at different stages of that process in order to have a greater control over it. For this purpose, React provides a number of methods that we can use to get notified when a certain stage in a component's lifecycle...

Summary

In this chapter, we created our Stream component and learned how to integrate a React component with the external JavaScript library. We also learned about the React component's lifecycle methods. We also focused on and discussed the mounting and unmounting methods in detail and started implementing the StreamTweet component.

In our next chapter, we'll take a look at the component lifecycle's updating methods. We'll also implement our Header and Tweet components, and learn how to set the component's default properties.