React 找不到我包含的第 3 方脚本答案

【问题标题】：React can't find 3rd party scripts I've includedReact 找不到我包含的第 3 方脚本
【发布时间】：2017-01-12 11:59:17
【问题描述】：

我正在尝试解决React Tutorial 并遇到了绊脚石。我有以下 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')
);

我正在使用从Create React App NPM 模块创建的内容。当我运行应用程序时，我被告知：

Remarkable 未定义
$ 未定义

JQuery 和 Remarkable 都包含在我的 HTML 文件中，我确保将它们放在我的 index.js 脚本之前。为什么应用程序找不到类型？这是 React 问题，还是 Node、js 问题？我对 web-dev 有点陌生，所以我不确定哪个组件有问题或者我做错了什么。

【问题讨论】：

我认为你的脚本比其他加载的脚本运行得更快。你需要等待 DOMContentLoaded
我该如何等待呢？本教程没有显示我需要这样做，这很奇怪

标签： javascript jquery node.js reactjs

【解决方案1】：

似乎您的脚本正在异步加载。等待你所有的脚本被 jQuery 加载...


(function($){$(function(){

  // your react app code here...

})})(jQuery);

【讨论】：

啊，所以这让我问“jquery 和 react 应该一起使用吗？”。经过一番阅读，听起来您应该使用其中一种；不是同时。对于新的新建项目，这也是您的建议吗？
众所周知，jQuery 主要用于直接操作 DOM，这与使用 React 是相反的，因为 React 使用自己的“虚拟”DOM 与“真实”DOM 保持同步（一个 jQuery 操作）。但！！除了 DOM 操作之外，jQuery 还可以用于许多其他事情。它为诸如“等待 DOM 准备好”、“发送此 xhr 请求”等内容提供了一些语法糖。您可以在没有 jQuery 的情况下实现相同的行为，但您必须编写更多代码。这里有一些方便的代码 sn-ps youmightnotneedjquery.com
那么你会使用 Flux 之类的东西而不是 jquery/Ajax 来与服务器通信吗？