ReactJS 无法识别答案

【问题标题】：ReactJS not recognisedReactJS 无法识别
【发布时间】：2019-01-28 12:26:41
【问题描述】：

这是我的index.html 文件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  </head>
<body>
    <div id="hello"></div>

    <script type="text/jsx" src="app/index.js"></script>
</body>
</html>

这是我的 index.js 文件。

var React = require('react');
var ReactDOM = require('react-dom');
var createReactClass = require('create-react-class');

var App = React.createClass({
    render: function(){
        return(
            <h1>Hello</h1>
        );
    }
});


  ReactDOM.render(<App/>,document.getElementById('hello'));

我无法在我应该看到的网页上看到你好

React 开发者工具也说这个网页不是 React

什么是错误？

【问题讨论】：

ReactJS: "Uncaught SyntaxError: Unexpected token <"的可能重复
Jsx 不被理解所以错误.. 使用 babel 和 webpack 构建系统来避免这样的错误。您可以使用 create-react-app 开始并避免配置问题。
不，我已经改变了问题
如果这是 bowser 尝试直接解析的代码，则脚本标签不会执行任何操作，因为任何类型不是“javascript”的脚本都会被忽略
阅读关于类型，这里：developer.mozilla.org/en-US/docs/Web/HTML/Element/…

标签： javascript html reactjs

【解决方案1】：

1.确保安装所有 3 个 npm 依赖项：react、react-dom 和 create-react-class。

在您的 index.js 中直接使用 var App = createReactClass()，因为您已经在上面为它定义了变量。然后就可以了。

var createReactClass = require("create-react-class");

var React = require("react");
var ReactDOM = require("react-dom");

var createReactClass = require("create-react-class");

var App = createReactClass({
 render: function() {
  return <h1>Hello!</h1>;
 }
});

ReactDOM.render(<App />, document.getElementById("app"));

这里是code sandbox link for this

【讨论】：

看起来这不是他唯一的问题

【解决方案2】：

使用create-react-app 引导您的应用并将您的组件添加到 src 文件夹中。要启动 React 应用程序，您需要安装 node js（版本 >= 6），使用node -v 确认

如果你想从头开始组织你的应用结构，你需要安装 react 和 react-dom强> 使用npm install react react-dom

您可以使用命令 npx create-react-app appName 引导一个 React 应用程序。一个示例 React 文件如下所示：

import React, { Component } from "react"; 

    class ComponentName extends Component {    

      render() {
        return (
         <div>
           Page contents
         </div>
        );
      }
    }

    export default ComponentName;

欲了解更多信息：https://github.com/facebook/create-react-app

【讨论】：