REACT.jsx 未在浏览器中显示
[英]REACT.jsx not showing in Browser
问题描述
I'm currently in the process of learning React.
我目前正在学习 React。 However, I'm having a ton of trouble trying to get this to run.但是，我在尝试让它运行时遇到了很多麻烦。
HTML HTML
function Person(){ return ( <div class="person"> <h1>Max</h1> <p>Your Age: 28</p> </div> ); } ReactDOM.render(<Person />, document.querySelector('#p1'));
.person { display: inline-block; margin: 10px; border: 1px solid #eee; box-shadow: 0 2px 2px #ccc; width: 200px; padding: 20px; }
<link rel="stylesheet" href="react.css"> </head> <body> <.-- He created a div block with a class of person --> <link rel="stylesheet" href="react:css"> </head> <body> <div id="p1"> </div> <.-- He makes another div --> <div class="person"> <h1>Manu</h1> <p>Your Age: 29</p> </div> <script src="react.jsx"></script> Sorry for the comments.抱歉发表评论。 I feel like most of my problem really boils down to the script source.我觉得我的大部分问题都归结为脚本源。 Whenever I try to load this on CodePen (Using Babel) it works perfectly.每当我尝试在 CodePen（使用 Babel）上加载它时，它都能完美运行。 I'm not sure how to get this to run.我不确定如何让它运行。 If I run this in my browser I will see...如果我在我的浏览器中运行它，我会看到......
Uncaught SyntaxError: Unexpected token <
I tried to use the CDN for Babel JS from this site but if I add this and change the above script to "type="text/bable" it won't even show up.我尝试从该站点使用 Babel JS 的 CDN，但如果我添加它并将上面的脚本更改为“type="text/bable"，它甚至不会显示。
Thank you for the help.感谢您的帮助。
3 个解决方案
解决方案1
0 2018-04-07 23:40:43
It looks like you have 2 body tags; 看来您有2个身体标签； one of them is in head. 其中之一在脑海中。 Not sure if that's what's giving you the error, but I just happened to notice that. 不知道这是什么给您带来错误，但是我只是偶然发现了这一点。 Seems like the error message has to do with a stray '<' somewhere. 似乎错误消息与某个地方的流浪“ <”有关。
解决方案2
0 2018-04-08 03:03:20
JSX is not standard JavaScript. JSX不是标准的JavaScript。 You have to transpile that with some sort of build step (like Babel) or load in the in the transpiling script so you can use JSX in the browser. 您必须使用某种构建步骤（例如Babel）来进行翻译，或在翻译脚本中加载，以便可以在浏览器中使用JSX。 This was available a couple years ago, but I can't seem to find it anymore. 这是几年前可用的，但我似乎再也找不到了。
解决方案3
0 2021-10-06 12:55:55
JSX is not supported by browser directly.浏览器不直接支持 JSX。 To play React with JSX you need to use Babel (online converter).要使用 JSX 玩 React，你需要使用 Babel（在线转换器）。 Add following <script> to main html file.将以下<script>添加到主 html 文件中。
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
And add type="text/babel" attribute to script tag where use add JSX file.并将type="text/babel"属性添加到使用添加 JSX 文件的script标签。 In your case it will be <script type="text/babel" src="react.jsx"></script>在你的情况下它将是<script type="text/babel" src="react.jsx"></script>
Source: Try React with JSX资料来源： 尝试使用 JSX 进行 React
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.