React 入門
JavaScript コメント掲示板アプリの開発
不要コードを一旦削除
プロジェクトを新規作成すると，ロゴのアニメーションが表示されましたが，これらのコードは必要ないので一旦削除していきます．
public/index.html
public/index.html には多くのコメントが記載されています．これらのコメントは必ずしも削除する必要はありませんが，ハイライトしたコメントを削除することで必要なコードがごく僅かであることが理解できるようになります．
public/index.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
上でハイライトしたコメントを削除するとかなり見通しが良くなりました．その後，言語設定を日本語 (ja) に変更し，ページのタイトルも適当に変更しておくとよいでしょう．
public/index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React Comment アプリケーション</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
なお，上の20行目に id="root" 属性を持つ div 要素がひとつ配置されていることに注意してください．この要素にコンテンツが配置されることになります．さらに，index.html を編集して上書き保存した直後にブラウザの表示内容が自動的に更新されることにも注意してください．これはホットリロードと呼ばれる機能です．このホットリロードによってブラウザを手動で再読み込みするという手間が省略され，開発の効率を上げることができます．
src/App.js と src/App.css
src/App.js はデフォルトとなるアプリケーションのコンポーネントです．初期状態では次の通りロゴを表示するためのコードがあります．
src/App.jsimport logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
上のコードの大部分を削除して次の内容にします．なお，上の6行目にある <div className="App"> では className="App" も削除します．
src/App.jsimport './App.css';
function App() {
return (
<div>
</div>
);
}
export default App;
さらに，src/App.css については，記載されている内容をすべて削除します．（上の1行目にある import 自体を削除しても構いません．）
src/App.css
src/log.svg
src/App.js の1行目で src/log.svg を読み込んでいました．これはトップページのロゴデータのファイルです．これも必要なくなったのでファイル自体を削除して構いません．
src/index.css
src/index.css にはトップページのスタイルが設定されています．この内容は必要ないので中身を一旦すべて削除しておきます．
src/index.css
現時点で動作を確認すると，変更したページのタイトルがタブに表示されているだけで，ページのコンテンツは空になったはずです．
