神戸学院大学 経営学部 林坂ゼミ

React 入門トップページ

« 戻る 次へ »

React 入門

TypeScript コメント掲示板アプリの開発

不要コードを一旦削除

プロジェクトを新規作成すると，ロゴのアニメーションが表示されましたが，これらのコードは必要ないので一旦削除していきます．

public/index.html

public/index.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" />
    <!--
      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 Comment アプリケーション</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>

なお，上の31行目に id="root" 属性を持つ div 要素がひとつ配置されていることに注意してください．この要素にコンテンツが配置されることになります．さらに，index.html を編集して上書き保存した直後にブラウザの表示内容が自動的に更新されることにも注意してください．これはホットリロードと呼ばれる機能です．このホットリロードによってブラウザを手動で再読み込みするという手間が省略され，開発の効率を上げることができます．

react-2024-02

src/App.tsx と src/App.css

src/App.tsx はデフォルトとなるアプリケーションのコンポーネントです．初期状態では次の通りロゴを表示するためのコードがあります． 

src/App.tsx
import React from 'react';
import 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.tsx</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.tsx
import './App.css';

function App() {
  return (
    <div>
    </div>
  );
}

export default App;

さらに，src/App.css については，記載されている内容をすべて削除します．（上の1行目にある import 自体を削除しても構いません．） 

src/App.css

src/log.svg

src/App.tsx の1行目で src/log.svg を読み込んでいました．これはトップページのロゴデータのファイルです．これも必要なくなったのでファイル自体を削除して構いません．

src/index.css

src/index.css にはトップページのスタイルが設定されています．この内容は必要ないので中身を一旦すべて削除しておきます． 

src/index.css

現時点で動作を確認すると，変更したページのタイトルがタブに表示されているだけで，ページのコンテンツは空になったはずです．

react-2024-03

目次に戻る