Require reactjs modules without Browserify, Webpack or Babel

Question

I'm trying to setup TypeScript HTML app in visual studio. I want to use reactjs v0.14.7

I would like to avoid using tools like Browserify.

However, how to use the react-dom module then?

Let's forget about typescript for a while. I need to get pure ES5 up and running first.

currently, I have this:

<script src="Scripts/react/react.js"></script>
<script src="Scripts/react/react-dom.js"></script>
<script>
    var Button = React.createClass({
        render: function () {
            return (React.createElement("div", { className: "btn btn-default" }, 'hello world'));
        }
    });
    ReactDOM.render(React.createElement('Button'), document.getElementById('container'));
</script>

however, browser complains, ReactDOM object does not exists.

I have tried:

<script src="Scripts/require.js"></script>
<script src="Scripts/react/react.js"></script>
<script src="Scripts/react/react-dom.js"></script>
<script>
   var React = require('react');
   var ReactDOM = require('react-dom');
   ....
</script>

however, it does not work with require.js: Module name "react" has not been loaded yet for context: _. Use require([])

Can someone bring a little more light into this, please? How to use react without any server side tools like bundling, transpiling etc.

Answers like "use npm" won't be accepted as answer.

Answer 1

RequireJS and require are very different things - more on that later.

If you want to use React without a tool like Browserify or Webpack, then you don't necessarily need a module loader. The hosted versions of React and ReactDOM will expose global variables that you can use out of the box.

<script src="https://fb.me/react-0.14.7.js"></script>
<script src="https://fb.me/react-dom-0.14.7.js"></script>
<script>
console.log(React, ReactDOM);
</script>

Just download these files if you want to work with them locally.

SystemJS

All of that out the way, it sounds like SystemJS and JSPM might be exactly what you're looking for.

First use jspm to install your packages.

jspm install systemjs react react-dom

Then link and configure SystemJS.

<script src='jspm_packages/system.js'></script>
<script>
  System.import('app.js');
</script>

Now inside app.js you can write CommonJS style code.

var React = require('react');
var ReactDOM = require('react-dom');

SystemJS will handle the loading of the rest of your scripts. If you want to make a production build, then it's as simple as running jspm bundle app.

CommonJS

The calls to require that you're seeing in the React tutorials and other examples are for a module format called CommonJS.

You use require('react') to get a reference to the value exported by the React module (installed into node_modules with npm). This means you need a pre-browser build step like Browserify or Webpack, that can staple all of the modules you need together and output one big script file.

RequireJS

Confusingly, CommonJS and RequireJS use a function with the same name to specify dependencies. You're trying to use the RequireJS require function as though you were working with CommonJS modules.

If you want to import React with RequireJS instead, then you need to something like this:

<script src="js/require.js"></script>
<script>
  require.config({
    'baseUrl' : 'Scripts/',
  });
  require(["react-0.14.7", "react-dom-0.14.7"],
  function(React, ReactDOM) {
    console.log(React, ReactDOM);
  });
</script>

When your code executes, RequireJS will go off and add script tags for the modules you've specified. Then once these scripts have loaded, it will pass the values that they export into the callback function for you to use.

Answer 2

Here is an example by Dan Abramov himself, the creator of Redux in which he makes a react app without using webpack, babel or browserify.

http://codepen.io/gaearon/pen/ZpvBNJ?editors=0010

In your HTML file inside your body tag write

<div id="root">
   <!-- This div's content will be managed by React. -->
</div>

And In your script tag type this

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

PS Make Sure You Include These 2 Libraries At Top

https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js
https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js

Hope it helps.