Fatal编程技术网
  • html/
  • Html 用括号反应

Html 用括号反应

html reactjs

Html 用括号反应,html,reactjs,Html,Reactjs,我决定今天学习如何反应。我通常使用括号，所以首先我在html代码中添加了源代码 <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin&

我决定今天学习如何反应。我通常使用括号，所以首先我在html代码中添加了源代码

<html>
    <head>
        <link rel="stylesheet" href="style.css">

    </head>
    <body>
        <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>
        <div id="root"></div>
        <script type="text/jsx" src="index.js"></script>

    </body>
</html>
我有一个名为root的div，我想用React传递一个H2文本。这是我的index.js文件

import React from "react"
import ReactDOM from "react-dom"
ReactDOM.render(<h1>Aloo</h1> , document.getElementById('root'));

从“React”导入React
从“react dom”导入react dom
render（Aloo，document.getElementById（'root'）；
它没有给我错误，也没有在页面上的文本。我也不知道为什么括号上是黄色，但在此之前它是白色的

您是否已经下载了一些不同的插件以进行适当的语法突出显示？通常，当您尝试使用某些框架时，默认编辑器语法高亮显示是不够的，您需要额外的扩展。您还可以在IDE的设置中为适当的语言/工具/框架选择语法高亮显示。我不知道在括号中的什么地方可以找到，但在VS代码中是这样的

也是如何定义和设置括号中的不同语言

出于某些原因，您可能还需要一个不同的主题，以支持react。是我找到的。如图所示，您需要Babel在浏览器中将JSX转换为JS

<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>

<!-- Don't use this in production: -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
并且应该将您的JSX标记为
text/babel
而不是
text/JSX

我也不知道为什么括号上是黄色

您已经为JSX文件指定了一个
.js
扩展名，因此您的文本编辑器正在对其应用JavaScript语法高亮显示。因为它不是JavaScript，所以会出错。

在这种语法突出显示的情况下，您可以从IDE中的底部菜单将您的语言首选项设置为“JSX”（在处理“.js”文件时默认设置为“JavaScript”），如果处理其他语言，也可以设置它们。

谢谢，我已经将语法突出显示改为JSX，现在看起来更好了，但是我仍然没有得到div中名为Root的文本。我还没有下载任何React文件，我想用这两个脚本就可以了。不应该吗？不，语法突出显示不取决于库，也不取决于您添加到代码中的内容。编辑器扫描代码，然后选择自动语法突出显示。有时它不能正常工作，所以您必须在“设置”中手动选择它。正如我前面所说的，通常您必须有支持语言/框架和扩展的主题。您可以轻松地在括号中安装它，单击扩展选项卡并搜索它。您的div没有很好地显示，可能是因为您的主题不支持react。