Index素子

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter} from 'react-router-dom';

ReactDOM.render(
  <React.StrictMode>
  <BrowserRouter><App /></BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

window.resizeTo(
  window.screen.availWidth,
  window.screen.availHeight
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

htmlキャンバスでレンダリングを開始するIndexコンポーネント.ルート要素を見つけて、ルーティングを設定するAppコンポーネントをロードします.まず「React.StrictMode」が基本的に適用されます.
React Strictモードとは?
StrictMode currently helps with:
1.Identifying components with unsafe lifecycles
2.Warning about legacy string ref API usage
3.Warning about deprecated findDOMNode usage
4.Detecting unexpected side effects
5.Detecting legacy context API
6.Detecting unsafe effects
7.Additional functionality will be added with future releases of React.
以上のすべての事項は、ラベル<React.StrictMode>に囲まれた素子サブアイテムにのみ適用されると考えられる.
<BrowserRouter>ラベルは、小包のappコンポーネントに<Routes>ラベルを使用できるようにする.
単一のページを呼び出すと、DFSアルゴリズムと同様にコンポーネントがロードおよびレンダリングされます.最初に呼び出されたIndexコンポーネントは、最後に実装されたwindowです.resizeToメソッドを呼び出すと、デバイスのViewportはドラゴンの幅、高さに応じてウィンドウを設定します.

CSS

body {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: black;
  color: white;
  overflow-y: scroll;
  overflow-x: auto;
  touch-action: inherit;
  -webkit-user-drag: none;
  user-select: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

WidthとHeightを別々に見てみましょう.まず%とvwの違いを理解します.%もしそうであれば、親の幅をパーセントで追跡し、body要素は100%日でviewportの幅を持つことを示します.vw、vhを使用すると、スクロールバーの幅や高さも含まれますので、誤った位置が計算される可能性があることに注意してください.
background-colorを黒、colorを白に設定し、ユーザーが見たデフォルトの画面に黒に白文字が表示されます.
-webkit-user-drag:none,user-select:noneを設定してテキストの選択とドラッグを阻止します.ルート要素のuser-select propertyをautoに設定し、bodyラベル(親)のプロパティに注目する構造を使用します.