gpt4 book ai didi

javascript - 客户端渲染 React

转载 作者:行者123 更新时间:2023-11-30 07:33:46 26 4
gpt4 key购买 nike

我是 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 似乎不起作用。这里有什么问题?

最佳答案

终于搞定了。以下是我采取的步骤:

  1. 安装了 babel 和插件,如 babel-preset-react、babel-preset-es2015 等 - 这是将 React 代码转换为浏览器可以理解的传统 javascript 所必需的
  2. 已安装 webpack 并创建包含所有必需模块的 bundle - 这是必需的,因为浏览器不理解 commonjs,即 require 语句。 Webpack 基本上捆绑了您的自定义 js 文件和依赖项,例如 react、react-dom 等。
  3. 将第 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'));

关于javascript - 客户端渲染 React,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41217600/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com