当前位置: 首页 > news >正文

React+TypeScript入门

本文面向读者:具有一定的javascript基础的开发人员

参考资料如下:

1.关于初始化环境配置请参见这位大佬的文章

2.React中文文档

相关文章
React+TypeScript入门
TypeScript+React入门-----引入css
React+TypeScript入门-----BrowserRouter
Q:什么是TypeScript?
A:TypeScript是JavaScript的超集,它可以编译成纯JavaScript.

Q:为什要使用TypeScript?
A:TypeScript有很多好处,说都说不完哈哈哈哈哈哈哈....

Q:TypeScript是如何调用React.js的?
A:TypeScript是通过react.d.ts声明文件媒介来调用React.js的,
在TypeScript中如果要调用.js模块,需要对应的.d.ts才可以
以下是关于使用TypeScript的入门介绍了
首先根据参考文章配置好一个简单的开发环境,配置完成之后文件目录结构如下
图片描述

首先我们写一个简单的示例

import * as React from 'react';
import * as ReactDOM from 'react-dom';
class Demo {
    name:string = "";
    constructor(){
        this.name = "Hello World";
    }
}
const render = () => {

    ReactDOM.render(
        <div>           
            {new Demo().name}
        </div>,
        document.querySelector('#app')
    )
}
render(); 

打开浏览器localhost:8080就可以看到Hello World了

接下来创建一个不带任何参数和状态的组件User

class User extends React.Component{
    render(){
        return <div>我是User组件</div>
    };
}

const render = () => {
    ReactDOM.render(
        <div>           
            {new Demo().name}
            <User />
        </div>,
        document.querySelector('#app')
    )
}

只需要很简单的几行代码就可以搞定

接下给组件添加传递props,和JavaScript不同的是,现在需要通过参数的形式显示传递props,组件才可以获取到。state也是如此
User继承自React.Component,React.Component是个泛型,接收三个参数P={},S={},SS=any,其中P代表props,S代表state,
SS我还没有搞清楚什么意思

interface UserState{
    createTime:Date
}
interface UserProp{
    name:string
}
class User extends React.Component<UserProp,UserState>{
    constructor(props:UserProp){
        super(props);
        this.state = {createTime: new Date()};        
    }
    render(){
        return <div>
                <p>我是User组件</p>
                <p>我的名字是{this.props.name}</p>
                <p>我的创建时间是{this.state.createTime.toString()}</p>                                
               </div>   
    };
}

const render = () => {
    ReactDOM.render(
        <div>           
            {new Demo().name}
            <User name="李雷"/>
            <User name="韩梅梅"/>
        </div>,
        document.querySelector('#app')
    )
}

如果你使用的是vscode,可以将鼠标移到React.Component上就会看到
图片描述

入门就写先到这里吧

相关文章:

  • MySql行转列、列转行
  • @ModelAttribute注解使用
  • docker容器内的网络抓包
  • 【linux】linux重启tomcat + 实时查看tomcat启动日志
  • JavaScript基础——基本概念
  • 一步一步教你用 Vue.js + Vuex 制作专门收藏微信公众号的 app
  • 【MySQL经典案例分析】 Waiting for table metadata lock
  • Innodb之全局共享内存
  • sql 开窗函数
  • 我的友情链接
  • 实现菜单下拉伸展折叠效果demo
  • Android中的树状(tree)列表
  • 基于MVC思想实现一个简单的贪吃蛇小游戏
  • Device Tree Usage 【转】
  • 从容器到云原生 – 极致弹性
  • 230. Kth Smallest Element in a BST
  • bearychat的java client
  • Javascripit类型转换比较那点事儿,双等号(==)
  • java第三方包学习之lombok
  • spring boot下thymeleaf全局静态变量配置
  • vue自定义指令实现v-tap插件
  • 阿里云ubuntu14.04 Nginx反向代理Nodejs
  • 前端面试题总结
  • 区块链分支循环
  • 问:在指定的JSON数据中(最外层是数组)根据指定条件拿到匹配到的结果
  • 浅谈sql中的in与not in,exists与not exists的区别
  • ​什么是bug?bug的源头在哪里?
  • ${ }的特别功能
  • (4)事件处理——(7)简单事件(Simple events)
  • (Pytorch框架)神经网络输出维度调试,做出我们自己的网络来!!(详细教程~)
  • (react踩过的坑)antd 如何同时获取一个select 的value和 label值
  • (solr系列:一)使用tomcat部署solr服务
  • (规划)24届春招和25届暑假实习路线准备规划
  • (十三)Maven插件解析运行机制
  • (续)使用Django搭建一个完整的项目(Centos7+Nginx)
  • (幽默漫画)有个程序员老公,是怎样的体验?
  • .htaccess配置重写url引擎
  • .Net Core webapi RestFul 统一接口数据返回格式
  • .net core 连接数据库,通过数据库生成Modell
  • .NET的数据绑定
  • .net中的Queue和Stack
  • 。Net下Windows服务程序开发疑惑
  • /usr/lib/mysql/plugin权限_给数据库增加密码策略遇到的权限问题
  • @Bean注解详解
  • @Data注解的作用
  • @RequestBody与@ModelAttribute
  • [Asp.net mvc]国际化
  • [autojs]autojs开关按钮的简单使用
  • [BUUCTF NewStarCTF 2023 公开赛道] week4 crypto/pwn
  • [C# WPF] DataGrid选中行或选中单元格的背景和字体颜色修改
  • [C# 基础知识系列]专题十六:Linq介绍
  • [C#]扩展方法
  • [COI2007] Sabor
  • [Leetcode] 寻找数组的中心索引
  • [Manacher]【学习笔记】