React

React 1. 创建React+TS的项目

1. npm install -g create-react-app
2. create-react-app my-app --template typescript

2. 安装扩展程序：

1. Chinese
2. ES7
3. TypeScript Importer

3. 目录结构：src

4. 组件声明和使用：

 Code:

// 声明：
import { render } from '@testing-library/react';
import React from 'react';
export default class Hello extends React.Component{
    //构造函数
    public constructor (props:any){
        super(props);
    }
    render(){
        return(
            <div>hello</div>
        )
    }
}

//使用
import Hello from './components/Hello';

function App() {
  return (
    <div className="App">
      hello world
      <Hello/>
    </div>
   
  );
}

export default App;

5. 数据传递： 先定义接口和数据类型=》使用

import { render } from '@testing-library/react';
import React from 'react';

interface Iprops{
    title:string,
    age:number,
    work?:string //可选参数
}

export default class Hello extends React.Component<Iprops>{
    //构造函数
    public constructor (props:any){
        super(props);
    }
    render(){
        const{title,age}=this.props;
        return(
            <div>hello:{this.props.title}{this.props.age}
            <div>hello:{title}{age}</div>
            </div>
            
        )
    }
}

传参：

import React from 'react';
import logo from './logo.svg';
import Hello from './components/Hello';

function App() {
  return (
    <div className="App">
      hello world
      <Hello title='测试标题' age={20}/>
    </div>
   
  );
}
export default App;