logo标签列表

客户端渲染React

javascriptreactjs
3

我刚接触React（之前使用的是Angular），想要使用React进行客户端渲染。 以下是由Express应用程序发送的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'));

但是在加载页面时，React似乎无法正常工作。这里出了什么问题？
4
浏览器无法原生理解JSX，您需要将其编译。 - Scimonster
我已经将React和ReactDOM作为外部js导入了，它不会在客户端编译吗？ - Aman Gupta
4
不，你需要使用Babel。 - Scimonster
1
你可能正在学习过时的教程（React.createClass）学习 React。我建议从官方教程开始。而要构建您的 React 应用程序，请使用 create-react-app。 - ffxsam
我想从头开始理解事物（出于好奇心），因此不使用create-react-app。 - Aman Gupta
4个回答
5

最终使事情运转起来了。以下是我采取的步骤：

  1. 安装babel和像babel-preset-react、babel-preset-es2015等插件——这是将React代码转换为浏览器可以理解的传统JavaScript所必需的。
  2. 安装Webpack并创建包含所有所需模块的捆绑包——这是因为浏览器不理解CommonJS，即require语句。Webpack基本上捆绑了您的自定义js文件和依赖项，如React、React-DOM等。
  3. 在body中包含步骤2中创建的bundle.js，而不是head中。这是必要的，因为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'));
4
第一个我的错。不过需要了解转译。 - Aman Gupta
0
今天有这个解决方案。（官方？）
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);

更新 React 18。

https://reactjs.org/docs/add-react-to-a-website.html ;

https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/87f0b6f34238595b44308acfb86df6ea43669c08.zip ;

https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605 ;

0

就这样简单

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

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

这里有一些教程 Tutorial

CodePen 示例

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接