💪 React. はい.
27487 ワード
Preface
📌 開発学習6ヶ月のto-be開発者の独学blog🙂ﾠMMM DD ~ DD, YYYY
現在のステータス
HTMLからReactまでの講座を繰り返し聞きましたが、その中で第一段階のターミネーターを説明しやすいようなReactの講座を見つけたと思いますので、ついでに注意します.
➕ afterthought
レッスン内容で「関数とコンポーネントの関係は?」と思う人もいるかもしれません.この部分に感動(?)…!
初めてreactを頭の上に置いた時(習ったのではなく入れるのですが…)Ő▽Ő) 前に習ったJSとDOMが整理されていなかったので、元の接続点に気づかなかった.
「関数がどのように動くのか」はしばらく理解できず、苦しい日々を思い出した.
P.S.陳儒林は授業の最後の部分でCRAを使った.
link to 🛼
※目標:bodyで動的機能を実現
1.基本概念
1)動的動作はreactではなくJavaScriptとしてのみ行われる.
// 🎵 고양이 사진에 있는 heart 모양 button을 누르면 이 button이 다른 모양으로 바뀌고 <li /> 하위에 해당하는 고양이 사진을 추가하기
// (1)
<body>
<script>
// STEP 1. 좋아요 button 찾기
const likeButton = document.querySelector(".main-card button");
// STEP 2. 좋아요 button에 click event 부여하기
likeButton.addEventListener("click", function () {
// STEP 3. 좋아요 button을 click했을 때 button 변경하기
likeButton.innerHTML = "😍";
// STEP 4. 좋아요 한 고양이를 추가할 곳 찾기
const favorites = document.querySelector(".favorites");
// STEP 5. 새로운 고양이 사진 만들기 = <img src="">
const newFavoriteImage = document.createElement("img");
newFavoriteImage.src = "https://cataas.com/cat/60b73094e04e18001194a309/says/react";
// STEP 6. 고양이 사진을 감싸는 li tag 넣기 = <li> <img> </li>
const li = document.createElement('li');
// STEP 7. li tag에 고양이 사진 넣기
li.appendChild(newFavoriteImage);
// STEP 8. 좋아요 한 고양이를 추가할 곳에 방금 만든 요소를 넣기
favorites.appendChild(li);
});
</ script>
</body>2）動的挙動が変化した場合
// 🎵 고양이 사진에 있는 heart 모양 button을 누르면 이 button이 다른 모양으로 바뀌고 <li /> 하위에 해당하는 고양이 사진을 추가하기
// (2)
<body>
// STEP 2. 고양이 사진을 넣어줄 공간 만들기
<div id="app"></div>
<script>
// STEP 1. <li / >로 고양이 사진을 감싸기
const catItem = (
<li>
<img src="https://cataas.com/cat/60b73094e04e18001194a309/says/react" />
</li>
);
// STEP 3. 고양이 사진을 그릴 위치인 app 찾기
const 여기 = document.querySelector("#app");
// STEP 4. React를 사용해서 catItem을 "여기"에 그리기 (render)
ReactDOM.render(catItem, 여기);
</script>
</body><script />内にHTML文法を書くとエラーになります.(SyntaxErrorをキャプチャしていません:Unexpected token"<":「曲げ形状は私が知らないtoken?」
3つのスクリプト関連リンクを追加し、scriptのtypeを「text/babel」に変更する必要があります.
// 👇
// 🎵 React의 source code 추가하기
<body>
<div id="app"></div>
// STEP 1. React library의 source code 추가
<script
src="https://unpkg.com/react@17/umd/react.development.js"
crossorigin></script>
// STEP 2. React DOM library의 source code 추가
<script
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
crossorigin></script>
// STEP 3. Babel code 추가
<script
src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
// STEP 4. <script>의 type 변경
<script type="text/babel">
const catItem = (
<li>
<img src="https://cataas.com/cat/60b73094e04e18001194a309/says/react" />
</li>
);
const 여기 = document.querySelector("#app");
ReactDOM.render(catItem, 여기);
</script>
</body><script />でHTML構文を使用することもできるため、コードはより直感的で簡潔である.このように、JSよりも
<script />内で容易なHTML構文を用いても、<div id="app"></div>をHTML中のimgに描画することができる.Babelは翻訳者です(「compiler」で表現します).
簡単に作成したJSX構文をJavaScriptに変換して、ブラウザが理解できるようにします.('Get browser-compitable JavaScript out') .
私が書いたReact構文(
const catItemからReactDom.renderの部分)はBabelsitedで見ることができ、Reactで書かれたコードがbrowserの言語に変更されており、開発者ツールheadtagで新しく生成された<script />でも見ることができます.e.g.
React.createElement("img", ...)Babelのおかげで、ブラウザは私のコードを理解することができます.関数にcomponentを入れる方法
// 🎵 {name}과 {introduction} component를 함수에 넣기
function Profile(name, introduction) {
return (
<div>
<h2>{name}</h2>
{introduction}
</div>
);
}
Profile("Ian", "개발 잘 하고 싶다."); // <div /> element에 있는 name 자리에 "Ian", introduction 자리에 "개발 잘 하고 싶다."
Profile("Mai", "나도 언젠가 Typescript 하고 싶다."); // <div /> element에 있는 name 자리에 "Mai", introduction 자리에 "나도 언젠가 Typescript 하고 싶다."
// ↓ 위처럼 함수를 호출하듯 쓰지 않고 tag처럼 쓸 수도 있음
<Profile name ="Ian" introduction = "개발 잘 하고 싶다." />
<Profile name = "Mai" introduction = "나도 언젠가 Typescript 하고 싶다." />ステータスの作成時
// 🎵 1씩 증가하는 상태 만들기
const counterState = React.useState(1); // 인자로 들어간 1은 초기값임
const counter = counterState[0]; // useState의 첫 번째 상태 (counterState[0]) 는 counter 그 자체이고
const setCounter = counterState[1]; // useState의 두 번째 상태 (counterState[1]) 는 counter를 조작한 setCounter
// ↓
const [counter, setCounter] = React.useState(1);
console.log("카운터", counter);2.機能実装コード例
Heartを押して3枚目の写真をお気に入りに追加する機能
// STEP 1. favorites의 상태가 변하므로 state를 추가하고 초기값 설정 const [favorite, setFavorites] = React.useState([CAT1, CAT2]);
// STEP 2. mainCard에서 하트를 눌렀을 때 `function handleHeartClick(){}`이 되도록 호출해야 하는데, 이 함수가 자식 component에 있으므로 부모 component인 const App으로 이동
// STEP 3. 부모 component에서 function handleHeartClick(){}에 `setFavorites`를 설정
// STEP 4. MainCard는 {handleHeartClick}을 props로 받아서 버튼의 onClick에 적용
<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">
const MainCard = ({ img, handleHeartClick }) => {
return (
<div className="main-card">
<img src={img} alt="고양이" width="400" />
<button onClick={handleHeartClick}>🤍</button>
</div>
);
};
const App = () => {
const [favorites, setFavorites] = React.useState([CAT1, CAT2]);
function handleHeartClick() {
setFavorites([...favorites, CAT3]);
// setFavorites([...favorites, CAT3]) = setFavorites([CAT1, CAT2, CAT3])
}
return (
<div>
<MainCard img={mainCat} handleHeartClick={handleHeartClick} />
<Favorites favorites={favorites} />
</div>
);
};
const 여기 = document.querySelector("#app");
ReactDOM.render(<App />, 여기);
</script>
</body>Endnote
🔗 related documents
返信ドキュメント-Webサイトに返信を追加
BABEL
MDN - Using Fetch
Git Hub - Public APIs
ブリッジキャプテン-非同期処理、Call Back
キャプテンブリッジ-Promise
板橋隊長-asyncとAwait
Info Learn-AsyncとAwait
キャプテンブリッジ
Inf Learn - Webpack
react-新しいreactアプリケーションの作成:reactアプリケーションの作成
キャプテンブリッジ-Node。jsとNPM
Inf Learn - Node.jsとNPM
🙇 the source of this content
Info Learn-Jin Yulim
Reference
この問題について(💪 React. はい.), 我々は、より多くの情報をここで見つけました https://velog.io/@maimade/reactテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol