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