Question

所以我对几个内部的ReactJS很满意，并希望真正开始用它来创造它。在开始真正编写代码之前，我做了一个基本测试，看看React是否正在做它应该做的事情，而事实并非如此。它根本没有渲染，我在代码中看不到任何语法错误索引文件中的<style>当然只是用于测试，我当然会在外部文件中使用Sass。我在这里错过了什么或做错了什么？提前谢谢。

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.com/react@15/dist/react.min.js"></script>
       <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
       <script src="https://code.jquery.com/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>

Answer 1

按照以下步骤操作：

1。删除以下行：

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

2。在您定义ID的script之后加div，如下所示：

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

3。包括babel的引用，transpile JSX代码所需的引用为js代码，包括此引用头：

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

4。定义script的类型，如下所示：

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

检查工作示例：

＆＃13;

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
       <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
       <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
       <script src="https://code.jquery.com/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>

＆＃13;

在html页面中渲染反应组件

1 个答案: