react-projectあなたの電話番号(0.デフォルト)

入社後、5月-6月に反応を学び、7-8月にプロジェクトを開始.8-9月にコロナがあったので忙しくてプロジェクトをやり直すので...延期しました...無言の圧迫が襲ってきて、私は反応を学ばなければなりません.今年の年末までに結論は勉強しなければならない...だから今、私の位置を見て、当時(5-6月)したいくつかの例を振り返って、私の位置を確定したいと思っています.
1つの例は、電話帳を入力し、データ状態に保存、消去、変更、および追加することである.キム・Velopoterの講義で報告したはずなので今回もキム・ミンジュンのブログを参考に
出典,参照https://react.vlpt.us/[ベロポットとのモダン反応]

npx create-react-app .

デバッグVscode拡張でDebugger for Chromeを検索してインストール
デバッガは、特定のポートの特定のパスにロードされたJSコードをリスニングします.

continue
次のブレークポイントに移動し、次のブレークポイントがない場合はデバッグを終了します.
- step over
現在切断されているファイルから次の行

に移動します.

step into
中央ブレークラインで実行する内部関数

に移動します.

step out
ブレークラインから呼び出された場所に移動します.

restart
デバッガ

を再実行

stop
デバッガ

を終了

.vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "chrome debugger",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src"
    }
  ]
}

F 5キーを押して開けろ!
準備はできていると思いますが、componentをロードするとcssのデフォルト設定はありません...だからリセットcssを生成したいと思っていましたが、遠いライブラリがあると思いますので調べてみました.
npm install styled-components styled-reset
設定!詳細については、次のリンクを参照してください.
https://styled-components.com/[デザイン-パーツ穴]
Components/GlobalStyles.jsxの作成

*GlobalStyle.js

import reset from "styled-reset";
import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
    ${reset}
    body{
        font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-size:14px;
        color:#000;
    }
`;
export default GlobalStyle;

ここで気をつけなきゃいけないポイント!!
backtic改行がおかしくなったら、一旦止めて、うううう、ちゃんと確認してコンパイルしてね
App.jsにインポート

*App.js
import GlobalStyle from "./component/GlobalStyle";
function App() {
  return (
      <GlobalStyle />
  );
}
export default App;

これにより、グローバル範囲でグローバルスタイルが有効になります.
本当に準備ができています次はinput導入編