Wymagaj modułów reactjs bez przeglądarki, Webpack lub Babel

Question

Próbuję skonfigurować aplikację HTML TypeScript w visual studio. Chcę użyć reactjs v0.14.7

Chciałbym uniknąć używania narzędzi, takich jak Browserify.

Jak jednak użyć modułu react-dom?

Zapomnijmy trochę o maszynopisie. Muszę najpierw uruchomić i uruchomić czysty ES5.

obecnie mam to:

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

jednak przeglądarka narzeka, obiekt ReactDOM nie istnieje.

Próbowałem:

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

jednak, że nie działa z require.js: Moduł nazwa „reagują” nie został jeszcze załadowany do kontekstu: _. Użyj wymagania ([])

Czy ktoś może wnieść do tego trochę więcej światła? Jak używać reagowania bez narzędzi po stronie serwera, takich jak sprzedaż wiązana, transpozycja itp.

Odpowiedzi takie jak "use npm" nie będą akceptowane jako odpowiedź.

Answer 1

RequireJS i require to bardzo różne rzeczy - o tym więcej później.

Jeśli chcesz używać React bez użycia narzędzia, takiego jak Browserify lub Webpack, to nie potrzebujesz programu ładującego moduły. Hostowane wersje React i ReactDOM wyeksponują zmienne globalne, których możesz użyć natychmiast po uruchomieniu.

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

Wystarczy pobrać te pliki, jeśli chcesz pracować z nimi lokalnie.

SystemJS

to wszystko się tak, że brzmi to jak SystemJS i JSPM może być dokładnie to, czego szukasz.

Pierwsze użycie jspm do instalacji paczek.

jspm install systemjs react react-dom 

Następnie połącz i skonfiguruj SystemJS.

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

Teraz wewnątrz app.js można napisać kod stylu CommonJS.

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

SystemJS zajmie się ładowaniem pozostałych skryptów. Jeśli chcesz utworzyć kompilację produkcyjną, jest to tak proste, jak uruchomienie jspm bundle app.

CommonJS

Połączenia do require że widzisz w samouczków reagować i inne przykłady są dla formatu modułu zwanego CommonJS.

Używasz require('react'), aby uzyskać odniesienie do wartości wyeksportowanej przez moduł React (zainstalowany w node_modules z npm). Oznacza to, że potrzebujesz etapu kompilacji przed przeglądarką, takiego jak Browserify lub Webpack, który może zszywać wszystkie potrzebne moduły razem i wypisać jeden duży plik skryptu.

RequireJS

Confusingly, CommonJS i RequireJS użyć funkcji o tej samej nazwie, aby określić zależności. Próbujesz użyć funkcji RequireJS require tak, jakbyś pracował z modułami CommonJS.

Jeśli chcesz importować reagują z RequireJS zamiast, to trzeba coś takiego:

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

Gdy kod jest wykonywany, RequireJS zgaśnie i dodawać tagi skryptu dla modułów określonych przez Ciebie. Następnie, po załadowaniu tych skryptów, przekażą one eksportowane wartości do funkcji wywołania zwrotnego.

Answer 2

Spójrz na tego projektu

https://github.com/ORESoftware/hr4r2

robi to, co chcesz zrobić - to jest za pomocą RequireJS + React + maszynopis. I robi to rendering na serwerze i to SPA.

Ten projekt nie używa pakietu WebPack ani Babel.

Answer 3

Oto przykład samego Dana Abramova, twórcy REACT, w którym tworzy aplikację do reagowania bez użycia webpacka, babel lub browserify.

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

W pliku HTML wewnątrz ciała znacznika zapisu

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

I w skrypcie typu etykietę

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

PS należy pamiętać o dołączeniu tych 2 bibliotek na górze

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 

Mam nadzieję, że to pomaga.