Learn React with TypeScript3を読んでる 環境構築とかその他の手直しが必要だった箇所について

Learn React with TypeScript 3を読み進めていきましたが、環境構築の部分で結構躓いたので備忘録的なまとめ。

基本的には公式サイトが一番参考になる…。

TypeScript -React & Webpack

Webpack  – TypeScript

ts-loader

webpackまわり

resolve内にModulesを追加

 
modules: [“src”, “node_modules”]
 
 
背景
 
 webpackのサーバーを起動しようとすると、

ERROR in (webpack)-dev-server/client?http://localhost:9000

Module not found: Error: Can’t resolve ‘./overlay’ in

みたいなエラーが出る時に有効
 
 

各種loaderの追加

css(style-loader, css-loader)とsvgを追加した。moduleも追加が必要です。

            {
                test: /\.css$/i,
                use: [‘style-loader’, ‘css-loader’],
              },
            {
                test: /\.svg$/,
                loader: ‘svg-inline-loader’
            }

背景

cssをインポートしたいってなった時にエラーが出たので…

//webpack.config.json
const path = require("path");
module.exports = {
	entry: "./src/index.tsx",
    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",
	output: {
		path: path.resolve(__dirname, "dist"),
		filename: "bundle.js"
	  },
    resolve: {
		modules: ["src", "node_modules"],
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: [".js",".ts", ".tsx"]
    },

    module: {
        rules: [
            {
                test: /\.ts(x?)$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: "ts-loader"
                    }
                ]
            },
            {
                enforce: "pre",
                test: /\.js$/,
                loader: "source-map-loader"
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
              },
            {
                test: /\.svg$/,
                loader: 'svg-inline-loader'
            }
        ]
    },
	devServer: {
		contentBase: path.join(__dirname, "dist"),
		compress: true,
		port: 9000
	  }
};

import関係


 tsconfig.json内のallowSyntheticDefaultImportsをtrue にするかどうかで変わってくる感じですね。


コンパイラに怒られるので、defaultを避けるか、名前付きインポートを行う。


import MDN

 

// tsconfig.json
{
  "compilerOptions": {
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
      "allowSyntheticDefaultImports":true,
      "outDir": "./dist/",
      "sourceMap": true,
      "noImplicitAny": true,
      "module": "es6",
      "target": "es6",
      "jsx": "react"
  }
}

CSS関係

ポップアップ上にボタンを作る実装部分があるのですが本のまま書くと、visibility:hiddenにしている要素が残っていてポップアップ下の要素がクリックできないので、desplay:noneにする必要がありました。

React楽しい

Reactも独自の型を設定しつつ実装を行っていきますが、型を定義できるTypeScriptのいい点ととてもマッチしていると思います。

お互いの強みを活かしつつコンポーネントごとに実装していけるので楽しいですね。

もうちょっと読み進めていきたいと思います。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする