第二次反応研究

40321 ワード
web はんのう フロントエンド React frontend react.js テキストリンク
今日の授業の実習で学んだ内容に基づいて、自分の例を作った.
<今日のキーワード>
1.構成部品ラベルの作成と定義(ComponentTag)
2. props
3.対象分解(対象構造分解配分)
4. event

今日のサンプルコード

<!DOCTYPE html>
<html lang="en">

<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">
	<title>react day2</title>
	<style>
		body {
			background: #61dbfb;
		}

		li {
			list-style: none;
		}

		a {
			color: inherit;
			text-decoration: none;
		}

		a:hover {
			text-decoration: underline;
		}

		.list-content {
			width: 500px;
			margin: 0 auto;
			text-align: center;
		}

		.frameworks {
			padding: 0 30px;
		}

		.list-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 45px;
			margin: 30px 0;
			padding: 0 15px;
			color: #fff;
			background: #3d3d3d;
			border-radius: 5px;
			box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
		}

		.like-btn {
			font-size: 20px;
			padding: 0;
			background: transparent;
			border: none;
		}

		.like-btn:hover {
			cursor: pointer;
		}
	</style>
</head>

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

	<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
	<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
	<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
	<script type="text/babel">

		/* ===== 컴포넌트 정의 ===== */

		// 타이틀
		function Title(props) {
			return <h1>{props.children}</h1>;
		}

		// 리스트 아이템
		const ListItem = ({ name, link }) => {
			let isLiked = false;
			function handleLikeClick(event) {
				const likeBtn = event.target;

				if (!isLiked) {
					isLiked = true;
					likeBtn.textContent = '❤️';
					console.log("I like it");
				} else {
					isLiked = false;
					likeBtn.textContent = '🤍';
					console.log("I don't like it");
				}
			}

			return (
				<li className="list-item">
					<a href={link} target="_blank">{name}</a>
					<button type="button" className="like-btn" onClick={handleLikeClick}>🤍</button>
				</li>
			);
		}

		// 리스트
		const List = () => (
			<ul className="frameworks">
				<ListItem name="React.js" link="https://reactjs.org/" />
				<ListItem name="Vue.js" link="https://vuejs.org/" />
				<ListItem name="Angular.js" link="https://angularjs.org/" />
			</ul>
		);

		// 최종적으로 렌더링 될 컴포넌트
		const content = (
			<div className="list-content">
				<Title>Hello Frontend!</Title>
				<List />
			</div>
		);

		// 렌더링 할 최상위 부모 컴포넌트
		const app = document.querySelector('#app');

		// 렌더링 함수 호출
		ReactDOM.render(content, app);

	</script>
</body>

</html>
  • 例の概要
    リストアイテムコンポーネントを定義し、生成されたアイテムをリストコンポーネントに含めてレンダリングする例.各アイテムアイテムアイテムアイテムアイテムの名前とリンクを同時に付与し、「いいね」ボタンをクリックして選択されるイベントを実施する.
    • コードをよくチェックしましょう.
    まず、構成部品を定義します.
    // 타이틀
function Title(props) {

	// 함수의 결과로 태그를 return
	return <h1>{props.children}</h1>;
}
    ヘッダー構成部品は、基本的な一般的な関数式として宣言されます.
    (!) 構成部品が宣言される場合、関数の名前は大文字でなければなりません.
    このように宣言された構成部品は
    // 자체닫기 태그 (self-closing tag)
<Title/>
    または
    // 열고 닫는 태그 (opening & closing tag)
<Title></Title>
    2つの形式で使用できます.
    ここでちょっと待ってください.
    素子宣言関数でパラメータとして指定されたpropsは何を意味しますか?
    Reactのprops(properties)とは?
    構成部品で作成された要素(タグ)のJSX属性値は、構成部品宣言関数に単一のオブジェクトとして渡されます.その伝達の対象を道具と呼ぶ.簡単に言えば、親コンポーネントから子コンポーネントに渡されるデータオブジェクトです.
    前述のTitleコンポーネントの説明:
    関数で構成部品を宣言する場合は、構成部品ラベルとして使用できます.
    // 최종적으로 렌더링 될 컴포넌트
const content = (
	<div className="list-content">
    	<Title>Hello Frontend!</Title>
        <List />
    </div>
);
    これにより、親コンポーネントcontentにTitleラベルを追加し、サブコンポーネントを登録できます.
    Titleコンポーネントにpropsデータを渡しています.
    "Hello Frontend!"
    最初にpropsを渡す最も基本的な形式は
    <Title text="Hello Frontend!" />
