Best way to build/compile/deploy ReactJS to production

reactjs react-jsx jsx

34,835

I recommend using Webpack to bundle your code. It will roll your whole app together into one file (or a few if you get into optimizing webpack a bit more). You can then have a very basic index.html file that that simply loads the bundled js file. Push that to your production server in whatever way you like.

Here is a good tutorial to get you started with Webpack: Setting up React for ES6 with Webpack and Babel (there are a lot of these out there if you don't like this one)

One of the current challenges with React is larger-than-optimal bundle sizes. For complex apps this can start to be a problem for initial page load. Enter isomorphic rendering. React can run server-side and render a snapshot of your app that downloads quickly. Then when your actual app bundle downloads it seamlessly picks up with the current DOM, making for a much snappier user experience when they arrive on your page.

Here is an example for doing isomorphic rendering with React: Example on Github

Go throw "ReactJS isomorphic rendering" in Google for much more info.
Good luck and have fun - this is cool stuff :)

34,835

Author by

Aujasvi Chitkara

Skills: Solr, jQuery, PHP, MySQL, Linux, Drupal, JSON, LAMP, CSS3

Updated on July 14, 2022

Comments

Aujasvi Chitkara almost 2 years

I am new to reactJS, and am trying to understand what is the best way to deploy the code to production. As per the link below, I am building using babel as code below, but I was wondering if this is good, or are there any other best practices around deploying ReactJS to 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/

Here are my index.html and main.js files:

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')
);