Plunker. Comment exiger un module de réaction?

Question

Je suis en train d'exiger un module de réagir sur plnkr React dans le fichier en utilisant script.jsx:

var AptList = require('./AptList'); 

Ce qui donne un « require est non défini » erreur.

Je voudrais savoir comment exiger des modules sur plnkr?

Answer 1

Vous n'utilisez pas Bundler, tout est dans le navigateur, vous devez d'abord inclure le script pour ce composant AptList dans votre index.html:

<script src="AptList.js"></script> 
<script src="script.jsx"></script> 

Ce sera déjà inclure la définition de cette composant. Vous n'avez pas besoin (et ne pouvez pas) utiliser require ici.

Dans AptList.js, vous n'avez pas besoin de module.exports = AptList; car il a déjà été importé en utilisant l'étiquette de script ci-dessus. En outre, vous devez supprimer le require à l'intérieur de script.jsx.

Maintenant, l'autre gros problème est que vous utilisez JSX, qui n'est pas supporté nativement par le navigateur. Pour cela, vous aurez besoin de Babel, il faut donc ajouter les éléments suivants les scripts index.html:

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.js"></script> 

, vous devez alors ajouter le type suivant à chaque balise de script au fond, avant la fin du corps :

<script type="text/babel" src="..."></script> 

Cela vous permettra d'utiliser la syntaxe ES6 et JSX.

Here is the link to the plunk with everything working.