javascript - ReactJS 无法识别

标签 javascript html reactjs

这是我的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'));

I am not able to see hello on the webpage which I should be seeing

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

错误是什么?

最佳答案

使用create-react-app引导您的应用程序并在 src 文件夹中添加组件。要引导 React 应用程序,您需要安装 Node js(版本 >= 6 ),使用 node -v 确认

如果您希望从头开始组织应用程序结构,则需要安装 reactreact-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

关于javascript - ReactJS 无法识别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51963528/

相关文章:

javascript - 如何在定义对象时访问其属性本身?

HTML 链接在移动设备上默认为蓝色

html - 在 Chrome 中,如何呈现没有间隙的 Unicode block 字符?

javascript - 我需要 js 中的一些 lib 来显示 3d 模型

reactjs - 异步/等待 redux thunk 未正确返回操作 promise

javascript - React - 在功能组件中测试外部功能

javascript - 如何在 puppeteer 中使用 querySelector 获取特定元素 <dl>

javascript - 使用Reducer Redux中的新内容更新数组

php - 同步JS+PHP时间

html - BG 图像鼠标悬停工作正常,除了在 IE 上