超簡單的react和typescript專案搭建流程
阿新 • • 發佈:2018-12-08
1、首先我們先建立一個react專案,react官網也有react專案搭建的命令
npx create-react-app my-app
cd my-app
2、安裝我們專案需要的樣式依賴,這個專案理我用的是styled-components
yarn add styled-components
3、安裝typescript的依賴命令
yarn add typescript @types/node @types/react @types/react-dom @types/jest
4、初始化typescript
tsc --init
5、將src裡面的檔案刪除只剩index.js,並將App.js改為App.tsx
index.js程式碼如下:
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(<App />, document.getElementById('root'));
6、在App.tsx裡面寫一些簡單的ts程式碼就可以run了
import React, { Component } from 'react'; interface Props { } interface State { list: string, } class App extends Component<Props, State> { constructor(props: Props) { super(props) this.state = { list: 'hello world!!!' } } render() { return ( <div> {this.state.list} </div> ); } } export default App;
7、執行專案執行命令: yarn start