web-dev-qa-db-fra.com

comment utiliser react require syntax?

Je vois beaucoup d'exemples pour réagir structurés avec la syntaxe var React = require('react'). Lorsque j'essaie de l'utiliser, j'obtiens "l'exigence n'est pas définie". Comment utiliser et configurer mon projet statique pour utiliser la syntaxe requise?

Mise à jour

En réalité, je suis à la recherche d'un fichier de configuration webpack/browserify afin de pouvoir commencer avec React et CommonJS rapidement. Je n'ai écrit que des applications react sans lesdits outils de construction

javascriptnode.jsreactjswebpack
12
Connor Leech

require n'est pas une api React, ni une api native du navigateur (pour l'instant).

require provient de commonjs et est le plus célèbre implémenté dans node.js, si vous avez utilisé node.js, vous verrez les besoins partout.

en raison de la popularité d'exiger dans le nœud, les gens ont construit des outils qui transformeront le code écrit dans le style nodejs pour être utilisable sur le navigateur.

il y a quelques avantages à utiliser require, il vous aide à garder votre code modulaire et pour certains projets, il vous permet d'écrire du code isomorphe (code qui s'exécute à la fois sur le client et le serveur avec un minimum de changement)

Pour utiliser require, vous devrez utiliser un outil tel que webpack ou browserify, j'utiliserai browserify comme exemple.

créez d'abord un 'index.js'

require('./app.js');
alert('index works');

puis créez un app.js

alert('app works');

installez ensuite le browserify cli

npm install -g browserify

Et appelez cette commande dans votre Shell

browserify index.js > bundle.js

Vous allez maintenant avoir un bundle.js, dans votre page html créez un

<script src="bundle.js"></script>

Et vous devriez voir les deux alertes s'exécuter

Vous pouvez maintenant continuer à coder, vous pouvez ajouter réagir dans votre code en faisant un

npm install react --save

puis l'exiger dans app.js par exemple

var React = require('react');

React.createClass({
    render: function(){/*Blah Blah Blah*/}
})
16
Yang Li

BTW, Si vous utilisez webpack, vous pouvez ajouter à votre fichier de configuration webpack.config.js Les lignes suivantes, éliminant la nécessité d'utiliser des instructions require dans vos fichiers:

 plugins: [
            new webpack.ProvidePlugin({
              'React':     'react',
              '$':          'jquery',
              '_':          'lodash',
              'ReactDOM':   'react-dom',
              'cssModule':  'react-css-modules',
              'Promise':    'bluebird'
            })

        ],

C'est bien sûr moins bavard et tous les développeurs ne l'aiment pas, mais c'est bon à savoir :)

3
danikoren