ReactJS 入门

Question

尝试获取组件工作的基本示例。以下步骤是我结合各种入门指南所遵循的步骤

如下设置节点依赖

 "dependencies": {
    "http-server": "~0.8.0",
    "forever": "0.14.1",
    "gulp": "^3.9.0",
    "gulp-chmod": "^1.2.0",
    "gulp-inject": "^1.3.1",
    "gulp-useref": "^1.2.0",
    "grunt": "0.4.5",
    "grunt-cli": "0.1.13",
    "grunt-contrib-copy": "0.8.0",
    "grunt-ssh-deploy": "~0.2.8",
    "react": "15.1.0"

  },

index.html 是这样的

 <!DOCTYPE html>
<html>

    <body>
     <div id="outer-container">
    <h1>This is the outer container</h1>
  </div>
  <script type="text/javascript" src="dist/react-dom.js"></script>
  <script type="text/javascript" src="dist/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
  <script type="text/babel" src="js/components/outerContainer.js"></script>

// 组件js文件

  var Hello = React.CreateClass({
    render: function() {
        return <div> 
        <h1> Hello at {this.props.now} </h1>
        </div>
    }

});


ReactDOM.render(<Hello now = { new Date().toString()} />, 
    document.getElementById('outer-container'));

出现以下错误提示

react-dom.js:41 Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined

和

 Uncaught TypeError: React.CreateClass is not a function

我正在尝试在客户端使用它。我看到浏览器中加载了两个源文件

Answer 1

您所遵循的指南似乎有点过时了。这里有几件事：

• React.renderComponent 已经有一段时间没有更新了。当前将组件渲染到 DOM 的方法是使用ReactDOM.render：

  ReactDOM.render(
      <Hello now={new Date().toString()} />, 
      document.getElementById('outer-container')
  );
  

• 您遇到了区分大小写的问题：您正在调用react.CreateClass，而该方法实际上是React.createClass。 JavaScript 是一种区分大小写的语言。

• 你需要把你的脚本标签放在你想要渲染你的组件的div之后。由于您的脚本文件是内联执行的，因此对 document.getElementById 的调用将失败，因为页面上尚不存在该元素。

• 脚本标签使用类型text/jsx，浏览器本身无法理解。您将需要包含一个浏览器支持的 jsx 处理器。 Babel 的browser.js 应该可以工作，但您需要将type 从text/jsx 更改为text/babel：

  <!DOCTYPE html>
  <html>
    <head>
      <title> P4 Web Query </title>
    </head>
    <body>
      <div id="outer-container">
        <h1>This is the outer container</h1>
      </div>
      <script type="text/babel" src="js/components/outerContainer.js">/script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
    </body>
  </html>