TIL:21616数(反応器超復習1)
React
シンプルな開発アプリケーションの実行
npx create-react-app はんのうりょく
明示的JSX
1つの機能を実現するために、複数のコードを組み合わせます.
再利用、独立
jsxルール
classとして使用する場合は、Js
<div className="aaa"></div>タグ名が設定されていなくても、タグ自体は存在する必要があります.
<>
</><div>
{
(1+1 ===2) ? (<p>정답</p>) : (<p>오답</p>)
}
</div>const posts = [
{id:1, title:"hello", content:"welcome!!"},
{id:2, title:"installation", content:"npm method"}
];
function Blog(){
const content = posts.map((post) =>
<div key={post.id}>
<h3>{post.title}</h3>
<h3>{post.content}</h3>
</div>
);
return (
<div>
{content}
</div>
);
}反応器にmapメソッドを使用する場合はkeyプロパティを入れます!
さもないと警告が少なくなります.
通常、id値はキー値として指定されますが、そうでない場合は、配列にインデックスを追加することで解決できます.
Component-based
構成部品
1つの機能を実現するためにバンドルされた多段コードの集合.
UIを構成する必須要素.
反応アプリケーションは、コンポーネント間の関係をツリー構造として抽象化して表すことができます.
Reference
この問題について(TIL:21616数(反応器超復習1)), 我々は、より多くの情報をここで見つけました https://velog.io/@beablessing/TIL-210616수리액트기초복습1テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol