在 React Js 上需要帮助

Question

我是 React Js 的新手，我的代码无法正常工作。请看下面：

这是我的脚本文件Main.jsx。此文件由 react 编译，输出放在 'dist' 文件夹下的 main.js 文件中。

var react = require("react"),
reactDom = require("react-dom");
var myComponent = react.createClass({
    render: function () {
        return <div><h4>I am rendered by react.</h4></div>;
    }
});

reactDom.render(<myComponent />, document.getElementById("basicDiv"));

是Index.html

<html>    
<head>
    <base href="./" />
    <title>App title</title>    
    <script src="node_modules/react/dist/react.js"></script>
    <script src="node_modules/react/dist/react-with-addons.js"></script>
    <script src="node_modules/react-dom/dist/react-dom.js"></script>
</head>

<body>
    <div id="basicDiv"></div>

    <!-- React compiled code is in dist folder and is accessible -->
    <script src="dist/main.js"></script>
</body>

</html>

当我在浏览器中运行 index.html 文件时， 输出是 空白屏幕。请查看下面 chrome 开发工具检查器 window:

的屏幕截图

'myComponent' 的内容未在浏览器中呈现。我看过许多使用相同代码的教程，但它不起作用……不知道为什么。

请帮助解决这个问题，如果可能的话，请为我提供一些最新版本的示例代码/教程。提前致谢

更新

请注意，我在我的 HTML 文件中包含了 React 库引用，这使我可以在我的脚本文件中导入 React 时自由使用 "React" 或 "react" 作为变量名.在这种情况下，这里不强制使用"React"（大写R）作为变量名。

最终更新

因此解决方案（如 Damien Leroux 所回答）是使反应组件 variable-name 以大写字母开头。 'var myComponent' 必须是 'var MyComponent' 或 'var Mycomponent'。

Answer 1

反应 class 必须始终以大写字母开头：

var MyComponent = react.createClass({

阅读user-defined-components-must-be-capitalized

Answer 2

不仅你的 React 组件必须以大写字母开头，请参阅：

但您还必须像

一样导入反应

var React = require("react"),
ReactDom = require("react-dom");

即大写字母，因为内部 JSX 被转译为 React.createElement()，在这种情况下，它会说未定义反应。

你的代码必须像

var React = require("react"),
ReactDom = require("react-dom");
var MyComponent = React.createClass({
    render: function () {
        return <div><h4>I am rendered by react.</h4></div>;
    }
});

ReactDom.render(<MyComponent />, document.getElementById("basicDiv"));

Answer 3

import React from 'react'
import './Aboutus.css'
import Header from '../Home/Header/Header.jsx'
import Footer from '../Home/Footer/Footer.jsx'

var stylesheader = {
  paddingTop: 50, 
  textAlign:'center', 
  color: '#204871'
};

var stylehead = {
  paddingLeft: 200,
  paddingRight:200, 
  paddingTop:20, 
  color: '#204871'
};

var styles = {
  paddingTop: 120, paddingLeft:20,
  color: '#128bea', 
  fontSize: 26
};

var style1 = {
  paddingTop:100,
  color: '#204871' 
};

class Aboutus extends React.Component {

    render() {

  var title = "we are a team";

  var leadership = [
  {
    "name":"abc",
    "department":"abc",
    "phone":"abc",
    "email":"abc"
  },
  {
     "name":"abc",
    "department":"abc",
    "phone":"abc",
    "email":"abc"
  }
  ];

  var business = [
  {
     "name":"abc",
    "department":"abc",
    "email":"abc"
  },
  {
       "name":"abc",
    "department":"abc",
    "email":"abc"
  },
  ];

  var algorithm = [
  {
       "name":"abc",
    "department":"abc",
    "email":"abc"
  },
  {
       "name":"abc",
    "department":"abc",
    "email":"abc"
  },
  {
      "name":"abc",
    "department":"abc",
    "email":"abc"
  },
  {
       "name":"abc",
    "department":"abc",
    "email":"abc"
  }
  ];

   var developer = [
  {
      "name":"abc",
    "department":"abc",
    "email":"abc"
  },
  {
       "name":"abc",
    "department":"abc",
    "email":"abc"
  },
  {
      "name":"abc",
    "department":"abc",
    "email":"abc"
  }
  ];

     var row1=leadership.map(row => {
                              return <div className="column">
                                       <div className="card"> 
                                          <div className="container">
                                              <h2>{row.name}</h2>
                                              <p>{row.department}</p>
                                              <p>{row.phone}</p>
                                              <p>{row.email}</p>
                                          </div>
                                        </div>
                                      </div> 
                              });

      var row2=business.map(row => {
                              return <div className="column">
                                       <div className="card"> 
                                          <div className="container">
                                              <h2>{row.name}</h2>
                                              <p>{row.department}</p>
                                              <p>{row.email}</p>
                                          </div>
                                        </div>
                                      </div> 
                              });

       var row3=algorithm.map(row => {
                              return <div className="column">
                                       <div className="card"> 
                                          <div className="container">
                                              <h2>{row.name}</h2>
                                              <p>{row.department}</p>
                                              <p>{row.email}</p>
                                          </div>
                                        </div>
                                      </div> 
                              });

       var row4=developer.map(row => {
                              return <div className="column">
                                       <div className="card"> 
                                          <div className="container">
                                              <h2>{row.name}</h2>
                                              <p>{row.department}</p>
                                              <p>{row.email}</p>
                                          </div>
                                        </div>
                                      </div> 
                              });

      return (

         <div className="home-component">

                <div className="home-header">
                <Header/>
                </div>

                <div className="home-content" >
                            <h1 style={stylesheader}> Meet the team </h1>
                            <h2 style={stylehead}>{title}</h2>

                            <h2 style={styles}> Leadership </h2>
                            <div className="row" style={style1}>
                              {row1}
                            </div>

                            <h2 style={styles}> Business Development </h2>
                            <div className="row" style={style1}>                    
                             {row2}                           
                            </div>

                            <h2 style={styles}> Algorithm Development </h2>
                            <div className="row" style={style1} >                    
                             {row3}                         
                            </div>

                            <h2 style={styles}>Software Development </h2>
                             <div className="row" style={style1} >                    
                              {row4}
                             </div>  
                </div>

                <Footer/>

         </div>
    );

    }
}

export default Aboutus;

在 React Js 上需要帮助

Need help on React Js

html

javascript

dom

jsx

reactjs