React Router

リアクションライブラリは別のページアプリケーションで、HTMLファイルは1つしかありません.
参照)スパって何?
既存の開発ではHTMLファイルの数はページの数と同じであるが,別のReactではどのように別のページを表示するのか.
このときに使用されるのがreact-Routerです.
異なるパス(アドレス)に応じて異なるビュー(画面)を表示
1)React Routerのインストール

npm install react-router-dom --save

--saveの原因はpackageです.確かにjsonに残るdependencies!
2)Routes素子の実装

import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from 'react-router-dom';

import Login from './pages/Login/Login';
import Signup from './pages/Signup/Signup';
import Main from './pages/Main/Main';

class Routes extends React.Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={Login} />
	  <Route exact path="/signup" component={Signup} />
          <Route exact path="/main" component={Main} />
        </Switch>
      </Router>
    )
  }
}

export default Routes;

3) index.js

ReactDOM.render(<Routes />, document.getElementById('root'));

ルーティング機能を適用するには、ルーティングを設定済みの構成部品に変更する必要があります(<Routes/>).
4)ルーティング
コース移動方法は2種類あります.

<Link>使用部品

import React from 'react';
import { Link } from 'react-router-dom';

class Login extends React.Component {
  render() {
    return (
      <div>
        <Link to="/Main"> 홈 </Link>
      </div>
    )
  }
}

export default Login;

・react-router-domで提供されている<Link>素子はDOMから<a>Compileに変換されている.

<a>ラベルと<Link>ラベルはいずれも指定された経路に移動可能ですが<a>ラベルはReactでは使用されませんか?
いいえ.<Link>タグはSPA内のページ切り替えに用いられ、外部サイトに移動するには<a>タグを用いる.

withRouterHOC道路実施

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

class Login extends React.Component {

  goToMain = () => {
    this.props.history.push('/signup');
  }

   goToMain = () => {
     if(response.message === "valid user"){
       this.props.history.push('/main');
     } else {
       alert("회원이 아닙니다. 가입 먼저 해주세요")
       this.props.history.push('/signup');
     }
   }

  render() {
    return (
      <div>
        <button
          class="loginBtn"
          onClick={this.goToMain}
        >
          로그인
        </button>
      </div>
    )
  }
}

export default withRouter(Login);

goToMain中道具の客体の歴史
移動に近づくことができます.

propsルーティング情報を受信するには、エクスポートされたコンポーネントにwithRouterで包む必要があります.

★<Link>とwithRouterHOCの使用差<Link>クリック時の即時移動を実施するためのロジック
ex)Navbarでメニューをクリックして対応するメニューページに移動withRouterHOCページ切り替え時に処理するためのその他のロジック
ex)ログインボタン->BackAPIへのデータ送信/ユーザデータ検証、承認

Scss

SCSを使用する理由
Webはますます複雑になり、大量のCSSファイルが発生し、コードが重複し、メンテナンスが困難になる.これらの問題を解決するために,プログラミング概念(変数,関数など)のCSS前処理法を組み合わせた.

SCSS機能

1. Nesting
Sassの最も基本的な機能.Nesting
JSX最上位要素のclassNameを構成部品名と同じに設定します.scssファイルで
サブエレメントスタイルのプロパティは、最上位エレメントの内部で定義できます.
既存CSS

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Scss Nesting

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  li {
	display: inline-block;
     }
  }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

2.変数、&演算子、extendなどの機能を利用可能
どのページにもよく使われるtheme colorがあります.この場合は繰り返し使用されるので、$タグで変数を生成して使用できます.
extendは、属性と値が全く同じコードを複数の場所で記述するために使用されます.

$theme-color: blue;  // 색깔을 변수로 지정

%center {
	display: flex;
	justify-content: center;
  	align-items: center
}

mainContainer {
  @extend center; // center 요소의 속성,값 동일 적용
  button {
	  width: 200px;
	  height: 100px;
	  background-color: $theme-color;
	  &:hover {
	   background-color: red;
	   cursor: pointer;
		}
	}
	input {
	  background-color: $theme-color;
	  &:focus {
	  background-color: red;
		}
	}
}

詳細については、本書を参照してください.
[正式ドキュメント]Sass Basic Guide