Richiede i moduli reactjs senza Browserify, Webpack o Babel

Question

Sto provando a installare l'app HTML TypeScript in Visual Studio. Voglio usare reactjs v0.14.7

Vorrei evitare di utilizzare strumenti come Browserify.

Tuttavia, come utilizzare il modulo react-dom?

Dimentichiamo per un istante il dattiloscritto. Ho bisogno di ottenere ES5 puro attivo e funzionante per primo.

Attualmente, ho questo:

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

tuttavia, il browser si lamenta, oggetto ReactDOM non esiste.

ho provato:

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

tuttavia, non funziona con require.js: nome modulo "reagire" non è stata ancora caricata per il contesto: _. Usa require ([])

Qualcuno può portare un po 'più di luce in questo, per favore? Come utilizzare reagire senza strumenti lato server come bundling, transpiling ecc.

Le risposte come "uso npm" non saranno accettate come risposta.

Answer 1

RequireJS e require sono cose molto diverse - ne parleremo più avanti.

Se si desidera utilizzare React senza uno strumento come Browserify o Webpack, non è necessario un caricatore di moduli. Le versioni ospitate di React e ReactDOM espongono le variabili globali che è possibile utilizzare out of the box.

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

Basta scaricare questi file se si desidera lavorare con loro localmente.

SystemJS

tutto questo il modo, suona come SystemJS e JSPM potrebbe essere esattamente quello che stai cercando.

Primo utilizzo jspm per installare i pacchetti.

jspm install systemjs react react-dom 

Quindi collegare e configurare SystemJS.

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

Ora all'interno app.js è possibile scrivere CommonJS codice di stile.

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

SystemJS gestirà il caricamento degli altri script. Se si desidera creare una produzione, è semplice come eseguire jspm bundle app.

CommonJS

Le chiamate verso require che si sta vedendo in REACT tutorial e altri esempi sono per un formato di modulo chiamato CommonJS.

È possibile utilizzare require('react') per ottenere un riferimento al valore esportato dal modulo React (installato in node_modules con npm). Ciò significa che è necessario un passo di costruzione pre-browser come Browserify o Webpack, che può pinzare tutti i moduli necessari insieme e generare un grande file di script.

RequireJS

Confusamente, CommonJS e RequireJS utilizzare una funzione con lo stesso nome per specificare le dipendenze. Stai tentando di utilizzare la funzione RequireJS require come se stessi lavorando con moduli CommonJS.

Se si desidera importare reagire con RequireJS invece, allora avete bisogno di qualcosa di simile:

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

Quando il codice viene eseguito, RequireJS si spengono e aggiungere tag script per i moduli che hai specificato. Quindi, una volta caricati questi script, passerà i valori che essi esportano nella funzione di callback da utilizzare.

Answer 2

Date un'occhiata a questo progetto

https://github.com/ORESoftware/hr4r2

che sta facendo quello che si vuole fare - sta usando RequireJS + Reagire + dattiloscritto. E sta facendo rendering serveride e è una SPA.

Questo progetto non sta utilizzando Webpack o Babel.

Answer 3

Ecco un esempio di Dan Abramov stesso, il creatore di REACT in cui realizza un'app di reazione senza utilizzare webpack, babel o browserify.

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

Nel file HTML all'interno del vostro corpo tag di scrittura

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

E Nello script tipo di tag questo

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

PS Assicurati di includere Questi 2 Biblioteche in alto

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 

Spero che aiuti.