In this chapter, we will be exploring how to work with ReactJS properties. We're also going to learn how to integrate ReactJS with an external API (Facebook Open-Graph API) and render incoming data in a set of components. This chapter will cover the following items:
Component properties
Component's data flow
Configuring and consuming Facebook Open-Graph API
Creating a ReactJS component and list data from API
In the Chapter 2, Exploring JSX and ReactJS Anatomy, we talked a lot about ReactJS properties and used them throughout our examples, but so far, we've just used them like HTML properties. They play a role that is far beyond that. It's common to use them to pass data through your components tree that defines your view; to pass configuration properties that come from parent components; to pass callbacks for user input, UI/custom events that need to be triggered outside, and so on.
Properties of a ReactJS component can't be changed once the component is rendered in the DOM.
Properties define the declarative interface of the component. In a h1 element that renders a name property, for example, you can't change this name once it's rendered, unless you create another instance of the component and render it in the same place in the DOM, replacing the old rendered component.
var GreetingsComponent = React.createClass({
render: function() {
return (
<h1>Hello...In the following sections, we're going to learn more about Facebook Open-Graph API and configure it so we can start crafting some code to build our awesome application.
Facebook Open-Graph API is a service for getting, editing, and adding common Facebook resources. Some of its functionalities that you can use in your own application are: login; request user-specific resource permissions such as manage events, post to friends walls, and the list goes on. It has a bunch of functionalities that you can use and integrate your app with. One of the main functionalities used by third-party applications is, of course, the login integration. You can use it just as a login platform, for instance, if you don't want or don't have time to build one.
The API documentation is provided at https://developers.facebook.com/ and it's recommended that you check this out.
If you want to test some requests to their API, without having to start...
We now have our data to pass to the ReactJS component we're going to create. First, let's start with the UserDetails component. This is going to show a link with the logged-in username and the source to this user Facebook page. First, remove our old logout anchor from the index.html file as this is not going to be necessary anymore. Our logout functionality will be moved to our ReactJS component instead. We'll also create another div, named user, above the main div; this new element will hold the UserDetails component. The changes in index.html should look like this:
<h1>Facebook User's list of likes</h1> <div id="user"></div> <div id="main"></div>
You can create the UserDetails ReactJS component at the bottom of the index.jsx file:
var UserDetails = React.createClass({
handleLogout: function () {
FB.logout(function () {
alert("You're logged out, refresh the page in order to login again.");
});
}
...In this chapter, we've learned how to pass properties to ReactJS components and render the UI based on those components. We have also learned how to make a parent component to communicate with its children. We have seen how to configure Facebook Open-Graph API, how to integrate that with ReactJS using login functionality, and how to render the response of an API request call into a set of smaller ReactJS components.
In the next chapter, we are going to dive into stateful components and explore how to make mutable ReactJS components based on a user's input or for any other reason that requires the state to change and your UI to represent that automatically.
© 2016 Packt Publishing Limited All Rights Reserved
