J'essaye de transpiler mon code jsx react en js en utilisant babel. Voici la commande que j'ai utilisée:
49 | render() {
50 | return (
> 51 | <div class="jumbotron thinking">
| ^
52 | <h1>Welcome To Blue Slide</h1>
53 | <p>How well do you understand what's going on</p>
54 | <div class="slidecontainer">
at Parser.raise (/Users/joshua/Websites/BlueSlide/node_modules/@babel/parser/lib/index.js:6344:17)
at Parser.unexpected (/Users/joshua/Websites/BlueSlide/node_modules/@babel/parser/lib/index.js:7659:16)
at Parser.parseExprAtom (/Users/joshua/Websites/BlueSlide/node_modules/@babel/parser/lib/index.js:8828:20)
at Parser.parseExprSubscripts (/Users/joshua/Websites/BlueSlide/node_modules/@babel/parser/lib/index.js:8413:23)
at Parser.parseMaybeUnary (/Users/joshua/Websites/BlueSlide/node_modules/@babel/parser/lib/index.js:8393:21)
at Parser.parseExprOps (/Users/joshua/Websites/BlueSlide/node_modules/@babel/parser/lib/index.js:8280:23)
at Parser.parseMaybeConditional (/Users/joshua/Websites/BlueSlide/node_modules/@babel/parser/lib/index.js:8253:23)
at Parser.parseMaybeAssign (/Users/joshua/Websites/BlueSlide/node_modules/@babel/parser/lib/index.js:8200:21)
at Parser.parseParenAndDistinguishExpression (/Users/joshua/Websites/BlueSlide/node_modules/@babel/parser/lib/index.js:8963:28)
at Parser.parseExprAtom (/Users/joshua/Websites/BlueSlide/node_modules/@babel/parser/lib/index.js:8760:21) {
pos: 1356,
loc: Position { line: 51, column: 6 },
code: 'BABEL_PARSE_ERROR'
}
Quand je fais cela, j'obtiens cette erreur
npx babel BlueSlide/js/student_slider.jsx --watch --out-file BlueSlide/static/js/student_slider_compiled.js
J'ai essayé de remplacer l'intérieur de la fonction de rendu avec juste un simple div et le même problème. Je ne sais pas pourquoi il me crie dessus pour mon instruction de retour de rendu.
Je veux juste que le code de réaction soit compilé afin que je puisse l'utiliser avec mon html et si ce n'est pas la bonne façon pour le faire, n'hésitez pas à proposer une alternative.
3 Réponses :
Vous n'avez pas publié votre fichier babel.rc, mais je suppose que vous n'avez pas installé @ babel / preset-react et l'avez ajouté à votre configuration. Ceci est nécessaire pour transpiler la syntaxe JSX.
Ouais. Je ne sais pas vraiment ce que c'est. J'ai donc besoin de créer un babel.rc à la racine du projet? puis installez babel / preset-react et ajoutez-le à config. rien d'autre?
@JoshuaSegal Cette page devrait contenir suffisamment d'instructions pour vous aider: babeljs.io/docs/en / babel-preset-react
Commencez par installer babel-cli
"use strict";
var template = React.createElement(
"p",
null,
"this is jsx"
);
var appRoot = document.getElementById("here");
ReactDOM.render(template2, appRoot);
Babel est un compilateur mais il ne compilera rien par défaut. Nous devons ajouter des plugins et des préréglages afin d'obtenir toute sorte de changement dans notre code. vous devez installer
babel src/app.js --out-file=public/index.js --presets=env,react --watch
maintenant vous devez créer deux répertoires. public et src. dans les dossiers publics, placez index.js et index.html.
index.html
const template = <p>this is jsx</p>;
const appRoot = document.getElementById("here");
ReactDOM.render(template2, appRoot);
index.js doit être vide. nous écrirons notre code jsx dans le répertoire src, babel le transpilera sur index.js
maintenant dans le dossier src créer app.js et exécuter ce code pour le tester
src / app. js
<body>
<div id="here"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="./index.js"></script> //index.js
maintenant en ligne de commande, exécutez ce code:
npm i babel-preset-env babel-preset-react --save-dev
si vous vérifiez le public / index.js p>
npm i babel-cli -g //install globally so u can use anywhere
npx babel BlueSlide/js/student_slider.jsx --presets @babel/react --watch --out-file BlueSlide/static/js/student_slider_compiled.js