反应教程不显示 div答案

【问题标题】：React tutorial not displaying the div反应教程不显示 div
【发布时间】：2016-04-18 04:52:12
【问题描述】：

我从 Reactjs 开始并构建了我的初始 div，但由于某种原因它不显示 div。

这是显示的代码

helloworld.js 内容：

React.render(
    React.createElement('h1',null,'Hello World')
    ,document.getElementById('divContainer')
    )

控制台错误：

react.render 不是函数。

使用的反应版本：

React v15.0.1

【问题讨论】：

您是否在 hello-world.js 中包含 import React from "react"; 语句
import React from "react" ，一旦我添加了这一行，我就会得到“Unexpected token import”错误
当我收到这个错误时，对我来说 React 没有正确配置。后来我使用 webpack dev server 来运行它，然后它就可以正常工作了。
我认为您没有将 es6 文件转换为 es5。 import 在任何浏览器中都不起作用，因此您必须使用转译器，例如 Babel。此外，不要将React.render 用于您的根组件，而应使用react-dom lib 中的ReactDOM.render。

标签： reactjs

【解决方案1】：

请使用 ReactDOM.render() 函数

【讨论】：

你知道为什么吗？还是您只是在没有任何解释的情况下通过this comment 钓鱼 +1？
因为 render 方法在 reactDOM 中可用，而在 react 中没有

【解决方案2】：

你需要像这样导入 React： import React from 'react';

您需要导入名为 React 的库。此外，React.render() 已弃用，您需要使用ReactDOM.render()。

要获取一个组件并将其渲染到 DOM，需要一个名为 ReactDOM 的单独库。你不使用 render() 的 React，你使用 ReactDOM。为了使用它，您还必须像这样导入它：

import ReactDOM from 'react-dom';

然后就可以实现了：

ReactDOM.render(App);

但这还不是全部。您尚未向我们展示您的组件的整个代码，但您需要在渲染之前实例化您的组件。您显示的似乎是 Babel 的转译版本，但即使这似乎不太正确，它看起来像这样：

    var App = function App() {
    return React.createElement(
        "h1",
        null,
        "Hello World"
    );
};

ReactDOM.render(React.createElement(App, null));

以上代码将基于创建App 的实例。

这是一个类：App 的一个组件，它产生实例。要创建一个实例，只需将其包装在 jsx 标签中，例如 soL <App />。

最后但并非最不重要的一点是，您需要通过作为目标容器的第二个参数将其放入页面或 DOM 中。当您渲染组件 <App /> 时，在我们的 HTML 文档中存在的该元素中生成一些 HTML，那么您的代码，按照您在此处共享的转译版本将如下所示：

var App = function App() {
    return React.createElement(
        'h1',
        null,
        'Hello World'
    );
};

ReactDOM.render(React.createElement(App, null), document.querySelector('.container'));

【讨论】：