反応基1(JSX/Router)

Reactはフロントエンド開発用JavaScriptオープンソースライブラリ
3種類の反応プログラム設計特徴

宣言:コードの意図を詳細に分析する必要はありません.
✅ JSXを使用して1つのファイルに

を作成し、HTML/JavaScript/CSSを問わず

コンポーネント:コンポーネントの開発に基づいて、1つの機能を実現するために複数のコードを含む
✅ 構成部品に分離する独立した高再利用可能な開発*保守性Up

汎用性:JavaScriptプロジェクトの任意の場所で柔軟に応用できる応答、React Nativeによるモバイル開発

が可能
JSX
JSXはJavaScriptを拡張した構文ですが、ブラウザがすぐに実行できるJavaScriptコードではありません.
BaelはJSXをJavaScriptにコンパイルします.
JSXルール

すべてのレイヤーを1つのレイヤーに含める-複数のレイヤーを作成する場合はopengtagとclostingtagラップを使用します

<div>
  <div>first element</div>
  <div>second element</div>
</div>

class属性はclassName(classと表記されている場合にJavaScriptのclassと認識する)

で表記する.

<div className=”class”>content</div>

バインディング

:JSXでJavaScriptは括弧で囲まれています({}で囲まれていない場合はテキストとして認識されます).

function App(){
  const messgae1 = 'React 바인딩';
  const message2 = () => {return '{}을 사용';}

  return (
    <div className="myClass">
      <p>{message1}은 {message2}한다.</p>
    </div>
  );
}

カスタム構成部品を大文字で開始

function MyComponent(){
  return <div>My Component</div>;
}

function App(){
  return <MyComponent />;
}

条件付きレンダリング3つの演算子を使用

<div>
  {
    (conditon === true)? <p>True</p>:<p>False</p>
  }
</div>

複数のHTMLセグメントを表示する場合は

を使用

const students = [
  { id : 1, name : 'Jang', grade : 'B'},
  { id : 2, name : 'Kim', grade : 'A'},
  { id : 3, name : 'Park', grade : 'C'},
  // ...
  { id : 100, name : 'Lee', grade : 'B'}
];

function StudentList() {
  const studentList = students.map((student) => (
    <div key={student.id}>
      <h3>{student.name}</h3>
      <p>{student.grade}</p>
    </div>
  ));
  return <div className="post-wrapper">{studentList}</div>;
}

✅ map 메서드의 결과를 return문의 인라인으로 처리할 지 변수로 추출할지는 개발자가 판단할 몫!

構成部品
1つの機能の複数のコードセット
React複数のコンポーネントを組み合わせたアプリケーションの作成
構成部品関係はツリー構造
コンポーネント開発の利点

HTMLを変更して構造を変更する場合、JavaScriptは構造とスタイルに基づいてDOMを操作する必要がありますが、コンポーネントに基づいて設計されている場合は、コンポーネントの位置を変更するだけです.

Virture DOM
応答では、ブラウザのDOMにアクセスすることによって変化を反映するのではなく、仮想DOMに一度レンダリングし、既存のDOMと比較することによって変化が必要な場所だけをレンダリングするため、従来の方法よりもパフォーマンスが優れています.
SPA(Single Page Application)
バージョンから1ページの応答を受信し、クライアントで画面を整理する方法
クライアントはサーバからデータ(JSON)を要求し、応答を受けたデータで画面をリフレッシュする
サーバでは、複数のクライアントがリクエストを発行すると、ページは生成されず、リクエストデータのみが返されるため、負荷が小さい
SPAの欠点

JavaScriptファイルが大きいため、最初の画面のロード時間が

長い.

SPAの場合、HTMLには他の情報がないため、検索エンジン最適化(SEO)は

が望ましくない.
Wireframe
Wireframeは、デザインに入る前にライン(wire)で輪郭(frame)をキャプチャするステップです.
木業(mockup)デスクトップやスマートフォンなどのフレームワークを追加することで、直感的に分かりやすい
React Router
npmでReact Router DOMをインストールする

npm install [email protected]

ルート(Routing):パスに従ってビューが変化するプロセス
React Routerキー構成部品

:ルータ(ルータ)

:パスマッチング

:パスマッチング

:パス変更

import {BrowserRouter, Switch, Route, Link} from "react-router-dom";

使用にインポート
✅ 使用例

function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">MyPage</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <MyPage />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
    </BrowserRouter>
  );
}

function Home() {
  return <h1>Home</h1>;
}

function MyPage() {
  return <h1>MyPage</h1>;
}

function Dashboard() {
  return <h1>Dashboard</h1>;
}

export default App;