J'essaie de configurer l'application HTML TypeScript dans Visual Studio. Je veux utiliser reactjs v0.14.7

Je voudrais éviter d'utiliser des outils comme Browserify.

Cependant, comment utiliser le module react-dom alors?

Oublions le tapuscrit pendant un moment. Je dois d'abord faire fonctionner ES5 pur.

Actuellement, j'ai ceci:

<script src="Scripts/react/react.js"></script>
<script src="Scripts/react/react-dom.js"></script>
<script>
    var Button = React.createClass({
        render: function () {
            return (React.createElement("div", { className: "btn btn-default" }, 'hello world'));
        }
    });
    ReactDOM.render(React.createElement('Button'), document.getElementById('container'));
</script>

Cependant, le navigateur se plaint, l'objet ReactDOM n'existe pas.

J'ai essayé:

<script src="Scripts/require.js"></script>
<script src="Scripts/react/react.js"></script>
<script src="Scripts/react/react-dom.js"></script>
<script>
   var React = require('react');
   var ReactDOM = require('react-dom');
   ....
</script>

Cependant, cela ne fonctionne pas avec require.js: le nom du module "react" n'a pas encore été chargé pour le contexte: _. Utilisation requise ([])

Quelqu'un peut-il apporter un peu plus de lumière à cela, s'il vous plaît? Comment utiliser React sans aucun outil côté serveur comme le regroupement, le transpilage, etc.

Les réponses telles que "utiliser npm" ne seront pas acceptées comme réponse.

8
Liero 7 mars 2016 à 16:08

3 réponses

Meilleure réponse

RequireJS et require sont des choses très différentes - plus à ce sujet plus tard.

Si vous souhaitez utiliser React sans outil comme Browserify ou Webpack, vous n'avez pas nécessairement besoin d'un chargeur de module. Les versions hébergées de React et ReactDOM exposeront les variables globales que vous pouvez utiliser dès la sortie de la boîte.

<script src="https://fb.me/react-0.14.7.js"></script>
<script src="https://fb.me/react-dom-0.14.7.js"></script>
<script>
console.log(React, ReactDOM);
</script>

Téléchargez simplement ces fichiers si vous souhaitez travailler avec eux localement.

SystemJS

Tout cela, il semble que SystemJS et JSPM est peut-être exactement ce que vous recherchez.

Utilisez d'abord jspm pour installer vos packages.

jspm install systemjs react react-dom

Puis liez et configurez SystemJS.

<script src='jspm_packages/system.js'></script>
<script>
  System.import('app.js');
</script>

Maintenant, dans app.js, vous pouvez écrire du code de style CommonJS.

var React = require('react');
var ReactDOM = require('react-dom');

SystemJS gérera le chargement du reste de vos scripts. Si vous voulez créer une version de production, c'est aussi simple que d'exécuter jspm bundle app.

CommonJS

Les appels à require que vous voyez dans les didacticiels React et d'autres exemples concernent un format de module appelé CommonJS.

Vous utilisez require('react') pour obtenir une référence à la valeur exportée par le module React (installé dans node_modules avec npm). Cela signifie que vous avez besoin d'une étape de construction pré-navigateur comme Browserify ou Webpack, qui peut agrafer tous les modules dont vous avez besoin ensemble et produire un gros fichier de script.

RequireJS

De manière confuse, CommonJS et RequireJS utilisent une fonction du même nom pour spécifier les dépendances. Vous essayez d'utiliser la fonction RequireJS require comme si vous travailliez avec des modules CommonJS.

Si vous souhaitez importer React avec RequireJS à la place, vous devez faire quelque chose comme ceci:

<script src="js/require.js"></script>
<script>
  require.config({
    'baseUrl' : 'Scripts/',
  });
  require(["react-0.14.7", "react-dom-0.14.7"],
  function(React, ReactDOM) {
    console.log(React, ReactDOM);
  });
</script>

Lorsque votre code s'exécute, RequireJS s'éteint et ajoute des balises de script pour les modules que vous avez spécifiés. Ensuite, une fois ces scripts chargés, il transmettra les valeurs qu'ils exportent dans la fonction de rappel pour que vous puissiez les utiliser.

11
Dan Prince 7 mars 2016 à 14:44

Voici un exemple de Dan Abramov lui-même, le créateur de Redux dans lequel il crée une application react sans utiliser webpack, babel ou browserify.

http://codepen.io/gaearon/pen/ZpvBNJ?editors=0010

Dans votre fichier HTML à l'intérieur de votre balise body, écrivez

<div id="root">
   <!-- This div's content will be managed by React. -->
</div>

Et dans votre balise de script, tapez ceci

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

PS Assurez-vous d'inclure ces 2 bibliothèques en haut

https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js
https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js

J'espère que cela aide.

1
Adeel Imran 3 avril 2018 à 18:50

Jetez un oeil à ce projet

https://github.com/ORESoftware/hr4r2

Il fait ce que vous voulez faire - il utilise RequireJS + React + TypeScript. Et il fait le rendu côté serveur et est un SPA.

Ce projet n'utilise pas Webpack ou Babel.

0
Alexander Mills 19 janv. 2017 à 11:51