+ Start a Discussion
Rohit TripathiRohit Tripathi 

Sample REACT code

Can anyone help me with a simple sample code in Visual Force which uses REACT. I am trying to use react in VF but it is not rendering any component. 
Best Answer chosen by Rohit Tripathi
pconpcon
The problem is that 1) you're not using https in your request to get the javascript.  2) The fb.me url does not honor SSL request all the way up the stack.  If you use the following it works.
 
<apex:page docType="html-5.0" sidebar="false" showHeader="false">
<html lang="en">
<head>
     <meta charset="utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"/> 
     <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"/>
     <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"/>
          
     <script type="text/jsx">
          var Rep = React.createClass({
               render: function() {
                    return(
                         <div>
                              <iframe width="400" height="300" src="https://www.youtube.com/embed/GZdLudjkJSY"></iframe>     
                         </div>
                    );
               }
          });

          var RecipeBook = React.createClass({
               render: function() {
                    return (
                         <div>
                              <div>
                                   Hello, world! I am a RecipeBook.
                                   <h4> My first REACT </h4> 
                              </div>
                              <Rep/>
                         </div>
                    
                    );
               }
          });

          React.render(
               <RecipeBook/>,
               document.getElementById('app-container')
          );
     </script>
</head>
<body>
     <div id="app-container"> </div>
     <div>
          <h2>hello</h2>
     </div>
</body>
</html>
</apex:page>

Using '//foo.js' the browser will choose the correct http/https endpoint

All Answers

pconpcon
Can you please provide the Visualforce code you tried?  I suspect that the apex:page attributes are not set properly.
Rohit TripathiRohit Tripathi
hello Pcon,

Thanks for getting back to me. Here is my code :

<apex:page docType="html-5.0" sidebar="false" showHeader="false">
<html lang="en">
<head>
    <meta charset="utf-8"/>
      <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
      <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <Script src="http://fb.me/react-0.12.2.js"/> 
    <Script src="http://fb.me/JSXTransformer-0.12.2.js"/>
       
 <script type="text/jsx">
   
    
    var Rep = React.createClass({
    render: function(){
    return(
     <div>

       <iframe width="400" height="300" src="https://www.youtube.com/embed/GZdLudjkJSY"></iframe>     
    
     </div>
    );
    }
    });
    
    var RecipeBook = React.createClass({
      render: function() {
        return (
        <div>
          <div>
            Hello, world! I am a RecipeBook.
            <h4> My first REACT </h4> 
          </div>
          <Rep/>
          </div>
       
        );
      }
    });

    React.render(
      <RecipeBook/>,
      document.getElementById('app-container'));
    </script>

</head>

<body>
    <div id="app-container"> 
    </div>
    <div> <h2> hello </h2> </div>
</body>
</html>

</apex:page>
pconpcon
The problem is that 1) you're not using https in your request to get the javascript.  2) The fb.me url does not honor SSL request all the way up the stack.  If you use the following it works.
 
<apex:page docType="html-5.0" sidebar="false" showHeader="false">
<html lang="en">
<head>
     <meta charset="utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"/> 
     <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"/>
     <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"/>
          
     <script type="text/jsx">
          var Rep = React.createClass({
               render: function() {
                    return(
                         <div>
                              <iframe width="400" height="300" src="https://www.youtube.com/embed/GZdLudjkJSY"></iframe>     
                         </div>
                    );
               }
          });

          var RecipeBook = React.createClass({
               render: function() {
                    return (
                         <div>
                              <div>
                                   Hello, world! I am a RecipeBook.
                                   <h4> My first REACT </h4> 
                              </div>
                              <Rep/>
                         </div>
                    
                    );
               }
          });

          React.render(
               <RecipeBook/>,
               document.getElementById('app-container')
          );
     </script>
</head>
<body>
     <div id="app-container"> </div>
     <div>
          <h2>hello</h2>
     </div>
</body>
</html>
</apex:page>

Using '//foo.js' the browser will choose the correct http/https endpoint
This was selected as the best answer
Rohit TripathiRohit Tripathi
it worked. thanks so much !!!