Menu
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 -->
<!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>
var First = React.createClass({
render: function() {
return (
<div className="First">
Hello, world!
</div>
);
}
});
ReactDOM.render(
<First />,
document.getElementById('content')
);
736
Deploying using Netlify drag-and-drop or Github connection If you want to deploy React app, you need to drag and drop the build folder onto the Netlify Dashboard. Run npm run build or yarn build before deploying the latest build. If everything was done correctly, you will need to see the next screen.
create-react-app is a generic framework that need to account for several scenarios. Trimming your build after an eject may be a daunting task. For production apps that will grow, I will not recommend going the create-react-app route. Start with a basic build environment with webpack.
Immutable data is the answer to this problem. By definition, immutable data structures never change. Immutable data allows you to compare direct object references instead of doing deep-tree comparisons. This makes a React app faster.
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 :)
90
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
