Web开发基础 2024.7.20

南大课程笔记 Web

字数统计: 542阅读时长: 2 min

 2024/07/27 

Web前端开发技术

前端技术栈
- HTML DOM
- JavaScript基本语法、函数
- CSS样式及样式库
npm node package manage
前端组件库react

一个前端项目包含的内容

xxx.html
xxx.css
xxx.js
…

虽然这些文件可以被浏览器直接执行,但效率低下
需要进行分装,即npm

npm分装

package.json npm具体执行时的入口,和C的main函数类比
- json:有key和value的一种数据结构
- 管理需要的依赖项
  - dependencies 生产依赖
  - devDependencies 开发依赖
- 项目的名称,版本,描述

借助Vite + ReactJS 快速搭建一个前端代码库

只有一个html文件 单页面模式
.jsx JavaScriptXML
App.jsx 把部分代码提取出来并封装
- 在网站中不同的部分封装在一起,分治思想
- App是一个React Component 也是一个JavaScript Function

在React Component中如何调用JavaScript函数

1	<button onClick={() => {setCount((count) => count+1)}}>

App.jsx中返回值最外层是空标签 因为只能有一个根节点
1
2
3
4
5
6
<>
<div>
</div>
<h1>
</h1>
</>

Component是React App的基本单元

JavaScript 数据模型嵌入 Component

1	<h1>{user.name}</h1>

可以给React Component传参吗

可以

<div>
  <h1>Greetings</h1>
  <Hello name='George'/>
</div>

约定传入的参数均通过props进行获取props.name,pros.age

React State

状态可以理解为一个组件在用户操作时所表现的效果
button分为未点击状态和点击状态
useState函数允许我们去注册状态
count为对状态的引用
setCount为对状态的改变
const [count, setCount] = useState(0)

Events Handing

用户对React Component的操作,以事件的形式抛出=>signal
React事件上注册事件处理函数=>signal监听函数 + 处理

调用声明好的函数进行处理
声明匿名函数进行处理

Events Handler本质上也是一个JavaScript Function

Re-Rendering

React Component状态的变更,将触发组件的重绘
要控制好状态的管理,否则重绘次数会非常多,导致用户体验下降

样式组件库Tailwind CSS

原文作者：dong-frank

原文链接：http://dong-frank.github.io/2024/07/27/Web%E5%BC%80%E5%8F%91%E5%9F%BA%E7%A1%80-2024-7-20/

发表日期：July 27th 2024, 5:27:31 pm

更新日期：July 27th 2024, 5:27:46 pm

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

Next Post

Web开发基础 2024.7.21
Previous Post

Web开发基础 2024.7.19

CATALOG

1. Web前端开发技术