isTKS™program,React ≫ React + TypeScript + WebPack の最小構成でインストールからHelloWorldまで

React + TypeScript + WebPack の最小構成でインストールからHelloWorldまで

2019.10.24

React + TypeScript + WebPack の最小構成でインストールからHelloWorldまでをメモ。

1. ビルドまでの最小構成の基本形
(npmがなければnpm自体をinstallしておく)

$ mkdir -p ~/xxx/your_work_directory
$ cd ~/xxx/your_work_directory

$ npm init
$ npm install --save react react-dom
$ npm install --save-dev @types/react @types/react-dom webpack webpack-cli typescript ts-loader

$ vi package.json
(追記する)
"scripts": {
  "build": "webpack"
}

$ mkdir src
$ touch src/index.tsx

$ touch tsconfig.json webpack.config.js
$ vi webpack.config.js
module.exports = {
  mode: "development",
  entry: "./src/index.tsx",
  output: {
    path: `${__dirname}/dist`,
    filename: "main.js"
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader"
      }
    ]
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".json"]
  }
};

$ vi tsconfig.json
{
  "compilerOptions": {
    "jsx": "react"
  }
}

$ npm run build

以上で、dist/main.jsが生成されていればビルド成功。

2. 次に、HelloWorldまで(Reactなし)

$ npm install webpack-dev-server --save-dev

$ vi webpack.config.json
(scriptsのところに追記)
"scripts": {
  "start": "webpack-dev-server",
  "build": "webpack"
}

$ vi src/main.tsx
alert('hello world')

$ vi index.html
<script src="./dist/main.js"></script>

$ npm run build
$ npm start

http://localhost:8080
を見てhello worldが確認できればOK

3. 次にReact最小構成での動作

$ vi index.html
<div id="root"></div>
<script src="./dist/main.js"></script>

$ vi src/index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Sub } from './sub';

class Index extends React.Component {
  render() {
    return (
        <div>
          <h1>Hello World React</h1>
          <Sub name="Count up"/>
        </div>
    );
  }
}

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

$ vi src/sub.tsx
import * as React from 'react';

interface IProps {
  name: string;
}

interface IState {
  count: number;
}

export class Sub extends React.Component<IProps, IState> {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  handleClick() {
    this.setState({
      count: this.state.count + 1,
    });
  }

  render() {
    return (
      <div>
        <h2>{this.props.name}</h2>
        <div>{this.state.count}</div>
        <button onClick={this.handleClick.bind(this)}>Add +1</button>
      </div>
    );
  }
}

$ npm run build
$ npm start

以上で、http://localhost:8080
でブラウザ確認できる

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