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>

ReactJS 入门

ReactJS getting started

jsx

npm

reactjs