React/TypeScript

• 2022年秋版　最新React/Typescript開発環境の作成
• 統率の取れた実装をするためのReactとTypeScriptのTips

• TypeScript再入門覚書 ① Atom環境構築編
• TypeScript再入門覚書 ② npmとwebpackでプロジェクト作成
• TypeScript再入門覚書 ③ React & Redux

• Hello React and TypeScript

• React+TypeScriptもいいぞ
• React + Redux + TypeScript でWebアプリを作った感想・勉強法と Angular との比較
• TypeScript1.6 + React 書いてみてハマったポイントとか
• React JSX with TypeScript(1.6)
• React & Webpack

• React + TypeScript + Webpackの最小構成
• React + Redux + TypeScriptの最小構成
• React TypeScript webpack HMR 最小構成

• React Native + TypeScript入門
• React & Webpack

• TypeScriptでReactを書く(1)：JSX

• create-react-app で TypeScript の環境を作る

開発手順 †

• プロジェクト作成（create-react-app使用）【推奨】

  $ create-react-app --scripts-version=react-scripts-ts [プロジェクト名]
  $ cd [プロジェクト名]
  $ npm start
  $ rm -rf src/*

  • create-react-app で --scripts-version=react-scripts-ts オプションを付けて実行

• プロジェクト作成（昔のやり方？）

  $ mkdir [プロジェクト名]
  $ cd [プロジェクト名]
  $ npm init
  $ npm install --save react react-dom @types/react @types/react-dom
  $ npm install --save-dev webpack webpack-dev-server

  • 実際のアプリケーションで使うモジュールは --save
  • 開発時のみ必要なモジュールは --save-dev

• [プロジェクトフォルダ]/package.json

      :
  "scripts": {
      "build": "webpack --progress --colors",
      "start": "webpack-dev-server"
  },
      :

• TypeScript関連パッケージのインストール

  $ npm install --save-dev typescript awesome-typescript-loader source-map-loader

• [プロジェクトフォルダ]/tsconfig.json

  {
      "compilerOptions": {
          "outDir": "./dist/",
          "sourceMap": true,
          "noImplicitAny": true,
          "module": "commonjs",
          "target": "es5",
          "jsx": "react"
      },
      "include": [
          "./src/**/*"
      ]
  }

• [プロジェクトフォルダ]/webpack.config.js

  module.exports = {
      entry: "./src/index.tsx",
      output: {
          filename: "bundle.js",
          path: __dirname + "/dist"
      },
      // webpackの出力をデバッグするためのsourcemapsを有効化
      devtool: "source-map",
      resolve: {
          // 解決可能な拡張子に'.ts'と'.tsx'を追加
          extensions: ["*", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
      },
      module: {
          loaders: [
              // '.ts'または'.tsx'の全てのファイルを、'awesome-typescript-loader'で扱う
              { test: /\.tsx?$/, loader: "awesome-typescript-loader" }
          ],
          rules: [
            {
              test: /\.tsx$/,
              exclude: /node_modules/,
              loader: 'awesome-typescript-loader',
            }
          ],
      },
      // インポートしたモジュールのパスが下記のいずれかにマッチする場合、
      // それに相当するグローバル変数が存在するものとしてそれを使用します。
      // 依存性の全てを扱うことを避けることができるようになり、
      // ビルド間でそれらのライブラリがキャッシュ可能になるため重要です。
      externals: {
          "react": "React",
          "react-dom": "ReactDOM"
      },
  };

• src/index.js（アプリ本体が App.js の場合）... index.js は必須

  import React from 'react';
  import { render } from 'react-dom';
  
  import App from './App';
  
  render(
    (<App />),
    document.getElementById('root')
  );

• コンパイル・実行

  $ npm run build
  $ npm start