Reactとは？何のメリットがあるのか？

– ReactとはDOM操作ライブラリでコンポーネント指向の開発スタイル
– ReactのDOM操作の特徴
　　L 仮想DOM(Virtual DOM)
　　L データとUIの同期
– Reactは具体的なDOM操作はコーディングせず、before afterのデータを更新する
– 仮想DOMの仕組みはReactのほか、Vue.jsでも採用されている
– props(属性)やstate(状態)といったReactが管理するデータを更新する

e.g. : JSでdom操作を書く場合

<div id="root"></div>
	<script>
		const element = document.createElement('p');
		element.id = 'the-text';
		element.className = 'text';
		element.innerText = 'Hello world';
		const root = document.getElementById('root');
		root.insertAdjacentElement('beforeend', element);
	</script>

入れ子(ul,li)の場合はこう書く
L React.createElementはReact要素を返却する
　　L ReactDOM.renderは、第一引数がReact要素、第二引数がReact要素を内部に描画する親要素

		const element = React.createElement('ul', {className: 'list'}, [
				React.createElement('li', {className: 'list-item'}, ['one']),
				React.createElement('li', {className: 'list-item'}, ['two']),
				React.createElement('li', {className: 'list-item'}, ['three'])
			]);

### JSXはcreateElement
CDNからBabelを読み込んだ状態でscriptのtypeにbabelを指定すると実行される
JSXの構文は機能的にはcreateElementと同一

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
	<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
	<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

	<script type="text/babel">
		const element = <p id="the-text" className="text">Hello React</p>;
		const root = document.getElementById('root');

		ReactDOM.render(element, root);
	</script>

React.createElementの属性値をpropsと言う。第三引数は第二引数のchildrenプロパティとして渡すこともできるので、以下のようにしても同じ。ただし、視認性の問題からタグで囲むことの方が多い

const element = <p id="the-text" className="text" children="JSX & babel" />;

JSXには、単一のルート要素を持つべきというルールがあるため、複数の要素を入れる場合は、親要素としてDivタグで囲むようにする
下記の場合はdiv要素がないとエラーで実行できない

const element = (
	<div>
		<article>...</article>
		<aside>...</aside>
	</div>
);

ただし、Fragment要素を利用した方がbetter

const element = (
	<React.Fragment>
		<article>...</article>
		<aside>...</aside>
	</React.Fragment>
);

const element = (
	<>
		<article>...</article>
		<aside>...</aside>
	</>
);

### 値の埋め込み

		const name = 'john';
		const element = <p id="the-text" className="text">{name}</p>;

		const members = [
			{name: 'John', instrument: 'guitar'},
			{name: 'Paul', instrument: 'bass'},
			{name: 'George', instrument: 'guitar'},
			{name: 'Ringo', instrument: 'drums'}
		];

		const element = (
			<ul>
				{members.map(member => (
					<li key={member.name}>
						{member.name} plays {member.instrument}
					</li>
					))}
			</ul>
		);

### コンポーネントを定義
Reactでは独自要素を作ることができ、独自要素はコンポーネントと呼ばれ、関数として定義します。
関数名はネイティブと区別するため必ず大文字で始め、React要素を返却する

function Sample(props){
			return <p id={props.id} className="text">{props.children}</p>
		}

		const root = document.getElementById('root');


		ReactDOM.render(<Sample id="the-text">Props Test</Sample>, root);

DOM操作のロジック部分と、表示部分を明示的に分けて記述してるのか
なるほど、良く考えられてて面白いですね。
最初ちょっと抵抗感ありましたけど、仕組みを理解すると分かりやすいです。