react+typescript 编写一个简单的hello world

开发环境配置

利用create-react-app脚手架创建一个支持typescript语法的项目

create-react-app官方文档地址：

https://create-react-app.bootcss.com/docs/getting-started

1. 执行安装命令

npx create-react-app my-app --template typescript

注：最新的版本的npm需要加上–template

npx是在安装npm5.2.0+时自动安装的

简单了解了一下：npx 会自动查找当前依赖包中的可执行文件，如果找不到，就会去 PATH 里找。如果依然找不到，就会帮你安装

2. 直接启动本地服务

npm run start

3. 运行效果如下：

编写第一个hello world组件

1. 在src下面新建一个components–>Hello.tsx文件

import React from "react";

//定义传入的属性接口
interface IHelloProps{
    message?:string //传入的message必须为string类型,?号表示非必传
}

// const Hello = (props:IHelloProps) =>{
// const Hello :React.FunctionComponent<IHelloProps> = (props) =>{
const Hello :React.FC<IHelloProps> = (props) =>{ 
    return (
        <h2>{props.message}</h2>
    )
}

//设置默认参数
Hello.defaultProps={
    message:'hello world'
}
export default Hello;

2.在app.tsx文件中引入组件

4. 运行效果：

PS:
react组件可以定义为函数式组件React.FC或者class组件（继承自React.Component）

本例中的Hello就是函数式组件，函数式组件中不可以使用setState，只能使用useState()、useEffect等hooks api。

查看React.FunctionComponent源码：

可以发现React.FC是React.FunctionComponent的简写。

Hello添加默认值时可以利用react.FC的静态属性defaultProps

源码地址：https://gitee.com/jlzhanglong/hooks.git