1. 程式人生 > >超簡單的react和typescript專案搭建流程

超簡單的react和typescript專案搭建流程

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