前言
使用 typescript 開發 react 專案，推薦使用visual studio code編輯器。
① 建立專案工程
mkdir projectcdprojectyarn init
② 安裝依賴包
安裝 react 框架
yarn add react react-dom
安裝 react 型別庫 (幫助 typescript 識別 react 庫中定義的型別)
yarn add --dev@types/react@types/react-dom
安裝 typescript 和 ts-loader
yarn add --dev typescript ts-loader
安裝 webpack
yarn add --dev webpack webpack-cli webpack-dev-server webpack-merge
安裝 webpack 外掛程式
yarn add --devsource-map-loader html-webpack-plugin clean-webpack-plugin uglifyjs-webpack-plugin
③ 配置 webpack
定義配置中所需要用到的檔案路徑
./config/paths.js
定義公用的 webpack 配置
./config/webpack/webpack.config.common.js
定義 development 環境 webpack 配置
./config/webpack/webpack.config.dev.js
定義 production 環境 webpack 配置
./config/webpack/webpack.config.prod.js
④ 配置 tsconfig
./tsconfig.json
,"exclude": ["node_modules","build"]}
allowsyntheticdefaultimports: 允許合成預設匯出
import*asreactfrom'react'=>importreactfrom'react'
⑤ 建立入口檔案
./public/index.html
./src/index.tsx
importreactfrom'react'importreactdomfrom'react-dom'reactdom.render(
hello react
,document.getelementbyid('root'),)
⑥ 配置 package 啟動指令碼
./package.json
, ...}
⑦ 驗收成果
基於 typescript 的 react 基礎框架就搭建好啦！
執行下面的命令，就可以在瀏覽器裡看到 「hello react」 歡迎頁啦。
yarn start
執行下面的命令，就可以在 build 目錄中看到編譯好的「產品環境」檔案啦。
yarn build
WebStorm開發TypeScript的設定
webstorm ide可以開發typescript，同時支援自動編譯成js檔案，下面我們來進行一些簡單的配置。3.使用node的npm命令安裝typescript編譯器 npm install typescript g安裝好，在命令列可以檢視編譯器的版本 tsc version4.開啟websto...
react開發教程（十）redux結合react
redux 和 react 之間沒有關係。redux 可以搭配 react angular 甚至純 js。但是 redux 還是比較適合和 react 搭配的，因為 react 允許你以 state 的形式來描述介面，而 redux 非常擅長控制 state 的變化。redux 和 react 的結...
while read line無法迴圈read檔案
while read line 與for迴圈的區別 例子 要從乙個ip列表中獲取ip port，然後ssh ip 到目標機器進行特定的command操作 ssh o stricthostkeychecking no p22 ip ls la data ip列表 115.159.93 1 22 115...