React+TS学习和使用

开启学习react+ts,本篇主要是用react创建项目和了解Function Component。

一、项目创建与准备

1、创建项目

创建名为 hook-ts 的项目:

npx create-react-app hook-ts --template typescript
cd hook-ts

# 通过vscode打开
code .
 

可以看到,整个项目的组件,都是使用tsx做后缀的,而普通的js文件,也使用的是ts作为后缀名。

注意:

1、在React中,以js为后缀名文件也可以作为组件使用,但在React+TS中,请慎用。最好区分开,ts代表js,tsx代表jsx。

2、js与jsx也可以在React+TS中使用,是兼容的,只是既然使用了ts,那就尽量使用ts和tsx代替它们。

2、项目初始化

先把 src 下所有的文件清空,并新建 index.tsApp.tsx

mac用户:

$ cd src
$ rm *
# 创建index.ts与App.tsx
$ touch index.ts App.tsx
# 返回根目录
$ cd ..
    

win用户手动删或执行 del * 可删除src下的文件,或者打开 git bash 也可操作以上命令。

3、App组件

任意给 App.tsx 写点内容:

import React from 'react'

const App = () => {
    return (
        <h2>hello  world</h2>
    )
}

export default App;
    

4、项目入口文件

index.ts 中:

import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(
    <App />,
    document.getElementById("root")
)

    

但是你会发现一直报错:

在这里插入图片描述

原因是ts文件会被解析为js,而React+TS的项目是不允许ts成为一个组件的,因此只需要将 index.ts 改为 index.tsx 即可。

5、项目运行

最后,项目根目录下运行:

npm run start
    

即可将项目运行。

二、Function Component

1、tsconfig

项目中如果每次都使用相对路径引入组件,就比较麻烦,这里推荐配置 tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",	// 配置ES语法
    "baseUrl": "./src",		// 配置基础路径
    "jsx": "preserve"		// 在preserve模式下生成的代码中会保留JSX以供后续的转换操作使用(如babel)
  }
}
    

修改以上这几项,其中jsx的配置解释:

模式输入输出输出文件扩展名
preserve<div /><div />.jsx
react<div />React.createElement("div").js

你可以通过在命令行里使用--jsx标记或 tsconfig.json 里的选项来指定模式。

具体配置文档:https://www.tslang.cn/docs (opens new window)

设置完成后重跑项目,此时引入组件的方式发生变更:

// 以前的引入方式:(使用相对路径)
import Comp from '../components/Comp'

// 现在的引入方式:(直接从components开始即可,当然,前提是components在src下)
import Comp from 'components/Comp'
    

2、函数式组件

src 下新建 components ,再在其中创建 Comp1.tsx

import React from 'react'

const Comp1: React.FC = function () {
    return (
        <>
            <h3>1</h3>
            <button>累加</button>
        </>
    )
}
export default Comp1;
    

然后在 App.tsx 中引入:

import React from 'react'
import Comp1 from 'components/Comp1'

const App: React.FC = () => {
    return (
        <>
            <h2>你好世界</h2>
            <Comp1 />
        </>
    )
}

export default App;

其实不写React.FC也可以。React.FC表示:React.Function Component。React.FC 显式地定义了返回类型,其他方式是隐式推导的。

  • 6
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

杨小凹

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值