[Smart-Z] React - 環境構築

React環境構築

webpack+TypeScript+React

任意のフォルダを作成、フォルダに空({})のpackage.jsonファイルを作成する。

1. webpackとTypeScriptをインストールする。

npm i -D webpack webpack-cli typescript ts-loader

2. 「react」「react-dom」モジュールをインストールする。

npm i -S react react-dom @types/react @types/react-dom

package.jsonが次のようになる。

{
  "devDependencies": {
    "ts-loader": "^5.4.3",
    "typescript": "^3.4.4",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.1"
  },
  "dependencies": {
    "@types/react": "^16.8.14",
    "@types/react-dom": "^16.8.4",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "private": true
}

3. package.jsonにビルドコマンドを追加する。

{
  "scripts": {
    "build": "tsc && webpack",
    "watch": "webpack -w",
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  ...
}

4. TypeScriptの設定ファイル： tsconfig.jsonを作成する。

{
  "compileOnSave": true,
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "jsx": "react",
    "moduleResolution": "node",
    "lib": ["es2020", "dom"],
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "allowSyntheticDefaultImports": true,
    "preserveSymlinks": true
  }
}

5. webpackの設定ファイル：webpack.config.jsを作成する。

module.exports = {
  // モード値を production に設定すると最適化された状態で、
  // development に設定するとソースマップ有効でJSファイルが出力される
  mode: "development",

  // メインとなるJavaScriptファイル（エントリーポイント）
  entry: {
    "main": ["./src/main.tsx"]
  },
  // ファイルの出力設定
  output: {
    //  出力ファイルのディレクトリ名
    path: `${__dirname}/dist`,
    // 出力ファイル名
    filename: "[name].js"
  },
  module: {
    rules: [
      {
        // 拡張子 .ts もしくは .tsx の場合
        test: /\.tsx?$/,
        // TypeScript をコンパイルする
        use: "ts-loader"
      }
    ]
  },
  // import 文で .ts や .tsx ファイルを解決するため
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".json"]
  },
  devtool:'source-map'
};

main.tsx、App.tsxを作成後、「npm run build」コマンドを実行すると、distの下にmain.jsが出力される。

./src/main.tsx

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

ReactDOM.render(<App />, document.getElementById('root'));

./src/App.tsx

import * as React from 'react';

class App extends React.Component {
  render() {
    return (
        <div>
          <h1>Hello React!</h1>
        </div>
    );
  }
}
export default App;

index.htmlにmain.jsを導入することで、「Hello React!」が表示される。

index.html

  <body>
    <div id="root"></div>
    <script src="main.js"></script>
  </body>