课程名称:[React 17/18 系统精讲 结合TS打造旅游电商平台]
课程章节: 概念理解/配置React的CSS模组/创建class类组件
主讲老师:阿莱克斯
React的设计理念
单向渲染
利用create-react-app脚手架搭建robot入门项目
npx create-react-app robot --template typescript
为什么使用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)
CSS module
import style from '/App.css'
declare module '*.css' { const css: {[key: string]:string} }
css in js 理念
import '/index.css' <div className='app' />
import style from './index.css' <div className={style.app} />
npm install typescript-plugin-css-modules --save-dev
基于Vue改写DEMO
<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;
截图