1
votes

Réagissez avec les crochets

J'ai décidé d'apprendre React aujourd'hui. J'utilise normalement Brackets, donc j'ai d'abord ajouté des sources dans mon code html

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

J'ai un div appelé root là-bas, je voudrais passer un texte H2 avec React.Ceci est mon index.js fichier

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

Cela ne me donne aucune erreur et également aucun texte sur la page. Je ne sais pas non plus pourquoi est jaune sur les crochets mais avant cela, il est blanc.

reactjs html

0 commentaires

3 Réponses :

0
votes

Avez-vous fatigué de télécharger un plugin différent pour une coloration syntaxique appropriée de React? Habituellement, lorsque vous essayez d'utiliser certains frameworks, la coloration syntaxique par défaut de l'éditeur n'est pas suffisante et vous avez besoin d'extensions supplémentaires. Vous pouvez également choisir la coloration syntaxique pour le langage / outil / framework approprié dans les paramètres de votre IDE. Je ne savais pas exactement où trouver cela dans Brackets, mais dans VS Code, c'est ici .

Ici est également comment définir et définir une langue différente dans Brackets.

Et pour certaines raisons, vous pouvez également avoir besoin d'un thème différent, qui supporte les réactions. Voici celui que je ' J'ai trouvé.

2 commentaires

Merci, j'ai changé la coloration syntaxique en JSX maintenant cela semble mieux mais je ne reçois toujours pas le texte en div appelé Root. Je n'ai pas téléchargé de fichiers React, je pensais qu'avec ces deux scripts, cela fonctionnerait.

Non, la coloration syntaxique ne dépend pas des bibliothèques, de ce que vous avez ajouté à votre code. L'éditeur analyse votre code puis choisit automatiquement la coloration syntaxique. Parfois, cela ne fonctionne pas bien, vous devez donc le choisir manuellement dans les paramètres. Et comme je l'ai dit plus tôt, vous devez souvent avoir un thème prenant en charge le langage / le cadre et les extensions. Vous pouvez facilement l'installer dans Brackets en cliquant dans l'onglet d'extension et en le recherchant. Votre div n'est pas bien affiché, probablement parce que votre thème ne prend pas en charge les réactions.

1
votes

Comme indiqué dans le guide de démarrage , Babel doit transpilez JSX en JS dans le navigateur.

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

et devrait marquer votre JSX comme text / babel et non comme text / jsx . p >

Je ne sais pas non plus pourquoi est jaune sur les crochets

Vous avez donné à votre fichier JSX une extension .js pour que votre éditeur de texte lui applique la coloration syntaxique JavaScript. Puisqu'il ne s'agit pas de JavaScript, il se trompe.

0 commentaires

3
votes

Dans ce cas de coloration syntaxique, vous pouvez définir votre préférence de langue sur "JSX" dans le menu du bas de votre IDE Brackets (par défaut, il est défini sur "Javascript" lorsque vous travaillez sur le fichier ".js"), vous pouvez également définir une autre langue si vous travaillez dessus. entrez la description de l'image ici

0 commentaires