Require reaction modules without Browserify, Webpack or Babel

Question

I am trying to configure a TypeScript HTML application in visual studio. I want to use responsejs v0.14.7

I would like to avoid using tools like Browserify.

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

Forget TypeScript for a while. I need to start ES5 first.

I currently 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, the browser complains that the ReactDOM object does not exist.

I 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: the module name "reaction" has not yet been loaded for context: _. Use require ([])

Can someone bring a little more light please? How to use the reaction without any server-side tools like binding, forwarding, etc.

The "use npm" replies will not be accepted as an answer.

Answer 1

RequireJS and require are completely different things - more on this later.

If you want to use React without a tool like Browserify or Webpack, you do not need a module loader. Hosted versions of React and ReactDOM will display 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

From all this, it seems that SystemJS and JSPM may be exactly what you are looking for.

First use jspm to install your packages.

 jspm install systemjs react react-dom 

Then connect 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 loading the rest of your scripts. If you want to create an assembly, it will be as simple as running the jspm bundle app .

Commonjs

The require call, which you see in React tutorials and other examples, refers to the format of the CommonJS module.

You use require('react') to get a reference to the value exported by the React module (set to node_modules with npm number). This means that you need a pre-browser step, such as Browserify or Webpack, that can stitch all the modules you need and output one large script file.

RequireJS

Vaguely, CommonJS and RequireJS use a function with the same name to indicate dependencies. You are trying to use the RequireJS require function, as if you were working with CommonJS modules.

If you want to import React with RequireJS instead, you need 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 shut down and add script tags for the modules you specify. Then, once these scripts are loaded, they will pass the values ​​that they export to the callback function that you can use.

Answer 2

Here is an example of Dan Abramov himself, the creator of Redux, in which he makes a response application without using webpack, babel or a browser.

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

In your HTML file inside your tag tag write

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

And in the tag tag enter this

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

PS Make sure you include these 2 libraries at the 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 this helps.

Answer 3

Take a look at this project.

https://github.com/ORESoftware/hr4r2

it does what you want to do - it uses RequireJS + React + TypeScript. And he does server rendering and is a SPA.

This project does not use Webpack or Babel.