Question

我决定今天学习React。我通常使用Brackets。因此，我首先将源代码添加到了html代码中

automatic-rename-format

我有一个名为root的div，我想通过React传递H2文本。这是我的index.js文件

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

它没有错误，页面上也没有文本。我也不知道为什么<\ h1>在括号中是黄色，但在此之前是白色。

Answer 1

在语法高亮显示的情况下，您可以从Brackets IDE的底部菜单中将语言首选项设置为“ JSX”（默认情况下，当您处理“ .js”文件时，该语言首选项设置为“ Javascript”），如果您使用其他语言，也可以设置其他语言。 enter image description here

Answer 2

您是否厌倦了下载一些不同的插件以正确显示React语法？通常，当您尝试使用某些框架时，默认的编辑器语法突出显示是不够的，您需要其他扩展。您也可以在IDE的设置中选择语法高亮显示适当的语言/工具/框架。我不完全知道在括号中的哪里可以找到，但是在VS Code中它是here。

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

由于某些原因，您可能还需要一个不同的主题，该主题会做出反应。 Here是我发现的一个。

Answer 3

如in the getting started guide所示，您需要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。

我也不知道为什么<\ h1>在括号中为黄色

您已为JSX文件赋予了.js扩展名，因此您的文本编辑器对其应用了JavaScript语法突出显示。由于它不是JavaScript，因此会出错。

与括号反应

3 个答案: