Javascript ReactJS'；世界你好'；使用JSX和类不会向浏览器打印任何内容
我正在尝试获取一些基本的jsx，以便在常规web浏览器中显示一些文本。通过双击主html文件并在chrome中打开代码，firefox 我一直在关注这些链接和一些书籍 是唯一一个似乎在实际的网络浏览器中打开程序时触碰的。问题是它没有包括一些额外的东西，比如创建类和其他类所做的事情 我似乎找不到我的代码没有打印任何内容的原因Javascript ReactJS'；世界你好'；使用JSX和类不会向浏览器打印任何内容,javascript,html,reactjs,web,jsx,Javascript,Html,Reactjs,Web,Jsx,我正在尝试获取一些基本的jsx，以便在常规web浏览器中显示一些文本。通过双击主html文件并在chrome中打开代码，firefox 我一直在关注这些链接和一些书籍 是唯一一个似乎在实际的网络浏览器中打开程序时触碰的。问题是它没有包括一些额外的东西，比如创建类和其他类所做的事情 我似乎找不到我的代码没有打印任何内容的原因 所需输出 你好，世界 在我使用的网络浏览器（Firefox）中打印 jsx/index.js import React from 'react'; import { re
所需输出 你好，世界 在我使用的网络浏览器（Firefox）中打印
jsx/index.js
import React from 'react';
import { render } from 'react-dom';
class navBar extends React.Component {
render() {
return <div>Hello world</div>;
}
}
render(<navBar />, document.body)
从“React”导入React；
从'react dom'导入{render}；
类navBar扩展了React.Component{
render（）{
返回你好世界；
}
}
render（，document.body）
index.html
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<script src="https://unpkg.com/react@16.8.4/index.js"></script>
<script src="https://unpkg.com/react-dom@16.8.4/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.2/browser.min.js"></script>
<meta charset="utf-8" name="viewport" content="user-scalable=no, width=device-width" />
</head>
<body>
<script type='text/babel' src='jsx/index.js'></script>
</body>
</html>
你好，世界
类/组件navBarnavBar另外，请阅读开发人员工具中的控制台警告和错误，您将从中得到基本答案。您需要index.html中ID为“root”的容器，并且需要从“react dom”导入ReactDOM。您还应该使用大写字母（Navbar而不是Navbar）命名组件，这是惯例。您的代码应该如下所示：
从“React”导入React；
从“react dom”导入react dom；
类Navbar扩展了React.Component{
render（）{
返回你好世界；
}
}
jsx中的ReactDOM.render（，document.querySelector（'#root'））class NavBar extends React.Component {
render() {
return (
<div>
Hello world
</div>
);
}
}
ReactDOM.render(<NavBar />, document.querySelector('#root'))
类导航栏扩展了React.Component{
render（）{
返回(
你好，世界
);
}
}
ReactDOM.render（，document.querySelector（'#root'））
<!DOCTYPE html>
<html>
<head>
<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.26.0/babel.js"></script>
<meta charset="utf-8" name="viewport" content="user-scalable=no, width=device-width" />
</head>
<body>
<div id="root"></div>
<script type='text/babel' src='jsx/index.js'></script>
</body>
</html>
你好，世界