javascript - Rendering react component in html page

So I just got fortable with ReactJS within a few and want to actually start creating things with it. Before starting to really get into coding it, I made a basic test to see if React is doing what it is supposed to, and it's not. It's not rendering at all, and I don't see any Syntax errors in the code.
<style> in the index file is just for test of course, I'll use Sass later in external files of course. What am I missing or doing wrong here? Thank you in advance.

var React = require('react');
var ReactDOM = require('react-dom');

var Box = React.createClass({
   render: function () {
       return (
           
           <div>
               <h1>React</h1> 
               <h1>React2</h1>
           </div>
           
       );
   } 
});

ReactDOM.render(<Box />, document.getElementById('app'));

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
       <script src="@15/dist/react.min.js"></script>
       <script src="@15/dist/react-dom.min.js"></script>
       <script src=".2.1.min.js"></script>
       <script src="app.js"></script>
       
       <style>
           body {
               height: 100%;
               width: 100%;
               background-color: rebeccapurple;
           }
           
           #app {
               height: 100px;
               width: 100%;
               background-color: rgba(255,255,255,0.1);
           }
           
           * {
               margin: 0 auto;
               padding: 0;
           }
           
           h1, h2 {
               color: white;
           }
    
       </style>
   </head>
   <body>
      
       <div id="app"></div>
       
   </body>
</html>

var React = require('react');
var ReactDOM = require('react-dom');

var Box = React.createClass({
   render: function () {
       return (
           
           <div>
               <h1>React</h1> 
               <h1>React2</h1>
           </div>
           
       );
   } 
});

ReactDOM.render(<Box />, document.getElementById('app'));

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
       <script src="https://unpkg./react@15/dist/react.min.js"></script>
       <script src="https://unpkg./react-dom@15/dist/react-dom.min.js"></script>
       <script src="https://code.jquery./jquery-3.2.1.min.js"></script>
       <script src="app.js"></script>
       
       <style>
           body {
               height: 100%;
               width: 100%;
               background-color: rebeccapurple;
           }
           
           #app {
               height: 100px;
               width: 100%;
               background-color: rgba(255,255,255,0.1);
           }
           
           * {
               margin: 0 auto;
               padding: 0;
           }
           
           h1, h2 {
               color: white;
           }
    
       </style>
   </head>
   <body>
      
       <div id="app"></div>
       
   </body>
</html>

Share Improve this question edited Apr 2, 2018 at 3:33 Mayank Shukla 105k19 gold badges162 silver badges145 bronze badges asked Mar 31, 2017 at 16:52 Cass 411 silver badge4 bronze badges

Does it give any errors in your browsers console? if so please add the message. – TRomesh Commented Mar 31, 2017 at 16:54
3 Don't use require if you already include the file. – Andrew Li Commented Mar 31, 2017 at 16:56
codepen.io/anon/pen/NpeLjL Seems to work fine. – Matt Commented Mar 31, 2017 at 16:58
Your JavaScript may be executing before your document is being loaded and thus document.getElementById('box') may not be resolved. – Dan Commented Mar 31, 2017 at 17:00
I get this error in the Console: app.js:8 Uncaught SyntaxError: Unexpected token < @AndrewLi Ty for letting me know – Cass Commented Mar 31, 2017 at 17:17

| Show 2 more ments

1 Answer 1

Sorted by: Reset to default 5

Follow these steps it will work:

1. Remove these lines:

var React = require('react');
var ReactDOM = require('react-dom');

2. include the script after the div where you defined the id, like this:

<body>
   <div id="app"></div>
   <script src="app.js"></script>
</body>

3. Include the reference of babel, it required to transpile the JSX code into plain js code, include this reference in header:

<script src="https://cdnjs.cloudflare./ajax/libs/babel-standalone/6.24.0/babel.js"></script>

4. Define the type of the script, like this:

<script src="app.js" type='text/jsx'></script>

Check the working example:

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
       <script src="https://unpkg./react@15/dist/react.min.js"></script>
       <script src="https://unpkg./react-dom@15/dist/react-dom.min.js"></script>
       <script src="https://cdnjs.cloudflare./ajax/libs/babel-standalone/6.24.0/babel.js"></script>
       <script src="https://code.jquery./jquery-3.2.1.min.js"></script>
  </head>
  <body>
      <div id="app"></div>
      <script type='text/jsx'>
         var Box = React.createClass({
             render: function () {
                 return (
                    <div>
                       <h1>React</h1> 
                       <h1>React2</h1>
                    </div>
                 );
             } 
         });

         ReactDOM.render(<Box />, document.getElementById('app'));
      </script>
   </body>
</html>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Rendering react component in html page - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)