web-dev-qa-db-fra.com

Meilleur moyen de construire / compiler / déployer ReactJS en production

Je suis nouveau sur reactJS et j'essaie de comprendre quelle est la meilleure façon de déployer le code en production. Selon le lien ci-dessous, je construis en utilisant babel comme code ci-dessous, mais je me demandais si c'est bon, ou existe-t-il d'autres meilleures pratiques autour déployer ReactJS en production:

npm init -y
npm install --save-dev babel-cli
npm install --save-dev babel-preset-es2015 babel-preset-react

babel --presets es2015,react --watch src/ --out-dir dist

http://www.sitepoint.com/getting-started-react-jsx/

Voici mes fichiers index.html et main.js:

index.html

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Resources prototype</title>
    <!-- React / Babel / Jquery Libraries -->
    <script src="react.js"></script>
    <script src="react-dom.js"></script>
    <script src="browser.min.js"></script>
    <script src="jquery.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/babel" src="main.js"></script>

  </body>
</html>

main.js

var First = React.createClass({
  render: function() {
    return (
      <div className="First">
        Hello, world!
      </div>
    );
  }
});
ReactDOM.render(
  <First />,
  document.getElementById('content')
);
reactjsreact-jsxjsx
8
Aujasvi Chitkara

Je recommande d'utiliser Webpack pour regrouper votre code. Il regroupera toute votre application dans un seul fichier (ou quelques-uns si vous optimisez un peu plus le webpack). Vous pouvez alors avoir un fichier index.html très basique qui charge simplement le fichier js fourni. Envoyez-le à votre serveur de production comme vous le souhaitez.

Voici un bon tutoriel pour vous familiariser avec Webpack: Configuration de React pour ES6 avec Webpack et Babel (il y en a beaucoup si vous ne le faites pas '' t comme celui-ci)

L'un des défis actuels avec React est des tailles de bundle plus grandes qu'optimales. Pour les applications complexes, cela peut commencer à être un problème pour le chargement initial de la page. Entrez rendu isomorphe. React peut s'exécuter côté serveur et afficher un instantané de votre application qui se télécharge rapidement. Ensuite, lorsque votre ensemble d'applications réel est téléchargé, il reprend en toute transparence avec le DOM actuel, ce qui rend l'expérience utilisateur beaucoup plus rapide lorsque ils arrivent sur votre page.

Voici un exemple pour faire un rendu isomorphe avec React: Exemple sur Github

Allez jeter "Rendu isomorphe ReactJS" dans Google pour bien plus d'informations.
Bonne chance et amusez-vous - ce sont des trucs sympas :)

16
Ian