Use Facebook login button with reaction

Question

This is my first time using Facebook authentication for my application. I can make it work fine through the tutorial, I can log in to the user’s system and log out of the system using the convenient Facebook login button, as shown in the example in the Facebook SDK docs:

https://developers.facebook.com/docs/facebook-login/web

I like to use this button because it is easy, automatically subscribes to the Facebook branding requirements and automatically becomes the Facebook exit button when a user logs in. Absolutely in every way. Here is what the button code with the automatic exit looks like:

<fb:login-button data-auto-logout-link="true" scope="public_profile" onlogin="checkLoginState();">
</fb:login-button>

It looks like sauce until I try it on the ReactJS page.

// From the tutorials
<script type='text/babel'>
  var CommentBox = React.createClass({
    render: function() {
      return (
        <div className="commentBox">
          Hello, world! I am a CommentBox.<br />
          // MY ADDITION ... it breaks
          <fb:login-button data-auto-logout-link="true" scope="public_profile,email" onlogin="checkLoginState();">
          </fb:login-button>
        </div>
      );
    }
  });
  ReactDOM.render(
    <CommentBox />,
    document.getElementById('content')
  );
</script>

I also tried this as follows:

ReactDOM.render(
    <fb:login-button data-auto-logout-link="true" scope="public_profile,email" onlogin="checkLoginState();"></fb:login-button>,
    document.getElementById('loginbutton')
);

FB SDK , : "JSX - XML". .

React, FB? , , Facebook React, , . ( - , , / .)

Answer 1

, Facebook, :

https://developers.facebook.com/docs/facebook-login/web/login-button

<div class="fb-login-button" data-size="medium" data-auto-logout-link="true"></div>

, Facebook SDK onlogin, , , :

<div class="fb-login-button" data-size="medium" data-auto-logout-link="true" data-onlogin="checkLoginState();"></div>

, SDK, . , :

// This won't work w/ custom <div ...> login buttons
(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

, :

(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=YOUR-APP'S-ID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

(, 2,8 2,5) SDK, FB SDK.

Answer 2

, https://github.com/keppelen/react-facebook-login

, .