Javascript

【学习打卡】第2天 理解React概念

本文主要是介绍【学习打卡】第2天 理解React概念,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

学习打卡】第2天 理解React概念

课程名称:[React 17/18 系统精讲 结合TS打造旅游电商平台]

课程章节: 概念理解/配置React的CSS模组/创建class类组件

主讲老师:阿莱克斯

课程内容:

  1. 简述React的前世今生
  2. 初识React函数式组件
  3. 配置React的CSS模组
  4. 学习React类组件

课程收获:

  1. React的设计理念

    单向数据流
    • 数据与界面绑定
  • 单向渲染

    • 类似函数 同输入 同输出
    虚拟DOM
    • state change => compute diff => render
    • ast
    组件化
    • 一个项目由独立的组件自由组合搭建完成
  1. 利用create-react-app脚手架搭建robot入门项目

    npx create-react-app robot --template typescript
    
  2. 为什么使用JSX

    • React并不强制使用JSX

    • React认为视图的本质就是渲染逻与UI视图的统一

    • React将HTML与渲染逻辑进行了耦合,形成了JSX

    • 使用小驼峰进行命名

    • 自定义属性,以data-开头

    • const element = <div data-abc={'abc'}></div>
      
    • JSX中嵌入表达式

      const name = 'hello'
      const element = <h1>{hello}</h1>
      ReactDOM.render(element)
      
  3. CSS module

    import style from '/App.css'
    
    配置TS识别css文件
    declare module '*.css' {
      const css: {[key: string]:string}
    }
    
    将css重名为.module.css
  4. css in js 理念

    传统方式 直接引入整个css
    import '/index.css' <div className='app' />
    
    JSS模块化
    import style from './index.css'
    <div className={style.app} />
    
    使用插件助力JSS提示
    npm install typescript-plugin-css-modules --save-dev
    
  5. 基于Vue改写DEMO

    vue
    <script setup lang="ts">
    import robots from '@/mock/robots.json'
    import { ref } from 'vue'
    interface robotProps {
      id: number;
      name: string;
      email: string;
    }
    const robotsRef = ref<robotProps[]>(robots)
    </script>
    <template>
      <ul v-for="(item, index) in robotsRef" :key="index">
        <li>
          <img :class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="`https://robohash.org/${item.id}`" alt="robot">
          <h2>{{item.name}}</h2>
          <p>{{item.email}}</p>
        </li>
      </ul>
    </template>
    <style scoped></style>
    

    react

    import React from "react";
    interface robotProps {
      id: number;
      name: string;
      email: string;
    }
    // FC: functional component 函数式组件
    const robot: React.FC<robotProps> = ({ id, name, email }) => {
      return (
        <li>
          <img alt="robot" src={`https://robohash.org/${id}`} />
          <h2>{name}</h2>
          <p>{email}</p>
        </li>
      );
    };
    export default robot;
    
  6. 截图
    图片描述

这篇关于【学习打卡】第2天 理解React概念的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!