Loading React

By Xah Lee. Date: . Last updated: .

Loading React on Website from Remote Source

Here's a example of including react on your webpage.

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

Note, react comes in as 2 files, React and ReactDOM.

ReactDOM needs React.

you can also use the uncompressed source code, like this:

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

Downloading React

you can use wget to download them:

wget https://unpkg.com/react@16/umd/react.development.js
wget https://unpkg.com/react-dom@16/umd/react-dom.development.js

Loading React on Website from Local

after you download, rename the files, remove the “.development” part or “.production.min” part. So you have files like these:

Then, you can load them like this:

<script defer src="react-dom.js"></script>
<script defer src="react.js"></script>

<script defer src="my_test.js"></script>

the my_test.js is your file that calls react functions.

Why rename? because when using them in nodejs or as modules in JavaScript ES2015 import/export, there are requirements for the file name to be same as module name.

Loading React from Node.Js

if you want to load React and ReactDOM from node.js, on your machine, without npm or any of the directory infrastructure, here's what to do.

create a directory structure like this:

~/my_project/node_modules/react.js
~/my_project/node_modules/react-dom.js
~/my_project/my_test.js

make sure your react and reactdom files are named that way, and in the directory “node_modules”

the “my_test.js” is your script. you want to load react and reactdom there.

The content of “my_test.js” is this:

const React = require("react");
const ReactDOM = require("react-dom");

// test
const root81360 = React.createElement('div', {x:4},3);
console.log ( root81360 );

you are good to go.

See also: