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操作を書く場合

1
2
3
4
5
6
7
8
9
<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要素を内部に描画する親要素

1
2
3
4
5
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と同一

1
2
3
4
5
6
7
8
9
10
<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プロパティとして渡すこともできるので、以下のようにしても同じ。ただし、視認性の問題からタグで囲むことの方が多い

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

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

1
2
3
4
5
6
const element = (
    <div>
        <article>...</article>
        <aside>...</aside>
    </div>
);

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

1
2
3
4
5
6
const element = (
    <React.Fragment>
        <article>...</article>
        <aside>...</aside>
    </React.Fragment>
);
1
2
3
4
5
6
const element = (
    <>
        <article>...</article>
        <aside>...</aside>
    </>
);

### 値の埋め込み

1
2
const name = 'john';
const element = <p id="the-text" className="text">{name}</p>;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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要素を返却する

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