React TS Handson

# 2.雛形の整理

  • create-react-appで生成したコードを整理する

# ディレクトリ構成の整理

  • 今回は最小構成で作成するためsrcディレクトリの中のファイルを一旦すべて削除する
rm src/*
1
  • srcディレクトリに最小構成のファイルを作成する

# src/index.tsx

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

ReactDOM.render(<App />, document.getElementById('root'));
1
2
3
4
5

# src/App.tsx

import React from 'react';

function App() {
  return <h1>Hello World</h1>;
}

export default App;
1
2
3
4
5
6
7

# public/index.html

  • 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" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12

# ファイル一覧

  • ここまでで以下のようなディレクトリ構成になった
.
├── node_modules    // 外部ライブラリ
├── README.md       // プロジェクトの説明などを記載するファイル
├── package.json    // 依存するライブラリなどを記載するファイル
├── public          // Web上に公開するディレクトリ
│   ├── favicon.ico // ブラウザのタブに出るアイコン
│   └── index.html  // エントリーポイントとなるhtml
├── src             // 開発者が書くコードを置くディレクトリ
│   ├── App.tsx     // ルートコンポーネント
│   └── index.tsx   // Reactのコードのエントリーポイント
└── tsconfig.json   // TypeScriptの設定ファイル
1
2
3
4
5
6
7
8
9
10
11
12
  • 基本的にsrc配下のファイルをいじっていくことになる

# 動作確認

  • この状態でnpm startすると画面にHello Worldが表示される

hello

# 雛形の動作の説明

  • npm startを実行すると画面にHelloWorldが表示されるがどういった仕組みになっているのか
  • 注目するファイルは以下の3つ
    • public/index.html
    • src/App.tsx
    • src/index.tsx

# index.html

  • body部分だけ抜粋
<body>
  <div id="root"></div>
</body>
1
2
3
  • 画面に表示する要素は空っぽのdivタグだけしかない(空っぽなので何も表示されない)
    • rootというid属性をつけている

# App.tsx

import React from 'react';

function App() {
  return <h1>Hello World</h1>;
}

export default App;
1
2
3
4
5
6
7
  • App.tsxの正体は<h1>Hello World</h1>というhtmlタグを返す関数である

Javaを学習済みの人向けに

  • Javaでいう以下のメソッドと同じようなイメージ(厳密にはだいぶ違うけど)
    public static String App() {
  return "<h1>Hello World</h1>";
}
    1
    2
    3
  • JavaScriptはexport default App;といった風にexportしないと他のファイルからimportすることができない

# index.tsx

  • React(JavaScript)の世界とhtmlの世界をつなぐファイル
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));
1
2
3
4
5
  • 最後の行に注目する
    • ReactDOMのrenderメソッドを呼んでいる
      • App.tsxの内容(<h1>Hello World</h1>)をid属性がrootの要素(index.htmlにあるdivタグ)に挿入する、という動きをする

reactdom

  • つまりApp.tsxの内容を拡張していくことで画面に表示する内容を拡張していくことができる

TIP

  • JavaScriptでは外部ライブラリや別ファイルをimportで読み込む
  • 自作のファイルは相対パスで指定することができる
  • 拡張子が.jsやts, tsxの場合は省略できる

# まとめ

  • これまでの3つのファイルを整理すると
    • index.html・・・空っぽのdivタグを配置(id属性にrootを設定)
    • App.tsx・・・h1タグを返す関数
    • index.tsx・・・id属性がrootのdivタグに、App.tsxの内容(つまりh1タグ)を挿入している
  • App.tsxに当たる部分を拡張していくことでアプリを作っていく
Last Updated: 2021/01/26

← 3.HelloWorld編 →