// (!) 속성의 이름은 꼭 text가 아니어도 된다. 자식 컴포넌트가 전달 받을 데이터에 이름을 붙여주는 것.
    サブ構成部品宣言関数を表示します.
    // 타이틀
function Title(props) {	// 마찬가지 매개변수명은 꼭 props가 아니어도 된다.
	console.log(props);	// 콘솔에 출력해서 확인
	return <h1>{props.text}</h1>;
}
    パラメータが指定されていることを確認できます.
    親コンポーネントで低propsに指定されたプロパティ(text="Hello Frontend!")このデータオブジェクトの形で入ります.
    コンソールで表示

    keyとvalue形式でtext:“Hello Frontend!”出力が確認できるのは.
    return <h1>{props.text}</h1>;
    propsオブジェクトのテキストを{props.text}としてh 1タグに戻し、propsと素子定義を完了します.
    (!) なぜ{props.text}で作成するのですか?
    これはJSX構文で、通常htmlタグではJavaScript構文は使用できません.ただし、{}で記述する場合はhtmlでJavaScript構文を使用することもできます.
    propsはそうすることができます.
    <Title>Hello Frontend!</Title>
    オン/オフのタグ形式で作成し、タグの内部にテキスト形式で作成します.
    オブジェクトキーがサブアイテムであるvalueが含まれます.
    コンソールに印刷

    子供として確認された.
    (!) 「children」は、変更できない自己割り当てのキー値です.
    このようにpropsを受信すると、素子宣言関数のreturn部分に値を代入することができる.
    return <h1>{props.children}</h1>;
    次に、リスト項目コンポーネントを作成します.
    // 리스트 아이템
const ListItem = ({ name, link }) => {

	let isLiked = false;	// 좋아요 여부
    
	function handleLikeClick(event) {
    
		// event가 발생한 요소를 변수에 저장
		const likeBtn = event.target;

			if (!isLiked) {	// isLiked가 false 이면
            	isLiked = true; 
                
                // 해당 요소의 텍스트를 빨간 하트로 교체
                likeBtn.textContent = '❤️';
                console.log("I like it");
                
			} else {	// isLiked가 true이면
            	isLiked = false;
                
                // 해당 요소의 텍스트를 하얀 하트로 교체
                likeBtn.textContent = '🤍';
                console.log("I don't like it");
                
            }
		}

		// 함수의 결과로 태그를 return
		return (
        	<li className="list-item">
            	<a href={link} target="_blank">{name}</a>
                <button type="button" className="likebtn" onClick={handleLikeClick}>🤍</button>
            </li>
		);
	}
    匿名関数、矢印関数を使用して、リストアイテム要素を生成する関数を宣言します.
    (ここでは、矢印関数の式を知っているとします.)
    でもちょっとおかしいです.
    さっきまでパラメータでpropsデータを受信すると説明していましたが、パラメータで{name,link}を受信することがわかります.
    (!) これはJSX構文の括弧{}とは異なり、先ほど説明したhtmlタグの内部でJavaScriptを記述することができます.
    この構文はjavascript es 6の最新の構文で、「destructuring」、「構造分解割り当て」と呼ばれています.
    destructuring(構造分解配分)とは?
    配列またはオブジェクトを設計(非構造化、破壊)することによって、各変数に割り当てられます.必要な値は、配列またはオブジェクトテキストからのみ抽出され、変数を割り当てたり返したりするために使用されます.
    ここでは,必要なオブジェクト構造分解のみを見る.
    デフォルトでは、es 5の構文変数としてオブジェクト値が使用されます.
    // ES5
var obj = { firstName: 'God', lastName: '1hyuk' };

var firstName = obj.firstName;
var lastName  = obj.lastName;

console.log(firstName, lastName); // God 1hyuk
    このようにObjectkeyで値にアクセスして取り出し、変数に入れて使用する必要があります.
    es 6では、オブジェクトの値をより容易に使用することができる.
    // ES6 Destructuring
