React/TypeScript
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
-[[2022年秋版 最新React/Typescript開発環境の作成:https:/...
-[[統率の取れた実装をするためのReactとTypeScriptのTips:ht...
-[[TypeScript再入門覚書 ① Atom環境構築編:http://qiita.com...
-[[TypeScript再入門覚書 ② npmとwebpackでプロジェクト作成:...
-[[TypeScript再入門覚書 ③ React & Redux:http://qiita.com/...
-[[Hello React and TypeScript:https://charleslbryant.gitb...
-[[React+TypeScriptもいいぞ:https://www.slideshare.net/mi...
-[[React + Redux + TypeScript でWebアプリを作った感想・勉...
-[[TypeScript1.6 + React 書いてみてハマったポイントとか:h...
-[[React JSX with TypeScript(1.6):http://qiita.com/Quramy...
-[[React & Webpack:https://www.typescriptlang.org/docs/ha...
-[[React + TypeScript + Webpackの最小構成:http://qiita.co...
-[[React + Redux + TypeScriptの最小構成:http://qiita.com/...
-[[React TypeScript webpack HMR 最小構成:http://qiita.com...
-[[React Native + TypeScript入門:http://qiita.com/uryyyyy...
-[[React & Webpack:http://js.studio-kingdom.com/typescrip...
-[[TypeScriptでReactを書く(1)：JSX:http://qiita.com/Keita...
-[[create-react-app で TypeScript の環境を作る:http://qii...
*開発手順 [#t7182421]
-プロジェクト作成（create-react-app使用）【推奨】
$ create-react-app --scripts-version=react-scripts-ts [...
$ cd [プロジェクト名]
$ npm start
$ rm -rf src/*
--create-react-app で --scripts-version=react-scripts-ts ...
-プロジェクト作成（昔のやり方？）
$ mkdir [プロジェクト名]
$ cd [プロジェクト名]
$ npm init
$ npm install --save react react-dom @types/react @types...
$ npm install --save-dev webpack webpack-dev-server
--実際のアプリケーションで使うモジュールは --save
--開発時のみ必要なモジュールは --save-dev
--[プロジェクトフォルダ]/package.json
:
"scripts": {
"build": "webpack --progress --colors",
"start": "webpack-dev-server"
},
:
--TypeScript関連パッケージのインストール
$ npm install --save-dev typescript awesome-typescript-l...
--[プロジェクトフォルダ]/tsconfig.json
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5",
"jsx": "react"
},
"include": [
"./src/**/*"
]
}
--[プロジェクトフォルダ]/webpack.config.js
module.exports = {
entry: "./src/index.tsx",
output: {
filename: "bundle.js",
path: __dirname + "/dist"
},
// webpackの出力をデバッグするためのsourcemapsを有効化
devtool: "source-map",
resolve: {
// 解決可能な拡張子に'.ts'と'.tsx'を追加
extensions: ["*", ".webpack.js", ".web.js", ".ts...
},
module: {
loaders: [
// '.ts'または'.tsx'の全てのファイルを、'awe...
{ test: /\.tsx?$/, loader: "awesome-typescri...
],
rules: [
{
test: /\.tsx$/,
exclude: /node_modules/,
loader: 'awesome-typescript-loader',
}
],
},
// インポートしたモジュールのパスが下記のいずれかに...
// それに相当するグローバル変数が存在するものとして...
// 依存性の全てを扱うことを避けることができるように...
// ビルド間でそれらのライブラリがキャッシュ可能にな...
externals: {
"react": "React",
"react-dom": "ReactDOM"
},
};
-src/index.js（アプリ本体が App.js の場合）... index.js ...
import React from 'react';
import { render } from 'react-dom';
import App from './App';
render(
(<App />),
document.getElementById('root')
);
-コンパイル・実行
$ npm run build
$ npm start
終了行:
-[[2022年秋版 最新React/Typescript開発環境の作成:https:/...
-[[統率の取れた実装をするためのReactとTypeScriptのTips:ht...
-[[TypeScript再入門覚書 ① Atom環境構築編:http://qiita.com...
-[[TypeScript再入門覚書 ② npmとwebpackでプロジェクト作成:...
-[[TypeScript再入門覚書 ③ React & Redux:http://qiita.com/...
-[[Hello React and TypeScript:https://charleslbryant.gitb...
-[[React+TypeScriptもいいぞ:https://www.slideshare.net/mi...
-[[React + Redux + TypeScript でWebアプリを作った感想・勉...
-[[TypeScript1.6 + React 書いてみてハマったポイントとか:h...
-[[React JSX with TypeScript(1.6):http://qiita.com/Quramy...
-[[React & Webpack:https://www.typescriptlang.org/docs/ha...
-[[React + TypeScript + Webpackの最小構成:http://qiita.co...
-[[React + Redux + TypeScriptの最小構成:http://qiita.com/...
-[[React TypeScript webpack HMR 最小構成:http://qiita.com...
-[[React Native + TypeScript入門:http://qiita.com/uryyyyy...
-[[React & Webpack:http://js.studio-kingdom.com/typescrip...
-[[TypeScriptでReactを書く(1)：JSX:http://qiita.com/Keita...
-[[create-react-app で TypeScript の環境を作る:http://qii...
*開発手順 [#t7182421]
-プロジェクト作成（create-react-app使用）【推奨】
$ create-react-app --scripts-version=react-scripts-ts [...
$ cd [プロジェクト名]
$ npm start
$ rm -rf src/*
--create-react-app で --scripts-version=react-scripts-ts ...
-プロジェクト作成（昔のやり方？）
$ mkdir [プロジェクト名]
$ cd [プロジェクト名]
$ npm init
$ npm install --save react react-dom @types/react @types...
$ npm install --save-dev webpack webpack-dev-server
--実際のアプリケーションで使うモジュールは --save
--開発時のみ必要なモジュールは --save-dev
--[プロジェクトフォルダ]/package.json
:
"scripts": {
"build": "webpack --progress --colors",
"start": "webpack-dev-server"
},
:
--TypeScript関連パッケージのインストール
$ npm install --save-dev typescript awesome-typescript-l...
--[プロジェクトフォルダ]/tsconfig.json
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5",
"jsx": "react"
},
"include": [
"./src/**/*"
]
}
--[プロジェクトフォルダ]/webpack.config.js
module.exports = {
entry: "./src/index.tsx",
output: {
filename: "bundle.js",
path: __dirname + "/dist"
},
// webpackの出力をデバッグするためのsourcemapsを有効化
devtool: "source-map",
resolve: {
// 解決可能な拡張子に'.ts'と'.tsx'を追加
extensions: ["*", ".webpack.js", ".web.js", ".ts...
},
module: {
loaders: [
// '.ts'または'.tsx'の全てのファイルを、'awe...
{ test: /\.tsx?$/, loader: "awesome-typescri...
],
rules: [
{
test: /\.tsx$/,
exclude: /node_modules/,
loader: 'awesome-typescript-loader',
}
],
},
// インポートしたモジュールのパスが下記のいずれかに...
// それに相当するグローバル変数が存在するものとして...
// 依存性の全てを扱うことを避けることができるように...
// ビルド間でそれらのライブラリがキャッシュ可能にな...
externals: {
"react": "React",
"react-dom": "ReactDOM"
},
};
-src/index.js（アプリ本体が App.js の場合）... index.js ...
import React from 'react';
import { render } from 'react-dom';
import App from './App';
render(
(<App />),
document.getElementById('root')
);
-コンパイル・実行
$ npm run build
$ npm start
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
