[React] 基礎

<body>
	<div id="root"></div>
</body>
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
ReactDOM.render(
  <h1>Hello world</h1>,
  document.getElementById('root')
);
</script>

jsxはjsの拡張構文でタグを含められる
コンパイルすれば、babelは使用しなくて良い

<body>
	<div id="content">
		
	</div>
</body>
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
class ComponentBox extends React.Component{
	render(){
		return (
			<div className="ComponentBox">
			Component Box
			</div>
		);
	}
};
ReactDOM.render(
	<ComponentBox/>,
	document.getElementById('content')
);
</script>
</html>


<script type="text/babel">
class Layout extends React.Component{
	render(){
		return (
			<h1>welcome!</h1>
		);
	}
};
const app = document.getElementById('app');
ReactDOM.render(
	<Layout/>, app
);
</script>

こういうこともできる

class Layout extends React.Component{
	constructor(){
		super();
		this.name = "Hpscript";
	}
	render(){
		return (
			<h1>It's {this.name}</h1>
		);
	}
};

なるほどー