Integrating Facebook Web SDK with ReactJS Component State

Yes you are right and can very well integrate facebook login with react component.

A sample login component can be like this -

import React from 'react';

class LoginComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {

    };
  }

  loadFbLoginApi() {

        window.fbAsyncInit = function() {
            FB.init({
                appId      : FB_APP_ID,
                cookie     : true,  // enable cookies to allow the server to access
                // the session
                xfbml      : true,  // parse social plugins on this page
                version    : 'v2.5' // use version 2.1
            });
        };

        console.log("Loading fb api");
          // Load the SDK asynchronously
        (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'));
  }

  componentDidMount() {
        this.loadFbLoginApi();
    }

    testAPI() {
      console.log('Welcome!  Fetching your information.... ');
      FB.api('/me', function(response) {
      console.log('Successful login for: ' + response.name);
      document.getElementById('status').innerHTML =
        'Thanks for logging in, ' + response.name + '!';
      });
    }

    statusChangeCallback(response) {
      console.log('statusChangeCallback');
      console.log(response);
      if (response.status === 'connected') {
        this.testAPI();
      } else if (response.status === 'not_authorized') {
          console.log("Please log into this app.");
      } else {
          console.log("Please log into this facebook.");
      }
    }

    checkLoginState() {
      FB.getLoginStatus(function(response) {
        this.statusChangeCallback(response);
      }.bind(this));
    }

    handleFBLogin() {
        FB.login(this.checkLoginState());
        }

    render() {
        return (
                <div>
                    <MyButton
                        classNames = "btn-facebook"
                        id         = "btn-social-login"
                        whenClicked = {this.handleFBLogin}
                        >
                            <span className="fa fa-facebook"></span> Sign in with Facebook
                    </MyButton>
                </div>
               );
    }
}

export default LoginComponent;

When response status received is connected then it means user is logged in via Facebook and you can set state on your component to reflect that. e.g

response.status === 'connected'
this.setState({userLoggedIn:true});

I am using a custom button component (MyButton) in React which you can very easily create.

What about using the npm react-facebook? It includes a few components like "Initialize" (this is for expose the FB Api in a function children) or a LoginButton that handles the facebook pop up screen for login, or if you wanna make your own button you can use component Login. Just provide the facebook app id to the FacebookProvider component at the root of you project (called only once) and use the components that providea such great node module as react-facebook.

https://www.npmjs.com/package/react-facebook