[CS] React Day-18

Web、デスクトップ、モバイルなど多くのプラットフォームで使用できるフロントエンドライブラリと応答について学習します.

Reactの3つの特徴

を理解する

JSXを作成した理由、

応答コンポーネントの要件

について

反応とは?

フロントエンド開発用JavaScriptオープンソースライブラリ
Reactを使用する理由は3つあります.

宣言型

要素に基づく

汎用性

宣言型とは?

宣言プログラミングは、HTML、CSS、JSに分けるのではなく、ファイル内でページを明示的に作成するのに役立ちます.
(HTML、CSS、JSを切り替える必要はありません.)

構成部品ベースとは?

1つの機能の実装には、複数の条件を満たす必要がある.
素子を分離する場合、それらは互いに独立しており、繰り返し使用することができる.
△機能そのものに集中して開発することができる.

汎用性

応答はJavaScriptプロジェクトの任意の場所に適用できます.
信頼性が高く、有名で、本機に反応してモバイル開発を行うこともできます.

JSXとは何ですか。(JavaScript XMLの略)

JavaScriptの拡張構文.
しかし、これはJavaScriptコードではありません.したがって、ブラウザでスクリーンをコンパイルしてレンダリングするには、Babelという名前の友達が必要です.

React JSX

DOMとは異なり、ReactはCSSとJSX構文を使用してWebアプリケーションを開発するしかありません.1つの構成部品を実装するために必要なファイルは少なく、構成部品が一目で見えます.
JSXはHTMLと似ていますがHTMLではないので「Babel」が必要です.
DOM(HTML、CSS、JS)を使用するよりも、REACT JSXを使用すると明示的にコードを記述することができ、一目で見ることができます.
構造と動作のコードを結合したコードセットを素子と呼ぶ.
JSXを使用しないでreact要素を作成できますが、コードが複雑で可読性が悪いため、JSXを使用することをお勧めします.

JSX構文

JSXに複数の別名を作成する場合は、openタグとclostingタグを使用してパッケージする必要があります.

JSXルール1

ReactはCSSレベルのプロパティを指定するには、「className」とマークする必要があります.HTMLで作成したようにclassを使用すると、正常に動作しません.

JSXルール2

JSXでJavaScriptを記述する場合は、カッコを使用する必要があります.
カッコを使用しない場合は、純粋なテキストです.
ex)

function App() {
	const name = 'KJ';
    
    return (
    	<div>
        	Hello, {name}
        </div>
    );
}

JSXルール3

JSXを使用してreactエイリアスを作成した場合は、大文字で始まる必要があります.小文字で始まるとHTMLセグメントとして認識されます.
このように「大文字」で作成されたJSX素子を定義素子と呼ぶ.

JSXルール4号(if文なし...3つの演算子を使用してください)

条件レンダリングではif文ではなく3つの演算子を使用する必要があります.
ex)

<div>
	{
    	(1+1 === 2) ? (<p>정답</p>) : (<p>탈락</p>)
    }
</div>

JSXルール5(複数のHTMLセグメントを表示する場合はmap()関数を使用)

Reactに複数のHTMLセグメントが表示される場合は、「map()」関数を使用します.
map関数を使用する場合は、「key」JSX属性を入れる必要があります.
キー(key)アトリビュートが配置されていない場合は、警告が表示されます.
ex)

const posts = [
	{id: 1, title: 'KJ', content: 'Welcome'},
    {id: 2, title: 'SJ', content: 'Good bye'}
];

function Blog() {
	const content = posts.map((post) => 
    	<div key={post.id}>
        	<h3>{post.title}</h3>
            <p>{post.content}</p>
        </div>
    );
    
    return (
    	<div>
        	{content}
        </div>
    );
}

mapを用いた繰返しHands-on

Reactで複数のデータをレンダリングするときにマッピング方法を使用します.
少量の文章はハードコーディングで解決できますが、フラットメソッドマッピングを使用すると、数百の文章を作成するときに自動的にレンダリングできます.

mapで繰り返す

アレイの各要素

を抽出する.

特定論理(関数)

を用いる

の他の要素(map)として指定します.

ex)mapの実例

function Blog() {
  // postToElement라는 함수로 나누지 않고 아래와 같이 써도 무방합니다.
  const blogs = posts.map((post) => (
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  ));
  return <div className="post-wrapper">{blogs}</div>;
}

警告はkeyプロパティ値を入力した後にのみ消えます.mapメソッドの内部の最初の部分に置けばいいです.

Component

1つの機能を実現する複数のコードの集合.
UIはUIを構成する必須要素だと考える人もいる.
コンポーネントは、ユーザーインタフェースとは独立した一部です.複数の構成部品を組み合わせてアプリケーションを作成できます.
すべてのREDOアプリケーションには、少なくとも1つのコンポーネントがあり、内部にはRoot(Root)があります.他のサブエレメントは、階層構造と呼ばれるエレメントを有していてもよい.
(最終的にはツリー構造...)

内容を整理する

JSXは、JavaScriptを拡張した構文を使用してReactコンポーネントを作成する際に使用される構文です.いくつかのHTML構文を使用しますが、他の構文を使用します.
JSXを使用しなくてもreactを使用できますが、構文の読み取りやコードの複雑さを軽減します.

注意事項

複数のレイヤーが存在する場合はopengtag、clostingtagを使用する必要があります.
コンポーネント単位でコードを記述すると、コンポーネント間の依存性が低下します.したがって、独立して実行されます.

注意事項

let langs = ["JavaScript", "HTML", "Python"];
  let viewLangs = () =>  {
    return langs.map((it) => {
      return <p>{it}</p>;
    });
  };

  return (
    <div>
      {viewLangs}
    </div>
  );

関数として{viewLangs}を呼び出します.
関数を呼び出す場合は、{viewLangs()}を入力する必要があります.