反応とは何ですか.どうして書きますか.

6619 ワード
React JavaScript テキストリンク

🍫 反応とは?

  • 応答は、フロントエンド開発用のJavaScriptオープンソースライブラリである.
  • はFacebookによって提供され、管理されています.

    • 🍫 Reactの特徴


  • 宣言
    JSXを使用して、HTML/CSS/JSに分けるのではなく、1つのファイルに明確に記述するために宣言プログラミングを行います.このようにコードを明確に記述することで,コードを表示することでコードの機能を直感的に理解することができる.

  • 構成部品ベース
    反応器は「一つの機能の実現」のために素子単位で開発され、その名の通り機能そのものに集中して開発することができ、互いに独立し、再利用しやすい.メンテナンスも楽になります.
  • 汎用性
    JavaScriptを使用する任意のアイテムに柔軟に適用できます.フレームワークではなくライブラリなので、特定の生態系に依存することなく柔軟に使用できます.

    • 🍫 JSXって何?

  • Javascriptの構文を拡張し、Javascript XMLの略です.
  • ReactでUIを構成するために使用される構文は、Reactの別名を作成するために使用することができる.

    • ブラウザが認識できるJavascriptコードではなくJavascriptの構文を拡張しているので、「Babel」などを使ってブラウザを理解できるJavascriptにコンパイルする必要があります.

    🍫 構成部品


    reactは素子単位で開発されていますが、素子とは何ですか?

  • 簡単に言えば、特定のアプリケーションやUIの一部(機能)を担当するコードセットと見なせば、より便利です.

  • ショッピングモールを例にとると、ホームページがあり、上端にタイトルナビゲーション、商品検索ウィンドウ、おすすめ商品リスト、人気商品ランキング、ツイッターなどがあります.簡単に言えば、この2つの方法はいずれも素子と呼ぶことができ、それを単独で分離し、「素子化」させ、単独で開発することができる.

  • このような利点は,後でUI構造が完全に変化しても,機能単位で開発されたコンポーネントをその構造に再組み立てるだけで容易に修正でき,特に特定の機能を開発する際には,他の何にも依存せず,その機能の開発に忠実であることである.

    • 🍫 JSX文法のいくつかの規則

  • の複数のレイヤーを作成する場合は、1つの大きなレイヤーにすべてのレイヤーを含める必要があります.
  • CSS classプロパティを指定する場合は、「className」とマークします.
  • Javascript構文(変数、関数など)を使用する場合は、カッコ{ }で囲みます.
  • Reactの構成部品は、大文字で始まる必要があります.
  • JSXでは、条件文はif文ではなく3つの演算子を使用します.
    • <div>
  {
   (1+1 === 2) ? (<p>정답</p>) : (<p>탈락</p>)
  }
</div>
    複数の重複するHTML段落が表示される場合はmap()関数を使用します. 
    const posts = [
 {id:1, title: 'taehyun', content: 'Hi'},
 {id:2, title: 'taero', content: 'Hello'}
]

function Ex () {
  const content = posts.map((post) => {
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  });
  
  return (
    <div>
     {content}
    </div>
  );
 }
    ただし、mapを使用する場合はkey属性を付与しなければならない.配列内の各オブジェクトに一意のidまたはidがない場合は、インデックス番号などを指定する必要があります.

    🍫 reactプロジェクトの開始


    だから反応してスパプロジェクトを作りたいです
    しかし,JSX構文でコードを記述するだけでは終了しない.
    上記の「Babel」などのコンパイルツールを含む複数のツールを使用してこそ、私が望む結果が正常に得られます.
    そのため、Facebookはこれらのツールが設定された環境を提供しています.
  • 端末では、npx create-react-app projectNameコマンドを入力するだけで必要なすべてのツールを含むパッケージをダウンロードできます.
    • [MySQL]プログラマ
    [React] Movie-app Notes - Memo