客户端渲染 React

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>

这是反应组件文件（firstComponent.js）：

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

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

但是在加载页面时，react 似乎不起作用。 这里有什么问题？

Answer 1

你有几个问题。 跳到我身上的是：

type="text/js"不是JS公认的MIME类型之一，因此浏览器将忽略该脚本元素
firstComponent.js是一个JSX文件，浏览器不支持，您需要将其转换为JavaScript
请参阅为什么jQuery或诸如getElementById之类的DOM方法找不到元素？

Answer 2

终于让事情起作用了。 以下是我采取的步骤：

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

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

今天有这个解决方案。 （官方的？）

1. https://ru.react.js.org/docs/add-react-to-a-website.html#add-react-in-one-minute.

2. https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip

教程

1. Inside your local hard disk create a folder, say  /mnt/disk1/app01
2. Inside it create 2 files: index.html and like_button.js

3. Write the following code.

4. Open the file html with Chromium

文件1

<!-- FILE /mnt/disk1/app01/index.html -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>

    <h2>Add React in One Minute</h2>
    <p>This page demonstrates using React with no build tooling.</p>
    <p>React is loaded as a script tag.</p>

    <!-- We will put our React component inside this div. -->
    <div id="like_button_container"></div>

    <!-- Load React. -->
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

    <!-- Load our React component. -->
    <script src="like_button.js"></script>

  </body>
</html>

文件2

//FILE /mnt/disk1/app01/like_button.js

'use strict';

const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}

const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);

Answer 4

就这么简单

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

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

这里有一些教程教程

CodePen示例

客户端渲染 React

问题描述

4 个解决方案

解决方案1
4 2016-12-19 07:27:49

解决方案2
4 已采纳 2016-12-19 10:08:35

解决方案3
0 2021-11-11 06:05:13

解决方案4
-1 2016-12-19 07:29:41

客户端渲染 React

问题描述

4 个解决方案

解决方案1 4 2016-12-19 07:27:49

解决方案2 4 已采纳 2016-12-19 10:08:35

解决方案3 0 2021-11-11 06:05:13

解决方案4 -1 2016-12-19 07:29:41

解决方案1
4 2016-12-19 07:27:49

解决方案2
4 已采纳 2016-12-19 10:08:35

解决方案3
0 2021-11-11 06:05:13

解决方案4
-1 2016-12-19 07:29:41