react-web-game [#1]

26811 ワード
web-game React study テキストリンク
React Study[#1]—gugudan
Zero Choの「ネットゲームを作って勉強するreact」を見て勉強する学習者です
反応とは何か+なぜ反応を書くのか
  • ユーザインタフェース
    • を作成する.
  • は、単一ページアプリケーション
    • に適用される.
  • データ処理
  • はリサイクル可能なWebコンポーネントです
    • 最初の反応素子
    <!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <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>
    <title>React Web Game Tutorial</title>
</head>

<body>
    <div id="root"></div>

    <script>
        const e = React.createElement;

        class LikeButton extends React.Component {
            // 생성자
            constructor(props) {
                // 상속
                super(props);
            }

            // 화면에 랜더링 시켜줄 수 있는 함수
            render() {
                // 만들었다가 아닌 만들겠다.
                return e('button', null, 'Like'); //<button>Like</button>
            }
        }
    </script>

    <script>
        if (typeof window !== 'undefined') {
            window.React = React;
        }

        // 우리가 만들겠다고 했던 것을 실제로 웹 화면에다가 랜더링 해준다.
        ReactDOM.render(e(LikeButton), document.querySelector('#root'))

    </script>
</body>

</html>
    HTML属性とステータス(state)
                // 생성자
  constructor(props) {
	// 상속
	super(props);
		this.state = {
			liked: false
        	};  
	}

            // 화면에 랜더링 시켜줄 수 있는 함수
	render() {
	// 만들었다가 아닌 만들겠다.
	return e('button', { onClick: () => this.setState({ liked: true }), type: 'submit' }, this.state.liked === true ? 'Liked' : 'Like',); 
    }
    JsxとBabel(babel)
  • JSX欄(JS+XML)
  • Babelは、IEまたは他のブラウザで動作するために、ES 6+バージョンまたはJSX、タイプスクリプトコードをサブバージョンのJavaScriptコードに変換できるラベルです.
    • ex)javascriptはreturn <button></button>などの構文をサポートしていないためbabelを使用した.
    gugudan反応を作る
    <!DOCTYPE html>
    <head>
            <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 crossorigin src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    </head>
    
    <body>
        <div id="root">
            <script type="text/babel">
                const GuGuDan = () => {
                  // useState로 상태 관리 (랜덤 값 설정 1-9)
                    const [first, setFirst] = React.useState(Math.ceil(Math.random()*9));
                    const [second, setSecond] = React.useState(Math.ceil(Math.random()*9));
                  
                  // value와 result 첫 설정
                    const [value, setValue] = React.useState('');
                    const [result, setResult] = React.useState('');
                    const inputRef = React.useRef(null);

                    const onChangeInput = (e) => {
                        setValue(e.target.value);
                    }

                    const onSubmitForm = (e) => {
                        e.preventDefault();
                        if(parseInt(value) === first * second) {

                            setResult('정답: '+value);
                            setFirst(Math.ceil(Math.random()*9));
                            setSecond(Math.ceil(Math.random()*9));
                            setValue('');
                            
                          // input에 focus 주기
                            inputRef.current.focus();
                        } else {
                            setResult('땡');
                            setValue('');

                            
                          // input에 focus 주기
                            inputRef.current.focus();

                        }
                    }

                    return (
                    <React.Fragment>
                        <div> {first} * {second} = ?</div>
                        <form onSubmit={onSubmitForm}>
                            <input ref={inputRef} onChange={onChangeInput} value={value}/>
                            <button>입력</button>
                        </form>
                        <div>{result}</div>
                    </React.Fragment>
                    );
                }
            </script>
            <script type="text/babel">
                ReactDOM.render(<GuGuDan/>, document.querySelector("#root"));
            </script>
        </div>
    </body>

</html>
    独身者-12.ねじ山
    intent.setFlagのパラメータFLAG_ACTIVITY_CLEAR_TASK説明