9/16勉強

4350 ワード
React テキストリンク

反応とは?

  • フロントエンド開発ライブラリ
  • 宣言:ページを表示するためにファイルに作成されます.
  • コンポーネントベース:機能実装ユニットとしてのコンポーネントベースであるため、高い再利用性を有する.
  • 汎用性:作成中のフレームワークとは異なるコードに適用されます.

    • JSX(JavaScript Syntax Extension or JavaScript XML)

  • JSの構文を拡張し、reactでUIを構成します.
  • Baelは、JSXをブラウザで使用可能なJSにコンパイルします.
  • 構造(HTML)と機能(JS)を組み合わせたコード(コンポーネント)が使用されているため、再利用性が高く、修正が発生した場合に修正する必要があることは少ない.
  • HTMLのclassを使用する場合は、classNameツリービューを使用します.
  • JS式を使用する場合{}
    • を使用
  • カスタム構成部品は大文字で始まり、
    • です.
    3つの演算子を使用した
  • 条件レンダリング
    map()関数を使用して、
  • 以上のHTML段落を表示します.この場合、keyを指定する必要があります.
    • function App() {
  const objs = [{id:1, text: "첫 번째 객체"}, {id:2, text: "두 번째 객체"}, {id:3, text: "세 번째 객체"}];

  return (
    <div className="App">
      {objs.map(obj => {
    	// 객체의 아이디를 키로 사용
        // key를 지정하지 않을 경우
        // Warning: Each child in a list should have a unique "key" prop 경고가 뜬다.
        return (<div key={obj.id}>{obj.text}</div>)
      })}
    </div>
  );
}
    配列BOJ 2751数量2
    16文字化けし問題の原因と解決方法