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
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から警告された
この設定をしていないと、PCとスマートフォン、タブレットなど各デバイスごとに画面幅が違うブラウザで見た時に、ページが小さく表示されてしまったり、はみ出してしまったりする場合があります。
レスポンシブ対応が当たり前になってきている中では必須の設定です。
なのでブラウザをエミュレートするMicrosoft Edge Toolsから警告されたのだろう。
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を削る
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を削る
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 {
text-align: center;
}
**/
.App-header {
background-color: #282c34;
color: white;
}