一気に怒る理解js::作成-反応-appなし

35407 ワード
テキストリンク
index.htmlファイルで終わりましょう.
react.jsとreact-domjsがあればいいです.<head>にこれを入れて
<!-- head -->
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
反応の根元をreactDOMで所望の位置に挿入すればよい
<!-- body -->
<div id="content"></div>
<script>
    ReactDOM.render(
        React.createElement('h1', null, 'Hello World'),
        document.getElementById('content')
    );
</script>
今回はクラス素子を作ってみました.
<!-- body -->
<div id="content"></div>
<script>
    class HelloWorld extends React.Component {
        render() {
            return React.createElement('h1', null, 'Hello World');
        }
    }

    ReactDOM.render(
        React.createElement(HelloWorld, null),
        document.getElementById('content')
    );
</script>
今回は関数素子を作ります.
<!-- body -->
<div id="content"></div>
<script>
    function helloWorld(props) {
        return React.createElement('h1', null, 'Hello World');
    }

    ReactDOM.render(
        React.createElement(helloWorld, null),
        document.getElementById('content')
    );
</script>
クラスエレメントのpropsに値を渡します.
構成部品を再使用できます.
<!-- body -->
<div id="content"></div>
<script>
    class HelloWorld extends React.Component {
        render() {
            return React.createElement('h1', null, this.props.title);
        }
    }

    ReactDOM.render(
        React.createElement(
            'div',
            null,
            React.createElement(HelloWorld, { title: 'Hello World' }),
            React.createElement(HelloWorld, { title: 'Hello Banjubu' }),
            React.createElement(HelloWorld, { title: 'Hello Juelria' })
        ),
        document.getElementById('content')
    );
</script>
関数素子のpropsに値を渡します.
<!-- body -->
<div id="content"></div>
<script>
    function helloWorld(props) {
        return React.createElement('h1', null, props.title);
    }

    ReactDOM.render(
        React.createElement(
            'div',
            null,
            React.createElement(helloWorld, { title: 'Hello World' }),
            React.createElement(helloWorld, { title: 'Hello Banjubu' }),
            React.createElement(helloWorld, { title: 'Hello Juelria' })
        ),
        document.getElementById('content')
    );
</script>
クラス構成部品には、作成サイクルに基づいて自動的に呼び出される方法があります.
<!-- body -->
<div id="content"></div>
<script>
    class HelloWorld extends React.Component {
        constructor() {
            super();
            console.log('constructor');
        }

        componentDidMount() {
            console.log('componentDidMount');
        }

        componentWillUnmount() {
            console.log('componentWillUnmount');
        }

        render() {
            return React.createElement('h1', null, this.props.title);
        }
    }

    ReactDOM.render(
        React.createElement(HelloWorld, { title: 'Hello World' }),
        document.getElementById('content')
    );
</script>
タグの作成時に属性値を入力できます.<a>ラベルを試してみましょう.
<!-- body -->
<div id="content"></div>
<script>
    class HelloWorld extends React.Component {
        render() {
            return React.createElement(
                'a',
                { href: 'https://banjubu.tistory.com' },
                'Go to the Banjubu.com'
            );
        }
    }

    ReactDOM.render(
        React.createElement(HelloWorld, { title: 'Hello World' }),
        document.getElementById('content')
    );
</script>
一度見て終わったページは面白くないのではないでしょうか.
クラス構成部品にはstateというプロパティとsetStateというメソッドがあるため、値を変更するたびにrenderが再呼び出されます.
画面を描き直すという意味です
<!-- body -->
<div id="content"></div>
<script>
    class HelloWorld extends React.Component {
        constructor() {
            super();
            this.state = { txt: '' };
        }

        render() {
            return React.createElement(
                'div',
                null,
                React.createElement('label', null, this.state.txt),
                React.createElement('input', {
                    value: this.state.txt,
                    onChange: (event) =>
                        this.setState({ txt: event.target.value }),
                })
            );
        }
    }

    ReactDOM.render(
        React.createElement(HelloWorld, null),
        document.getElementById('content')
    );
</script>
関数コンポーネントはuseState hook(hooks)を使用します.
<!-- body -->
<div id="content"></div>
<script>
    function helloWorld() {
        const [txt, setTxt] = React.useState('');

        return React.createElement(
            'div',
            null,
            React.createElement('label', null, txt),
            React.createElement('input', {
                value: txt,
                onChange: (event) => setTxt(event.target.value),
            })
        );
    }

    ReactDOM.render(
        React.createElement(helloWorld, null),
        document.getElementById('content')
    );
</script>
基本はすべてマスターしました
これでcreate-act-appを利用してJSX、styled-componses、アニメーション、ルーティング、reductsを再学習し、必要に応じて一つ一つ学ぶことができます.
【白俊】10952号、10951号、1110号/Java、Python
[JPA]双方向マッピングmappedBy