How to use React from the browser

React, as you probably know having reached this page, is a visualization framework created by Facebook.

This small guide explains how to use react from the browser without any additional tool.

Professional development with React nowadays includes the usage of npm (node package manager) to install packages like React and ReactDOM, and that of module bundlers like browserify o webpack. But this step can be taken at a later time, and not so simple applications can ben be developed without using those tools.

For the time being, I post only the code that shows the string Hello World.

<!DOCTYPE html>
<html>
  <head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script>
	<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  </head>

<div id="output"></div>
<script type="text/babel">

class HelloWorld extends React.Component {
	render() {
		return "Hello World";
	}
}

ReactDOM.render(
    <HelloWorld />,
    document.getElementById('output')
);

</script>

</html>

<!DOCTYPE html>

<html>

<head>

</head>

class HelloWorld extends React.Component {

render() {

return "Hello World";

}

ReactDOM.render(

<HelloWorld />,

document.getElementById('output')

);

</script>

</html>

The code uses the Babel transpiler in its standalone version, as suggested here.

Related posts: