Reader small image

You're reading from  Getting Started with React

Product typeBook
Published inApr 2016
Reading LevelIntermediate
Publisher
ISBN-139781783550579
Edition1st Edition
Languages
Tools
Right arrow
Authors (3):
Doel Sengupta
Doel Sengupta
author image
Doel Sengupta

Doel Sengupta is a software programmer and is working in the industry for over 7 years, as a DevOps engineer and as a developer building enterprise level Web and mobile applications using RubyonRails and Rhomobile, Chef. Currently she is exploring the Javascript ecosystem. She has been a speaker in Ruby conferences. She finds interest in life sciences and has publications of her work in customised human joint prostheses design using Ansys & Mimics. She is an avid blogger (www.doels.net) writing about her technical and not-so-technical passions like culinary, photography, films. Follow her on twitter @doelsengupta.
Read more about Doel Sengupta

Manu Singhal
Manu Singhal
author image
Manu Singhal

Manu Singhal has been a programmer for 8 years and loves to code on Ruby and React. These days, he is busy cofounding a startup in e-commerce. In earlier roles, he has developed many enterprise and consumer based web/mobile applications and has also been a speaker at Ruby Conferences in India and the USA. He never misses a chance to play tennis and go hiking. He has worked with Tata Consultancy Services and McKinsey & Company as a software developer and an architect. He has contributed in books on Rhomobile and RubyMotion by Packt earlier.
Read more about Manu Singhal

Danillo Corvalan
Danillo Corvalan
author image
Danillo Corvalan

Danillo Corvalan is a software engineer who is passionate about software patterns and practices. He has a keen interest in the rapidly changing world of software development. He is quite insistent about the need of fast and reliable frameworks. He is originally from Brazil, now living in Amsterdam, the Netherlands. He loves biking a lot. In Brazil, he worked on applications for the general public and lawyers, at the Court of Justice in his hometown city, Cuiab/MT. Then, he moved to Florianpolis/SC, and worked at Bravi Software for developing hybrid and responsive web apps for education. Now, in Amsterdam, he is working at Vigour.io and helping to develop live multiscreen and responsive apps. From the web client-side perspective, in general, he has been in touch with technologies, such as vanilla JavaScript, jQuery, Backbone, and ReactJS. For the past 5 years, Danillo has also worked with open source platforms and JavaScript on the server side (Node.js). He has played with React Native in order to develop native mobile applications with ReactJS.
Read more about Danillo Corvalan

View More author details
Right arrow

Rendering data in a ReactJS component


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.");
    });
  }
...
lock icon
The rest of the page is locked
Previous PageNext Page
You have been reading a chapter from
Getting Started with React
Published in: Apr 2016Publisher: ISBN-13: 9781783550579

Authors (3)

author image
Doel Sengupta

Doel Sengupta is a software programmer and is working in the industry for over 7 years, as a DevOps engineer and as a developer building enterprise level Web and mobile applications using RubyonRails and Rhomobile, Chef. Currently she is exploring the Javascript ecosystem. She has been a speaker in Ruby conferences. She finds interest in life sciences and has publications of her work in customised human joint prostheses design using Ansys & Mimics. She is an avid blogger (www.doels.net) writing about her technical and not-so-technical passions like culinary, photography, films. Follow her on twitter @doelsengupta.
Read more about Doel Sengupta

author image
Manu Singhal

Manu Singhal has been a programmer for 8 years and loves to code on Ruby and React. These days, he is busy cofounding a startup in e-commerce. In earlier roles, he has developed many enterprise and consumer based web/mobile applications and has also been a speaker at Ruby Conferences in India and the USA. He never misses a chance to play tennis and go hiking. He has worked with Tata Consultancy Services and McKinsey & Company as a software developer and an architect. He has contributed in books on Rhomobile and RubyMotion by Packt earlier.
Read more about Manu Singhal

author image
Danillo Corvalan

Danillo Corvalan is a software engineer who is passionate about software patterns and practices. He has a keen interest in the rapidly changing world of software development. He is quite insistent about the need of fast and reliable frameworks. He is originally from Brazil, now living in Amsterdam, the Netherlands. He loves biking a lot. In Brazil, he worked on applications for the general public and lawyers, at the Court of Justice in his hometown city, Cuiab/MT. Then, he moved to Florianpolis/SC, and worked at Bravi Software for developing hybrid and responsive web apps for education. Now, in Amsterdam, he is working at Vigour.io and helping to develop live multiscreen and responsive apps. From the web client-side perspective, in general, he has been in touch with technologies, such as vanilla JavaScript, jQuery, Backbone, and ReactJS. For the past 5 years, Danillo has also worked with open source platforms and JavaScript on the server side (Node.js). He has played with React Native in order to develop native mobile applications with ReactJS.
Read more about Danillo Corvalan