はじめに
Webアプリを作りたいなーと思っていたときに『りあクト！TypescriptではじめるつらくないReact開発』の本を読んだので，Reactの理解のために自分なりにまとめてみました．他の記事なども参考にしています．また，create-react-appを使ってローカル上で動かしたことも説明します．
Typescript
Javascriptに型が取り入れられた言語．基本的な仕様はJavascriptと同じ．静的片付け，形推論，Null安全性などモダンな技術が取り入れられている．VSCodeと相性がよく，コーディング中にエラーをはいてくれたり,型を教えてくれたりして便利．
Reactとは
javascriptのフレームワーク．Webの画面の表示に特化．主に以下の３つの概念が重要！
- 仮想DOM
- コンポーネント指向
- 単方向データフロー
仮想DOM
仮想DOMとは,呼ばれるもの擬似的にDOMを再現した構造体．
ユーザからの操作によって何か新しい情報を受け取り，画面の表示を変更する際に，仮想DOMを作成します．そして，実際のDOMとの差分から一部の必要なDOMだけを再構築します．開発者が意識しなくてもいい感じに最適なDOMの更新がされるため，高速な画面の表示が可能となる．
コンポーネント指向
コンポーネントとは，カプセル化された再利用な可能な構造のもの.
reactでは，このコンポーネントを生成し，そのコンポーネントを配置，組み合わせることで画面を生成します．
単一方向データフロー
reactでは，データの受け渡しが上の階層から下の階層への一方向しか受けつけない．好き勝手にコンポーネントの中身を変更させずにコンポーネントの独立性を高めるためらしい．
環境
- node v11.11.0
- npm 6.7.0
- yarn 1.15.2
詳しいインストール方法はこちら
プロジェクトの生成 create-react-app
node, npm, yarnがインストールされている状態で下記のコマンドを実行するとプロジェクト環境を生成します．オプションに--typescriptをつけることでプロジェクトの構成がtypescriptになります．
npx crate-react-app todo --typescript
cd todo
yarn start
このようにすると初期状態のアプリがローカルホストで起動します．上記画面のような画像が表示されます．この状態から必要なファイル追加や変更をして行きます．
中身を見てみる
index.tsx
React要素をルートDOMノードにレンダリングするために，２つの要素をReactDOM.render() に渡します．index.tsxでは，Appコンポーネントをindex.htmlのidが"root"のdivタグにレンダリングしています．
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <!-->このノードにレンダリング<-->
</body>
</html>
###App.tsx
ここでは，コンポーネントを作成しています．Reactではjavascript内にhtmlタグを直接記述できるJSXという方法をとっている．Typescriptの場合だとTSX．下記のファイルのようにソースコード上にhtmlタグが記述された形となっている．この作成したコンポーネントをエクスポートさせ，index.tsxでインポートしている．
import React from 'react';
import logo from './logo.svg';
import './App.css';
const App: React.FC = () => {
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;
ディレクトリ構成
.
├── README.md
├── node_modules
├── package.json
├── public
├── src/
| ├── App.css
| ├── App.test.tsx
| ├── App.tsx
| ├── index.css
| ├── index.tsx
| ├── logo.svg
| ├── react-app-env.d.ts
| └── serviceWorker.ts
├── tsconfig.json
└── yarn.lock
開発をしていく際にはsrc以下で必要なファイルを記述して，必要なpackageがあるならyarnかnpmで追加していくことが分かっていれば良さそう．
最後に
何か自分で新しいアプリケーションを開発するならば，react-create-appで用意したプロジェクトに修正や追加を加えていけばよさそう．Reactの公式サイトでは日本語でもかなり詳しく書かれていたため，始めるなら読んでみると良いと感じた．Reactの概念を意識しつつ，具体的な書き方を学びたいと思います．