Iniziare con React: come usare React dal browser

React, come probabilmente saprete se siete giunti qui, è il framework per la visualizzazione creato da Facebook.

Questa piccola guida spiega come utilizzare React dal browser senza l’uso di altri tool.

Lo sviluppo professionale con React oggi come oggi prevede infatti l’uso di npm (node package manager) per l’installazione dei pacchetti come React e ReactDOM, e quello di creatori di bundle come browserify o webpack. Ma questo passo si può fare successivamente, e non solo, possono essere infatti sviluppate applicazioni anche non banali senza utilizzare quei tool.

Per ora, posto solo il codice che mostra 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.querySelector('#output')
);

</script>

</html>

<!DOCTYPE html>

<html>

<head>

</head>

class HelloWorld extends React.Component {

render() {

return "Hello World";

}

ReactDOM.render(

<HelloWorld />,

document.querySelector('#output')

);

</script>

</html>

Il codice usa il transpiler Babel nella versione standalone, come indicato qui.

Related posts: