create-react-appで作られたindex.htmlなどをすっからかんにしてベースを準備する。
まずは現段階で不要なものを削除していく。いつかreportWebVitals.jsとかsetupTests.jsとかちゃんと学びたいけどいまはスキップ。

骨と皮だけ残す

削除前のファイル構成

qiita-advent-like
├─node_module\
│  ：省略
│
├─public\
│  ├─favicon.ico
│  ├─index.html
│  ├─logo192.png
│  ├─logo512.png
│  ├─manifest.json
│  └─robots.txt
├─src\
│  ├─App.css
│  ├─App.js
│  ├─App.test.js
│  ├─index.css
│  ├─index.js
│  ├─logo.svg
│  ├─reportWebVitals.js
│  └─setupTests.js
├─package.json
├─package-lock.json
└─README.md

削除後のファイル構成

qiita-advent-like
├─node_module\
│  ：省略
│
├─public\
│  └─index.html
├─src\
│  ├─App.css
│  ├─App.js
│  ├─index.css
│  └─index.js
├─package.json
├─package-lock.json
└─README.md

参考：【React】manifest.jsonについて

`index.html`を削る

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>きーたあどべんとらいく</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

デフォルトで記載されていた<meta name="viewport" ～を削除したところMicrosfot Edge Toolsから警告された

参考：[React] metaタグを理解する

この設定をしていないと、PCとスマートフォン、タブレットなど各デバイスごとに画面幅が違うブラウザで見た時に、ページが小さく表示されてしまったり、はみ出してしまったりする場合があります。
レスポンシブ対応が当たり前になってきている中では必須の設定です。

なのでブラウザをエミュレートするMicrosoft Edge Toolsから警告されたのだろう。

`index.js`を削る

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

あれ、えーとStrictModeってなんだっけ…あぁ、これか。

参考：【React】Strictモードの挙動【バージョン18による】

端的にいうとjavascriptのコードを通常より厳しくエラーチェックすることのできる仕組みのことです。

`index.css`を削る

index.css

body {
  margin: 0;
  font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
}

.cssがindex.cssとApp.cssに分かれていることが「なるほど」って感じ。
コンポーネントごとに分けておくと管理が楽だね。

こいつ、このままスルーしようかと思ったけどやっぱりここでも初見のものがあったので掘り下げていく。

`margin`

参考：CSSのmarginとは？paddingとは？余白の指定方法まとめ

padding：要素の内側の余白
margin：要素の外側の余白

すっごい必須の知識なのに全然覚えられない。やっぱり100本ノックみたいなの欲しいわ。作ろう、いつか。自分で。

`font-family`

たくさん並んでるけど、前から優先なのかな。

参考：font-familyの書き方まとめ：CSSでフォント種類を指定しよう

※font-familyメーカーなるツールも提供されていた。いつか頼りになりそう。

なぜ複数書くのかというと、OSによって入っているフォントが異なるからです。言い換えると、Windowsなのか、Macなのか、iPhone/iPad（iOS）なのかで搭載されているフォントが異なるのです。Macにしか入っていないフォントを指定しても、Windowsパソコンからはそのフォントでウェブページを見ることはできません。

`font-family: -apple-system`

参考：Mac・iOS のシステムフォントを CSS で使う : 「-apple-system」
参考：ウェブサイトに-apple-systemなんてフォント指定はやめてほしい。

`-webkit-font-smoothing`, `-moz-osx-font-smoothing`

参考：-webkit-font-smoothing: antialiased; は使わないでおく
参考：font-smoothingでOSXでのフォントのレンダリング方法を調整する

`App.js`を削る

App.js

import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
      </header>
    </div>
  );
}

export default App;

<header className="App-header">も消そうかなと思ったけど、どうせ使うから残しておく。
こういう中途半端な精神がいけないのかも。

`App.css`を削る

App.css

/**
.App {
  text-align: center;
}
**/

.App-header {
  background-color: #282c34;
  color: white;
}