React找不到我包含的第三方脚本
我正在尝试通过React教程 ，并遇到了一个绊脚石。 我有以下的HTML
<html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="shortcut icon" href="./src/favicon.ico" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" /> <script src="https://npmcdn.com/react@15.3.1/dist/react.js"></script> <script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.js"></script> <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script> <script src="https://npmcdn.com/jquery@3.1.0/dist/jquery.min.js"></script> <script src="https://npmcdn.com/remarkable@1.6.2/dist/remarkable.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script> <script type="text/babel" src="src/index.js"></script> <title>React App</title> </head> <body> <div class="container"> <div class="row"> <div id="sidebar" class="col s3"> </div> <div id="content" class="col s9"> </div> </div> </div> <script type="text/babel"> </script> </body> </html> 用以下的JavaScript文件。
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; var data = [ { id: 1, author: "Pete Hunt", text: "This is the 1st comment" }, { id: 2, author: "Jordan Walke", text: "This is *the 3rd* comment." }, { id: 3, author: "John Doe", text: "This comment is stupid." } ]; var CommentBox = React.createClass({ getInitialState: function() { return { data: [] }; }, componentDidMount: function() { $.ajax({ url: this.props.url, dataType: 'json', cache: false, success: function(data) { this.setState({ data: data }); }.bind(this), error: function(xhr, status, err) { console.error(this.props.url, status, err.toString()); }.bind(this) }); }, render: function() { return ( <div className="commentBox"> <h1>Comments</h1> <CommentList data={this.state.data} /> <CommentForm /> </div> ); } }); var CommentList = React.createClass({ render: function() { var commentNodes = this.props.data.map(function(comment) { return ( <Comment author={comment.author} key={comment.id}> {comment.text} </Comment> ); }); return ( <div className="commentList"> {commentNodes} </div> ); } }); var CommentForm = React.createClass({ render: function() { return ( <div className="commentForm"> I'm a Form. </div> ); } }); var Comment = React.createClass({ rawMarkup: function() { var markdown = new Remarkable(); var rawMarkup = markdown.render(this.props.children.toString()); return { __html: rawMarkup }; }, render: function() { return ( <div className="comment"> <h2 className="commentAuthor"> {this.props.author} </h2> <span dangerouslySetInnerHTML={this.rawMarkup()} /> </div> ); } }); ReactDOM.render( <CommentBox data={data} />, document.getElementById('content') );
我正在使用创buildReact App NPM模块创build的内容。 当我运行应用程序时，我被告知：
- 显着没有定义
- $未定义
JQuery和Remarkable都包含在我的HTML文件中，并且确保将它们放在我的index.js脚本之前。 为什么应用程序找不到types？ 这是一个React问题，还是一个Node，js问题？ 我对web-dev有点新，所以我不确定哪个组件出错或者我做错了什么。
看起来像你的脚本asynchronous加载。 等待你所有的脚本被jQuery加载…
(function($){$(function(){ // your react app code here... })})(jQuery);