react.js: how to load local react.js instead of using online ones

Question

So I'm new to react.js and have been following the tutorial created by facebook. ( https://facebook.github.io/react/docs/tutorial.html ; this one).

Now I finish the tutorial I want to expand a little bit on top of it. However, I notice that in the tutorial, in index.html, it is using online locations for loading react and other modules. One example is like this:

How to change the src from online to local? I've download react through npm. All files are in a folder called react2. index.html is in react2/public, server.js is in react2 root folder; while react is in react2/node_modules/react/react.js. I've tried to change src into "../node_modules/react/react.js" and "/home/.../react2/..." and tried to add file:/// in the front, but nothing worked.

btw, this is my first question on stackoverflow and I'm not really familiar with the rules. If I did something wrong in posting please tell me.

Thanks a lot!

Answer 1

If you want to import react in a html file through the src attribute of the script tag, you should download the files directly from here react-15.2.0.min.js and react-dom-15.2.0.min.js and save them into a lib folder, or wherever you want.

If you download React from npm you have to import react like any other npm package and generate a bundle that you can import in your html file with a bundler like browserify or webpack. You can use the react and react-dom packages. After installing it using npm install --save react react-dom, you can use:

var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(<App />, ...);

Answer 2

Speaking this way is hard to detect what problem is. I'm almost sure is related to call React in a wrong path.

You can open your Developer Tools inside your preferred browser, to check which source your app is calling React. After opening it, go to the console tab and there you can check for every missing file.

Also, make sure you're running React on a server. Which is required for most actions you'll use. If React is being called properly, but isn't working, maybe it could be the problem.