const obj = { firstName: 'God', lastName: '1hyuk };

const { firstName, lastName } = obj;

console.log(firstName, lastName);	// God 1hyuk
    同じ結果値が確認できます.
    構文
    {オブジェクトのkey}=オブジェクトデータのソース
    簡単に言えば、オブジェクトにアクセスし、変数に含めるのではなく、値を抽出します.
    すなわち,特定のオブジェクトの値を取り出すだけで,変数のように直接使用できる.
    最終的に、オブジェクトのキー値は変数名です.
    本題に戻る.
    // 리스트 아이템
const ListItem = ({ name, link }) => {
    ...
 
    // 함수의 결과로 태그를 return
    return (
    	<li className="list-item">
        	<a href={link} target="_blank">{name}</a>
            <button type="button" className="likebtn" onClick={handleLikeClick}>🤍</button>
        </li>
	);
}
    オブジェクト構造の分解形式のパラメータとして直接配置すると、
    <a href={link} target="_blank">{name}</a>
    {link}、{name}と同様に変数のように直接使用できます.
    // 리스트 아이템
const ListItem = ({ name, link }) => {

	let isLiked = false;	// 좋아요 여부
    
	function handleLikeClick(event) {
    
		// event가 발생한 요소를 변수에 저장
		const likeBtn = event.target;

		if (!isLiked) {	// isLiked가 false 이면
        	isLiked = true; 
                
            // 해당 요소의 텍스트를 빨간 하트로 교체
            likeBtn.textContent = '❤️';
            console.log("I like it");
                
        } else {	// isLiked가 true이면
            isLiked = false;
                
            // 해당 요소의 텍스트를 하얀 하트로 교체
            likeBtn.textContent = '🤍';
            console.log("I don't like it");
                
        }
    }

	...
}
    イベントについて説明しようとします.
    「いいかどうか」(isLiked)に基づいてボタンテキスト(Heart)置換のアクティビティを記述した.
    handleLikeClick()
  • handle+キーワード+イベントタイプ()
    • reactでクリック、マウスサスペンションなどのイベント処理関数の名前を付ける慣例.
    必ずしもこのように関数名を付けて実行する必要はありません.問題はありません.しかし、慣例に従ったほうがいい.複数の人とプロジェクトのコラボレーションを行ったり、作成したWebサイトを他の人が維持したりすることもあります.みんなが慣例を守っていれば、みんなが簡単に理解できる良いコードになるのではないでしょうか.
    次に、イベント関数を宣言します.
    <button type="button" className="like-btn" onClick={handleLikeClick}>🤍</button>
    onClickプロパティはhandleLikeClickイベントからJSX構文のJavaScript記述スクリプト{}を呼び出します.
    (!) 一般的なhtmlタグでは、小文字(onclick)でもキャメル文字盤(onClick)でも構いません.ただしJSX構文では、onClickを使用して属性を定義する必要があります.
    保存してブラウザで[OK]ボタンをクリックします.

    よし、解除時も

    正常に動作していることを確認できます.(実行完了したサンプルコードの場合)
    リストアイテム構成部品定義完了後
    リストコンポーネントにリストアイテムを追加する必要があります.
    ...

// 리스트
const List = () => (
	<ul className="frameworks">
		<ListItem name="React.js" link="https://reactjs.org/" />
		<ListItem name="Vue.js" link="https://vuejs.org/" />
		<ListItem name="Angular.js" link="https://angularjs.org/" />
	</ul>
);
    定義したリスト項目コンポーネントをサブコンポーネントとして親コンポーネントリストコンポーネントに挿入します.
    先ほどListItemで{name,link}で受信したname属性とlink属性の値を作成します.これにより、親コンポーネントで作成された属性値がpropsデータオブジェクトとしてサブコンポーネントに渡されるパラメータになります.
    (!) ここでも特殊点が発見されました.
    矢印関数を宣言するとき、カッコを開いたり閉じたりしないのはなぜですか?
    矢印関数の内容がreturnのみの場合は、このように略すことができます.
    構文
    cont関数名=()=>戻る要素
    ただし、返す要素以外に式がある場合は、サムネイルでは記述できません.カッコを開いて記入する必要があります.
    最終的にレンダリングするには、先に宣言したTitle、ListItem、およびListコンポーネントを1つのラベルに組み合わせる必要があります.
    // 최종적으로 렌더링 될 컴포넌트
	const content = (
		<div className="list-content">
			<Title>Hello Frontend!</Title>
			<List />
		</div>
	);

	// 렌더링 할 최상위 부모 컴포넌트
	const app = document.querySelector('#app');

	// 렌더링 함수 호출
	ReactDOM.render(content, app);
    contentは構成部品宣言関数ではなく、親ラベルです.
    変数名は大文字ではありません.
    バンドルされたコンテンツをレンダリング関数に渡し、トップレベルの親appコンポーネントとともにレンダリングします.
    良いアクティビティは、各リスト項目のhref値に{link}が含まれているため、リンク(タイトル)をクリックして対応するサイトに移動することも確認できます.

    クラウドIDEにMySQL 8をインストールする
    JSP_basic. SQL DBに関連付けられたログインページの変更(PStmt、セッションのINSERTを使用)