随笔分类 - 前端
摘要：前言 本文继续上一篇的内容。要实现：点击菜单框以外的其他区域，就会收起列表。 事件 那么问题来了，怎么知道点击的区域是不是菜单框以外的区域？ 我想你已经知道，当点击一个元素时会触发这个元素所绑定的点击事件。 const btn = document.getElementById("btn"); bt
阅读全文
摘要：前言 本文将通过用 React 18 造一个菜单框，来了解 React 中一些常用的功能。菜单框效果如下： 当我们点击红色的按钮，会出现一个菜单栏，再次点击按钮、或菜单栏中的某一项、或菜单框以外的其他区域，就会收起菜单栏。 如果您已经知道如何实现这个组件，那么已经可以关掉本文了。 在本文中，我会用最
阅读全文
摘要：前言 在开始本文之前，我假设你已经懂了什么是 npm、ts、且有了少许的 React 开发经验。那么在本文中，你将学到怎么将自己开发的 React 组件打包，发布到 npm 上，并在别的项目中下载引用。 先介绍打包工具 rollup 如果你有读过我的上一篇文章：如何使用 Webpack 打包 Rea
阅读全文
摘要：前言 我们常用使用 create-react-app 新建 React 项目，它帮我们配置好了开箱即用的 Webpack 配置。但是如果我们要重头搭建一个使用 Webpack 打包的 React 项目，就必须要学习 Webpack 的用法了。 在本文中，你会了解到： Webpack 是什么 从开发到
阅读全文
摘要：单线程 Javascript 是单线程的，意味着不会有其他线程来竞争。为什么是单线程呢？ 假设 Javascript 是多线程的，有两个线程，分别对同一个元素进行操作： function changeValue() { const e = document.getElementById("ele1"
阅读全文
摘要：前言 我想大部分人的前端测试，都是运行项目，直接在浏览器上操作，看看功能正不正常。虽然明明有测试库可以使用，但是因为“要快”的原因，让好好做测试变成了一件影响效率的事。 因为这种无奈的原因而放弃测试，实在是很可惜。这种原因也并不能够说明测试没有必要，测试仍然是需要重视的东西。 我将简单介绍如何在 R
阅读全文
摘要：前言 一个前后端分离的项目，前端人员需要对接后端的接口。如果在后端的接口没有开发好，或者没有测试版可以对接的情况下，前端人员也不能坐等后端接口写好后再开始开发。 一个项目的，理想情况下接口的规范应该是前后端人员在开发之前就已经协商好的，如请求内容，返回内容等。在后端接口还不能供前端人员使用的时候，前
阅读全文
摘要：前言 虽然我们简单感受了一下 useState 的用法，但我想你还是对 React 里的 hook 迷迷糊糊的。本文我们将明确下 React 的概念。 HOOK 🐕 前生今世 在我示例中，写的 React 组件都是函数的形式： // 组件 function Component() { return
阅读全文
摘要：前言 在上一章 React 简单教程-3-样式 中我们建立了一个子组件，并稍微美化了一下。在另一篇文章 React 简单教程-3.1-样式之使用 tailwindcss 章我们使用了 tailwind 来写样式，以后我代码里的样式都会使用 tailwind 来写。 这一章，我将给我们的子组件加一个按
阅读全文
摘要：前言 本文是作为一个额外内容，主要介绍 tailwindcss 的用法 tailwindcss 是一个功能类优先的 CSS 框架，我在以前的文章里有描述为什么使用功能类优先：为什么我在 css 里使用功能类优先 在上一章中我们的 react 组件有了一个简单的样式，在这一篇我们将使用 tailwin
阅读全文
摘要：前言 在上一章 React 简单教程-2-ts 和组件参数 中我们新建的子组件 Displayer 没有样式，显得平平无奇，这一篇我们将给他美化一下。 CSS 文件 一般的做法，是在你的组件级目录下新建一个和组件同名的 CSS 文件。如，我们的组件是 displayer.tsx，我们就在同级目录下新
阅读全文
摘要：前言 在上一章：React 简单教程-1-组件 我们知道了 React 的组件是什么，长什么样，用 js 和 HTML 小小体验了一下组件。在这一章，我们将使用 typescript（简称 ts） 来代替 js，这种语法的文件名后缀是 tsx。 我强烈建议使用 ts 来开发 React，要说 ts
阅读全文
摘要：前言 React，Facebook开发的前端框架。当时Facebook对市面上的前端框架都不满意，于是自己捣鼓出了React，使用后觉得特别好用，于是就在2013年开源了。 我也用React开发了一个简单的博客： Dvorak Chen的博客 在原生的HTML中，是不存在组件化的，为了开发便利，人们
阅读全文
摘要：前言 我想在我们开始的学CSS语法的时候，都是从以下的流程开始的： 1、写一个CSS类选择器： .my-class { } 2、往选择器里填充CSS语法： .my-class { display flex; flex-direction row } 3、在 HTML的 class 属性中写上选择器名
阅读全文
