超简单的react和typescript项目搭建流程

发布时间：2020-12-15 20:39:08 所属栏目：百科来源：网络整理

导读：1、首先我们先创建一个react项目，react官网也有react项目搭建的命令 npx create-react-app my- appcd my -app 2、安装我们项目需要的样式依赖，这个项目理我用的是styled-components yarn add styled-components 3、安装typescript的依赖命令 yarn add type

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?

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!