ReactJS简单应用程序不会呈现
ReactJS简单应用程序不会呈现
提问于 2018-02-11 06:23:41
我试过这个简单的ReactJS应用程序，它不会呈现任何东西。我用原子作为我的文本编辑器。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://fb/.me/react-15.1.0.js"></script>
<script src="https://fb/.me/react-dom-15.1.0.js"></script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-
core/5.8.38/browser-polyfill.min.js"></script>
<meta charset="UTF-8">
<title>Hello World with React</title>
</head>
<body>
<div id="react-container"></div>
<script type="text/babel" src="script.js"></script>
</body>
</html>script.js
const { render } = ReactDOM;
render(
<h1 id='title'
className='header'
style={{backgroundColor: 'orange', color: 'white', fontFamily:
'verdana'}}>
Hello World
</h1>,
document.getElementById('react-container')
);文件结构
reactapp
-index.html
-script.js如果我使用的是旧版本的ReactJS，或者script.js文件中有什么问题，请纠正我。
我在柱塞中尝试过瘦，它在script.js文件中显示了一些错误。
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-02-11 07:42:30
我注意到了几件事。通常，当使用Babel时，您需要react和react dom库：
const React = require('react');
const {render} = require('react-dom');或者在使用导入语句时：
import React from "react";
import ReactDOM, {render} from "react-dom";但是柱塞和其他代码编辑器的工作方式有点不同。由于某些原因，我也无法让它在柱塞中工作，但在CodePen：https://codepen.io/Jeff518Code/pen/zRwqzj中也是如此。
还要确保引用样式属性(我是在CodePen中这样做的)
<h1 id='title' className='header' style={{'backgroundColor': 'orange', 'color': 'white', 'fontFamily': 'Verdana'}}>Stack Overflow用户
发布于 2018-02-11 06:59:45
为Reactjs尝试这个最小的HTML模板。希望这对你有用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
<!--
Note: this page is a great way to try React but it's not suitable for production.
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
To set up a production-ready React build environment, follow these instructions:
* https://reactjs.org/docs/add-react-to-a-new-app.html
* https://reactjs.org/docs/add-react-to-an-existing-app.html
You can also use React without JSX, in which case you can remove Babel:
* https://reactjs.org/docs/react-without-jsx.html
* https://reactjs.org/docs/cdn-links.html
-->
</body>
</html>
Stack Overflow用户
发布于 2018-02-11 07:34:26
你应该使用babel-独立的来源。更改如下：
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser-polyfill.min.js"></script>至
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48728930
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号