Question

我是React（Angular背景）的新手，并尝试使用react进行客户端渲染。在index.html之后，由明确的应用程序发送：

<html>
    <head>
        <title>My Web</title>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.min.js"></script>
        <script type="text/javascript" src="/static/src/js/firstComponent.js"></script>
    </head>

    <body id="mainBody">
    </body>

</html>

这是react组件文件（firstComponent.js）：

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

ReactDOM.render(<FirstComponent />, document.getElementById('mainBody'));

但是在加载页面时，反应似乎不起作用。这有什么不对？

Answer 1

你有几个问题。那些跳出来的人是：

type="text/js"不是JS认可的MIME类型之一，因此浏览器将忽略该脚本元素
firstComponent.js是一个JSX文件，浏览器不支持，您需要transpile it into JavaScript
请参阅Why does jQuery or a DOM method such as getElementById not find the element?

Answer 2

终于让事情奏效了。以下是我采取的步骤：

已安装的babel和插件，如babel-preset-react，babel-preset-es2015等。 - 这需要将反应代码转换为浏览器可以理解的传统javascript
安装了webpack并创建了包含所有必需模块的bundle - 这是必需的，因为浏览器不了解commonjs，即require语句。 Webpack基本上捆绑了你的自定义js文件和依赖，如react，react-dom等。
在步骤2中创建的bundle.js包含在您的身体内而不是头部。这是必需的，因为如果我们将bundle.js保存在head标签内，ReactDOM的渲染功能正在寻找一个不会被渲染的元素。

HTML：

<html>

    <head>
        <title>My</title>
    </head>

    <body>
        <div id="root"></div>
        <script type="text/javascript" src="/static/src/webpack/bundle.js"></script>
    </body>

</html>

组件：

import React from 'react'
import ReactDOM from 'react-dom'
class FirstComponent extends React.Component{
    render(){
        return (
            <h1> Hello</h1>
        );
    }
}

if(typeof window !== 'undefined')
    ReactDOM.render(<FirstComponent />, document.getElementById('root'));

Answer 3

就像那样简单

const FirstComponent = <h1> Hello</h1>;
    }
});

ReactDOM.render(FirstComponent , document.getElementById('mainBody'));

这里有一些教程Tutorial

CodePen exemple

客户端呈现React

3 个答案: