[反応]SOPT第4回ワークショップ-反応実戦理論

23224 ワード
React SOPT React Hooks react router Grid Layout BEMメソッド論 scss 条件付きレンダリング テキストリンク

Web part Seminar week 4


-React Project part1


条件に合ったレンダリング

  • の条件に従って他の要素をレンダリングするために使用されます.
    • 1𗞚𔣤&活用
    const ResultCard = ({data}) => {
  return (
    data && <Component1/>
  )
}
    2朕三項演算子:条件はtrueが第一を表し、条件はfalseが第二を表す.
    const Test = ({data}) =>{
  return (
    <div>
      {data ? <div>Hello</div> : null}
    </div>
  )
}
    3πswitch:複数の条件下で使用
    switch(status){
  case "resolved":
    return <div>Resolved</div>
  case "rejected":
    return <div>Rejected</div>
  default:
    return <div></div>
}

    ✅ list & key


    レンダリングξ10063;listの場合、propsでkeyを設定する必要があります.
    keyは、各要素の固有値(id、indexなど)に設定する必要があります.そうしないと、エラーメッセージが表示されます.
    ❓WHY❓
    配列が変更された場合にのみ、変更された部分が更新されるため、配列を効率的にレンダリングできます.
    // 💛 예시1 : 각 객체별로 고유한 값을 가지는 변수를 키값으로 활용
userData.map((data) =>{
  return <Card key = {data.id} props = {data} />;  

// 💛 예시2 : index는 고유하므로 index를 키값으로 활용
userData.map((data, index) =>{
  return <Card key = {index} props = {data} />;

    GBMメソッド論


    BEM
    : Block Element Modifier
    :css classNameを決定する方法の1つです.
    .block__element--modifier
    ✔ブロック:再利用可能機能とは独立した構成部品
    勘定科目:ブロックを構成する単位
    ✔」modifier:blockまたはelementの属性
    <例>
    <div className = "card">
  <div className = "card__image>
    {image
      ? <img className = "card_image--photo" src = {image}/>
      : <img className = "card_image--empty" src = {EmptyImage}/>
    }
  </div>
</div
    上記の例ではcardはblockに相当する.
    image、description、buttonはelementに対応します.
    successとbackは修飾子に相当します.
    メリットとデメリット:classNameの重複防止

    ✅ SCSS : Sassy CSS


    SCSS
    : Sassy CSS
    :SASS機能をサポートするCSSサポート
    :SASSの構文は既存のCSSとは異なりますが、SCSSは非常に似ています.
    :変数、演算子、組み込み関数、ネストなど多くの機能を提供します.

    ✔勘定科目SCSSインストール

    $ npm install -g node-sass $ node-sass scss/main.scss public/main.css:node-sass<入力ファイルパス>[出力ファイルパス]
    $ node-sass --watch scss/main.scss public/main.css`
    :--ファイルがwatchオプションに変更されると、自動的に更新されます.

    ✔SCSSの使い方


    -1𗞚$宣言変数

    $main-color: #CEA0E3;

body{
  background-color: $main-color;
}
p{
  $main-color: white;
  color: $main-color;
}
    変数は
  • $
    • として宣言されます.
  • block scope
  • は、
    • を再割り当て可能である.

    -2ππ演算子の使用

    body{
  width: 900px/300px;
  height: 400px + 50px;
}
  • 演算子は
    • で使用できます.
  • /% == !=

    • -3ππ他のスタイルファイルをインポート可能

    @import "style.scss";
@import "_style";
  • @import「その他スタイルファイル」
  • scss拡張子
    • は省略可能
  • で始まるファイルは、
    • をコンパイルしません.

    -4𔣤@extend継承

    .class{
  font-size: 24px;
}
p{
  @extend .class;
}

    -5π@mixinは買収可能

    @mixin box($color){
  background-color : $color;
}
.class{
  @include box(red);
}
  • @mixinは、関数として
    • を使用できます.
    includeとして宣言されたmixinは
  • で使用できます.

    -6πオーバーラップ可能セレクタ

    body{
  color : green;
  li{
    font-size : 2rem;
  }
}
  • オプションオーバーレイ
  • &親選択プログラム
    • を使用

    ✔BEM、CSS、SCSS比較


    BEMCSSSCSS

    ✅ Grid Layout



    1 DのFlex Layoutとは異なり、2 Dレイアウトシステムです.

    応用✔Grid Layout

    display : grid;

    АААААААААААА

    grid-template-columns: 1fr 2fr 3fr; grid-template-rows: 100px 200px;

    ✔｣属性値として使用できる関数

    repeat(반복횟수, 반복값) minmax(최소값, 최대값) repeat(auto-fit, minmax(20%, auto))

    ✔Gridユニットをマージする場合


    grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
    このように、列の方向でマージとマージの終了を開始する場所と、行の方向でマージとマージの終了を開始する場所を指定できますが、次のようにマージすることもできます.
    grid-column: 2/4;
grid-row: 1/3;

    ✅ React Router


    :Reactのサードパーティ製ライブラリで、画面を切り替えることができます.
    インストール:npm install --save react-router-dom既存のページは<a href="..."></a>ページに移動しますが、欠点はページ全体をレンダリングする必要があることです.
    逆に、SPAはhtmlファイル(reactionからindex.htmlなど)の変化部分だけを置き換えます.このときはReact Routerを使用し、Linkを使用してページを移動します.

    ✔️ Link

    <Link to="/"> Go to home </Link>
  • リンクを使用してページ
    • を移動する
  • ブラウザーアドレス変更
    • のみ

    ✔️ Route

    <Route path = "/diary" component = {Diary}/>
  • アドレスがpathの場合、コンポーネントがレンダリングされます.
  • 正確:パスと完全に一致している場合にのみ、
    • がレンダリングされます.

    ✔️ Router

    <BrowserRouter>
  <Link to ="/"> Go to home </Link>
  <Route path = "/diary" component = {Diary} />
</BrowserRouter>
  • リンク、Routeタグを含むインタフェース
  • の一番上には1つしか存在しません.
  • BrowserRouter、HashRouter等

    • ✔️ Switch

    <Switch>
  <Route path = "/" component = {Main}/>
  <Route path = "/diary" component = {Diary}/>
  <Route component = {PageNotFound}/> 
</Switch>
  • 最初の一致するパスをレンダリングするコンポーネント
  • 故障処理有用

    10004 Routeの基本支柱


    💎 history

  • Route pathとURLマッチング情報
  • match.params:path設定値

    • 💎 match

  • アドレス
    • を任意に変更または戻すことができる.
  • history.Push():履歴スタック
    • に新しいパスをプッシュ

    💎 location

  • 現在のページの情報
  • location.search:urlクエリ

    • ✔️ withRouter

    import {withRouter} from 'react-router-dom'

const Test = ({history}) =>{
  return (
    <div>
      <button onClick={()=> history.push('/')}> Click </button>
    </div>
  );
};
  • 高次素子.
  • でルーティングされていない要素については、mathlyhistory、location
    • を使用することができる.

    ✔️ Hooks - useRef


    :reactからDOM要素をインポートします.
    const buttonEl = useRef();

const handleClick= () =>{
  buttonEl.current.focus();
}

return (
  <div>
    <button ref = {buttonEl} onClick = {handleClick}/>
  </div>
  • const変数名=useref()宣言
    要素をインポートする属性
  • にref={変数名}を追加
  • 変数名.Currentを使用してDOM要素
    • をインポートできます.
    問題に対する最も速い解決策、および他の間違いを見つける
    Linuxドライバ作成&&アプリケーションの呼び出し