react study 1週目
32086 ワード
🎮 ネットゲームの作成と学習
第1週目:gugudan
ユーザーインタフェースと優れたユーザー体験を提供し、単一ページアプリケーション(SPA)、すなわち単一ページアプリケーションの作成が容易です.また、応答プログラムは、データと画面のマッチングを自動的に支援します.最後に、重複する構成部品を組み合わせることができ、メンテナンスが容易になります.
コードは効率が悪いと感じるかもしれませんが、これは反応器の動作原理を理解するためです.
https://ko.reactjs.org/docs/cdn-links.htmlはCDNリンクをもたらした.
このとき
予測通りbuttonが生成されました!
この場合、buttonにonClickプロパティを付与します.(Htmlの属性をJSとして表す場合はCamel Caseを使用する必要があります.)
開発者ツールのコンソールログにclickedを残します.
次に、ステータスを変更します.この場合、状態は、変化する部分、または変化可能な部分を意味する.ボタンをクリックしてLikeをLikedに変更します.
クリックすると、ステータスによってLikeがLikedになります.ステータスがデータであると仮定すると、画面にデータを表示できます.
babelを利用して、JSで最新の文法などを使うことができます.
+)
このとき
これらの不要なdivを除去し、<>......に頼る
++)
constructor... 一部を除いて、state宣言のみが使用できます.
+++)
以前の状態を表す場合、以下のようになります.
入力後にfocusを与える:
3つ目の項目で受講中にこのようなエラーが発生しました.elementは読み取り不能によるエラーです.
ReactDOM.renderの後ろに括弧が欠けています.😥
1.7課題
https://inf.run/gcb2ネットワークゲームの作成と学習
第1週目:gugudan
1.reactの理由を書く?
ユーザーインタフェースと優れたユーザー体験を提供し、単一ページアプリケーション(SPA)、すなわち単一ページアプリケーションの作成が容易です.また、応答プログラムは、データと画面のマッチングを自動的に支援します.最後に、重複する構成部品を組み合わせることができ、メンテナンスが容易になります.
2.構成部品の作成
コードは効率が悪いと感じるかもしれませんが、これは反応器の動作原理を理解するためです.
https://ko.reactjs.org/docs/cdn-links.htmlはCDNリンクをもたらした.
このとき
<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><!DOCTYPE html>
<html>
<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>
<body>
<div id="root"></div> <!-- 결과: <div id="root"><button>Like</button></div> -->
<script>
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
}
render() {
// LikeButton을 화면에 어떻게 표시할 것인지
return e('button', null, 'Like'); // <button>Like</button>을 만들겠다!
}
}
</script>
<script>
ReactDOM.render(e(LikeButton), document.querySelector('#root')); // 컴포넌트를 root 내에 그림
</script>
</body>
</head>
</html>予測通りbuttonが生成されました!
この場合、buttonにonClickプロパティを付与します.(Htmlの属性をJSとして表す場合はCamel Caseを使用する必要があります.)
render() {
// LikeButton을 화면에 어떻게 표시할 것인지
return e('button', {onClick: () => {console.log('clicked')}, type: 'submit'}, 'Like'); // <button>Like</button>을 만들겠다!
}開発者ツールのコンソールログにclickedを残します.
次に、ステータスを変更します.この場合、状態は、変化する部分、または変化可能な部分を意味する.ボタンをクリックしてLikeをLikedに変更します.
constructor(props) {
super(props);
this.state = {
// 상태
liked: false,
};
}
render() {
// LikeButton을 화면에 어떻게 표시할 것인지
return e('button', {onClick: () => {this.setState({ liked: true })}, type: 'submit'},
this.state.liked === true ? 'Liked' : 'Like',); // <button>Like</button>을 만들겠다!
}
}クリックすると、ステータスによってLikeがLikedになります.ステータスがデータであると仮定すると、画面にデータを表示できます.
3.JSXとBarbel(babel)
babelを利用して、JSで最新の文法などを使うことができます.
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> render() {
// LikeButton을 화면에 어떻게 표시할 것인지
return <button type="submit" onClick={() =>{this.setState({ liked: true })}}>
{this.state.liked === true ? 'Liked' : 'Like'}
</button>
// JSX
}
}
</script>
<script>
ReactDOM.render(<LikeButton />), document.querySelector('#root')); // 컴포넌트를 root 내에 그림
</script>4.九九九九九
<body>
<div id="root"></div> <!-- 결과: <div id="root"><button>Like</button></div> -->
<script type="text/babel">
class GuGudan extends React.Component {
constructor(props) {
super(props);
this.state = {
// 바뀌는 것들
first: Math.ceil(Math.random() * 9),
second: Math.ceil(Math.random() * 9),
value: '',
result: '',
};
}
onSubmit = (e) => {
e.preventDefault();
if(parseInt(this.state.value) === this.state.first * this.state.second) {
this.setState ({
result: '정답!',
first: Math.ceil(Math.random() * 9),
second: Math.ceil(Math.random() * 9),
value: '',
});
}
else {
this.setState({
result: '땡!',
value: '',
})
}
};
onChange = (e) => {
this.setState({ value: e.target.value })
};
render() {
return (
<div>
<div> {this.state.first} 곱하기 {this.state.second}은? </div>
<form onSubmit={this.onSubmit}>
<input type="number" value={this.state.value}
onChange={this.onChange}/>
<button>입력!</button>
</form>
<div>{this.state.result}</div>
</div>
);
}
}
</script>
<script type="text/babel">
ReactDOM.render((<GuGudan />), document.querySelector('#root')); // 컴포넌트를 root 내에 그림
</script>
</body>+)
このとき
これらの不要なdivを除去し、<>......に頼る
++)
constructor... 一部を除いて、state宣言のみが使用できます.
+++)
以前の状態を表す場合、以下のようになります.
if(parseInt(this.state.value) === this.state.first * this.state.second) {
this.setState ((prevState) => { // 이전 상태 표현
return {
result: prevState.first + ' X ' + prevState.second + ' = ' + prevState.value + ' 정답! ',
first: Math.ceil(Math.random() * 9),
second: Math.ceil(Math.random() * 9),
value: '',
}
});
}
// 이전 state로 새로운 state 값을 만들 때에는 return을 사용入力後にfocusを与える:
if(parseInt(this.state.value) === this.state.first * this.state.second) {
this.setState ((prevState) => { // 이전 상태 표현
return {
result: prevState.first + ' X ' + prevState.second + ' = ' + prevState.value + ' 정답! ',
first: Math.ceil(Math.random() * 9),
second: Math.ceil(Math.random() * 9),
value: '',
}
});
this.input.focus();
}
// 이전 state로 새로운 state 값을 만들 때에는 return을 사용
else {
this.setState({
result: '땡!',
value: '',
})
this.input.focus();
}
};
onChange = (e) => {
this.setState({ value: e.target.value })
};
input;
onRefInput = (c) => { this.input = c; };
// state가 바뀔 때마다 render가 실행되므로 함수를 바깥에 선언하는 것이 좋다.
render() {
return (
<>
<div> {this.state.first} 곱하기 {this.state.second}은? </div>
<form onSubmit={this.onSubmit}>
<input ref={this.onRefInput} type="number" value={this.state.value}
onChange={this.onChange}/>追加
1.
3つ目の項目で受講中にこのようなエラーが発生しました.elementは読み取り不能によるエラーです.
ReactDOM.renderの後ろに括弧が欠けています.😥
2.
1.7課題
{...}
result: this.state.first + ' X ' + this.state.second + ' = ' + this.state.value + ' 정답! ',
{...}https://inf.run/gcb2ネットワークゲームの作成と学習
Reference
この問題について(react study 1週目), 我々は、より多くの情報をここで見つけました https://velog.io/@artian99/React-스터디-1주차テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol