[React][TypeScript] Hello World的なもの(2022年1月版)(^^;)(3) 静的なページとReact使った別ページを追加してみる。
[React][TypeScript] Hello World的なもの(2022年1月版)(^^;)(2) Firefoxでデバッグしてみる。に静的なページとReactを使った動的なページ(動的と言っても実際に追加するのはReact使ってるけど全然動的ではない)を追加してみる。
続きを読む-->
[React][TypeScript] Hello World的なもの(2022年1月版)(^^;)(2) Firefoxでデバッグしてみる。に静的なページとReactを使った動的なページ(動的と言っても実際に追加するのはReact使ってるけど全然動的ではない)を追加してみる。
続きを読む[React][TypeScript] Hello World的なもの(2022年1月版)(^^;) ではChromeを使ってデバッグする方法を最後に書いたけど、今回はFireFoxを使う方法を書く。ChromeOSのLinux開発環境でChromeを使ってデバッグができなかったんで試してみた感じだ。
続きを読む[React][TypeScript] Hello World的なもの(1)(更新!)が古くなってたので更新した。
次のページを参考にして構築してみた。(抜けてたらスマン)
(更新!!)
webpack4にあわせて変更。
-------
最初、webpackを使わずに試してみようと思ったが面倒くさくなってきたので、最新版で学ぶwebpack 4入門を参考にビルド環境を用意した。
こっちにもざっくりと準備することを書いておく。
npm init -y
でpackage.jsonを用意する。
npm install webpack webpack-cli -D
でモジュールのインストールする。
package.jsonのscriptsのところを
"scripts": {
"build": "webpack --mode development",
"build:prod": "webpack --mode production"
},
に変更する。
これで
npm run build
とすると、とりあえずsrc/index.jsとindex.js内でimportしているモジュールをまとめてdist/main.jsを作ってくれる。
webpackのオプションに--mode developmentを指定すると、開発用のソースマップ有効のjsファイルが作られて、--mode productionで公開用の圧縮(?)されたjsが作られる。
次にtypescriptを使えるようにする。
まずは、モジュールのインストール。
npm install typescript ts-loader -D
tsc --init
でtsconfig.jsonを作る。
tsconfig.jsonのcompilerOptionに次のオプションを変更or追加する。
"sourceMap": true,
"target": "es5",
"module": "es2015"
webpackの設定ファイル(webpack.config.js)を用意する。
module.exports = {
entry: "./src/index.ts",
output: {
path:`${__dirname}/dist`,
filename: "main.js"
},
module: {
rules: [
{
// 拡張子 .ts の場合
test: /\.ts$/,
// TypeScript をコンパイルする
use: "ts-loader"
}
]
},
// import 文で .ts ファイルを解決するため
resolve: {
extensions: [
".ts"
]
}
};
src/index.tsとindex.ts内でimportしているモジュールをjsにコンパイルしたて、まとめてdist/main.jsを作ってくれる。
次にReactを使えるようにする。
Reactのモジュールをインストール。
npm install react react-dom @types/react @types/react-dom -S
tsconfig.jsonに次の項目を追加or変更する。
"jsx": "react",
"moduleResolution": "node",
"lib": [
"es2017",
"dom"
]
ReactのサイトにあるHello Worldみたいなもののindex.htmlとsrc/index.tsxを用意する。
index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="root"></div>
<script src="dist/app.js"></script>
</body>
</html>
src/index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello world!</h1>,
document.getElementById('root')
);
webpackの設定ファイル(webpack.config.js)を変更する。まるっと、上げておく。
module.exports = {
entry: "./src/index.tsx",
output: {
path:`${__dirname}/dist`,
filename: "app.js"
},
module: {
rules: [
{
// 拡張子 .tsもしくは.tsx の場合
test: /\.tsx?$/,
// TypeScript をコンパイルする
use: "ts-loader"
}
]
},
// import 文で .ts ファイルを解決するため
resolve: {
extensions: [
".ts", ".tsx", ".js", ".json"
]
}
};
npm run build
でビルド、index.htmlをブラウザで開けば、Hello world!って表示される。
ソースをダウンロードできるようにしといた。
(追記 2018/3/22)
package.jsonのscriptsにbuild:prodを追加した。
[React][TypeScript] Hello World的なもの(1)は、動きもなくてつまらないので、他でも作ってるボタンを押したら「こんにちは!」って表示するやつを作ってみた。
コンポーネントにする必要なさそうなんだけど、「ボタンをおして!」を表示しているコンポーネントを作る。(Label.tsx)
import * as React from 'react';
export interface LabelProps {
text:string;
}
// ラベルのコンポーネント
export class Label extends React.Component<LabelProps, {}> {
render() {
return <span>{this.props.text}</span>;
}
}
React.Componentを継承してLabelコンポーネントを作る。React.Componentのテンプレートで指定する1番目の型がpopsの型で2番目の型がstateの型になる。
ボタンとラベルコンポーネントがあるルートになるAppコンポーネントを作る。(App.tsx)
import * as React from 'react';
import { Label } from "./Label";
interface AppState {
message:string;
}
export class App extends React.Component<{}, AppState> {
constructor(props:any) {
super(props);
this.state = {
message:"ボタンを押して!"
};
this.onClick = this.onClick.bind(this);
}
// ボタンを押した時の処理
onClick(e:any) {
this.setState({message:"こんにちは!"});
}
render() {
return <div>
<p><Label text={this.state.message} /></p>
<p><button type="button" onClick={this.onClick}>Button</button></p>
</div>;
}
}
ボタンを押した時の処理でthis.setStateをして表示するメッセージを更新している。
これを表示するhtmlファイルを作る。(index.html)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="root"></div>
<script src="dist/app.js"></script>
</body>
</html>
htmlのrootにAppを割り当てるところを用いする。(index.tsx)
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { App } from "./App";
ReactDOM.render(
<App />,
document.getElementById('root')
);
ソース以外のビルド環境は[React][TypeScript] Hello World的なもの(1)で作ったのを使う。
(追記)
ソースを置いといた。