https://github.com/maechabin/typescript-react-demo

A simple sample of React in TypeScript
https://github.com/maechabin/typescript-react-demo

react sample typescript webpack

Last synced: about 1 year ago
JSON representation

A simple sample of React in TypeScript

• Host: GitHub
• URL: https://github.com/maechabin/typescript-react-demo
• Owner: maechabin
• Created: 2017-05-16T16:21:42.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2018-10-06T03:47:10.000Z (over 7 years ago)
• Last Synced: 2025-04-01T06:14:46.992Z (about 1 year ago)
• Topics: react, sample, typescript, webpack
• Language: TypeScript
• Homepage: https://mae.chab.in/archives/59782
• Size: 307 KB
• Stars: 5
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# TypeScript-React-Demo

TypeScript で書いた React のデモ

## Demo

テキストフォームに入力した名前を表示する Hello World。

https://maechabin.github.io/typescript-react-demo/

## Demo のソースコード

- [src/Hello.tsx](https://github.com/maechabin/typescript-react-demo/blob/master/src/Hello.tsx)

- [index.html](https://github.com/maechabin/typescript-react-demo/blob/master/index.html)

## Demo の確認

### 1. Demo のダウンロード（clone）

```

$ git clone git@github.com:maechabin/typescript-react-demo.git typescript-react-demo

```

### 2. Demo を clone したディレクトリに移動して、必要なパッケージのインストール

```

$ cd typescript-react-demo

$ npm install

```

### 3. Demo を開く

```

$ open ./index.html

```

## Demo の修正 => webpack でビルド

### 1. 「.src/Hello.tsx」を修正したら、以下のコマンドを実行

```

$ npm run build

```

#### ファイルを監視して webpack をビルドする場合

```

$ npm run watch

```

#### HMR を使用する場合

```

$ npm run server

```

http://localhost:8080で確認

### 2. Demo を開く

```

$ open ./index.html

```