React.jsをTypeScriptでやる方法

intro-reactjs-with-ts.md

React.jsをTypeScriptでやる方法を以下に示す。React.jsなのでtsじゃなくてtsxを使ったケースをここでは示している。

$mkdir react-app
$cd react-app
$npm init
$npm install webpack
$npm install -D webpack-cli @webpack-cli/generators
$npx webpack init
? Which of the following JS solutions do you want to use? Typescript
? Do you want to use webpack-dev-server? Yes
? Do you want to simplify the creation of HTML files for your bundle? Yes
? Do you want to add PWA support? Yes
? Which of the following CSS solutions do you want to use? SASS
? Will you be using CSS styles along with SASS in your project? Yes
? Will you be using PostCSS in your project? No
? Do you want to extract CSS for every file? No
? Do you like to install prettier to format generated configuration? Yes
? Pick a package manager: npm
[webpack-cli] ℹ INFO  Initialising project...
 conflict package.json
? Overwrite package.json? overwrite
    force package.json
   create src/index.ts
   create README.md
   create index.html
   create webpack.config.js
   create tsconfig.json

Changes to package.json were detected.

Running npm install for you to install the required dependencies.

up to date, audited 486 packages in 411ms

61 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
npm WARN config cache-min This option has been deprecated in favor of `--prefer-offline`.
npm WARN idealTree Removing dependencies.webpack in favor of devDependencies.webpack
npm WARN deprecated rollup-plugin-terser@7.0.2: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser
npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead

added 440 packages, and audited 926 packages in 2s

132 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
[webpack-cli] Project has been initialised with webpack!
$npm install react react-dom
$npm install -D @types/react @types/react-dom
$mv src/index.ts src/index.tsx

src/index.tsxは以下のようにした。 以下のコードの場合、index.html に <div id="react-app"></div> を追加してあげる必要がある。

import React from 'react'
import { createRoot } from 'react-dom/client'

class Welcome extends React.Component {
  render() {
    return (
      <>
        <div>hi</div>
        <div>hi</div>
      </>
    );
  }
}

const root = createRoot(document.getElementById("react-app"));
root.render(<Welcome />);

package.json はReact.jsの構文を使いたいため、以下のオプションを追加する。

 {
   "compilerOptions": {
     "allowSyntheticDefaultImports": true,
     "noImplicitAny": true,
     "module": "es6",
     "target": "es5",
+    "jsx": "react-jsx",
     "allowJs": true
   },
-  "files": ["src/index.ts"]
+  "files": ["src/index.tsx"]
 }

webpack.config.js のエントリパスも修正する。

 const config = {
-  entry: "./src/index.ts",
+  entry: "./src/index.tsx",
   output: {

これで準備は完了なので、ビルドと実行する。

$npm run build
$npm run serve