【学习打卡】第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

  组件化

  • 一个项目由独立的组件自由组合搭建完成

2. 利用create-react-app脚手架搭建robot入门项目

   npx create-react-app robot --template typescript
   

3. 为什么使用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)
     

4. CSS module

   import style from '/App.css'
   

   配置TS识别css文件

   declare module '*.css' {
     const css: {[key: string]:string}
   }
   

   将css重名为.module.css

5. 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
   

6. 基于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 :src="`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;
   

7. 截图