【React简单教程-1-组件】的更多相关文章

React简单教程-2-ts和组件参数

前言 在上一章:React 简单教程-1-组件 我们知道了 React 的组件是什么,长什么样,用 js 和 HTML 小小体验了一下组件.在这一章,我们将使用 typescript(简称 ts) 来代替 js,这种语法的文件名后缀是 tsx. 我强烈建议使用 ts 来开发 React,要说 ts 比 js 好在哪里?这么说,js 唯一不好的地方就是它只能用 js 来写. 如果你不会 ts,那么你可以稍微地学习一下,官网:typescript,能够看懂一些基本语法就可以了,我们会在编写代码的过程…

React简单教程-6-单元测试

前言 我想大部分人的前端测试,都是运行项目,直接在浏览器上操作,看看功能正不正常.虽然明明有测试库可以使用,但是因为"要快"的原因,让好好做测试变成了一件影响效率的事. 因为这种无奈的原因而放弃测试,实在是很可惜.这种原因也并不能够说明测试没有必要,测试仍然是需要重视的东西. 我将简单介绍如何在 React 中进行单测.本文中使用的代码仍然是通过 vite 创建的 React-ts 项目,所以可能不适用于其他的项目. 我们需要什么东西? 我们需要安装几个包,很烦.每个包的功能当然是不一…

React简单教程-4-事件和hook

前言 在上一章 React 简单教程-3-样式 中我们建立了一个子组件,并稍微美化了一下.在另一篇文章 React 简单教程-3.1-样式之使用 tailwindcss 章我们使用了 tailwind 来写样式,以后我代码里的样式都会使用 tailwind 来写. 这一章,我将给我们的子组件加一个按钮,以实现交互的功能. 什么功能? 我们现在的子组件如下图: 现在它没有交互功能,我想给他的灰色按钮加一个点击事件,点击后将内容收起,如下: 实现 首先,我们的灰色按钮,现在只是一个 span 元素,…

React简单教程-3-样式

前言 在上一章 React 简单教程-2-ts 和组件参数 中我们新建的子组件 Displayer 没有样式,显得平平无奇,这一篇我们将给他美化一下. CSS 文件 一般的做法,是在你的组件级目录下新建一个和组件同名的 CSS 文件.如,我们的组件是 displayer.tsx,我们就在同级目录下新建一个 displayer.css,然后在组件 Displayer 中直接引入这个文件: // 引入 import "./displayer.css"; export function Di…

React简单教程-4.1-hook

前言 虽然我们简单感受了一下 useState 的用法,但我想你还是对 React 里的 hook 迷迷糊糊的.本文我们将明确下 React 的概念. HOOK 前生今世 在我示例中,写的 React 组件都是函数的形式: // 组件 function Component() { return <div></div>; } 使用这种写法的组件,叫做函数组件.然而,React 的组件一开始并不是这种写法的,而是如下的写法: class Welcome extends React.Co…

React简单教程-1-组件

前言 React,Facebook开发的前端框架.当时Facebook对市面上的前端框架都不满意,于是自己捣鼓出了React,使用后觉得特别好用,于是就在2013年开源了. 我也用React开发了一个简单的博客: Dvorak Chen的博客 在原生的HTML中,是不存在组件化的,为了开发便利,人们使用各种方法来模拟组件.如将HTML封装在一段JS代码中,通过调用这段JS代码来操作界面.无奈碍于前端三大件:HTML.JS.CSS的限制,无法真的做到专注于组件. React框架就很好地解决了这个问…

React简单教程-3.1-样式之使用 tailwindcss

前言 本文是作为一个额外内容,主要介绍 tailwindcss 的用法 tailwindcss 是一个功能类优先的 CSS 框架,我在以前的文章里有描述为什么使用功能类优先:为什么我在 css 里使用功能类优先 在上一章中我们的 react 组件有了一个简单的样式,在这一篇我们将使用 tailwindcss 来重新编写它的样式.我将使用我们上一章的代码为例子. Tailwind CSS 前置知识 不要害怕功能类优先的写法,总体来说它其实和我们传统的 CSS 写法没有什么不同,如果你会写 CSS,…

React简单教程-5-使用mock

前言 一个前后端分离的项目,前端人员需要对接后端的接口.如果在后端的接口没有开发好,或者没有测试版可以对接的情况下,前端人员也不能坐等后端接口写好后再开始开发. 一个项目的,理想情况下接口的规范应该是前后端人员在开发之前就已经协商好的,如请求内容,返回内容等.在后端接口还不能供前端人员使用的时候,前端就可以通过名为 mock 的技术,伪造接口. 核心思想就是:在开发过程中,通过 mock 来拦截发起的请求,并返回伪造的数据. 在这里我们将使用 msw 包来实现. MSW msw 是个 mock…

react开发教程（三）组件的构建

什么是组件 组件化就好像我们的电脑装机一样,一个电脑由显示器.主板.内存.显卡.硬盘,键盘,鼠标.... 组件化开发有如下的好处:降低整个系统的耦合度,在保持接口不变的情况下,我们可以替换不同的组件快速完成需求.例如输入框,可以替换为日历.时间.范围等组件作具体的实现.调试方便,由于整个系统是通过组件组合起来的,在出现问题的时候,可以用排除法直接移除组件,或者根据报错的组件快速定位问题,之所以能够快速定位,是因为每个组件之间低耦合,职责单一,所以逻辑会比分析整个系统要简单.提高可维护性,由于每个…

FusionCharts简单教程(八)-----使用网格组件

        有时候我们会觉得使用图像不够直接,对于数据的显示没有表格那样直接明了.所以这里就介绍如何使用网格组件.将网格与图像结合起来.网格组件能够将FusionCharts中的单序列数据以列表的形式展示出来,同时也能够与单序列的图表进行一个不错的结合,形成一个不错的组合. 一. 创建网格         首先我们需要创建一个带有网格的页面,其实这个页面和创建图表的页面毫无区别,只不过是需要改变SWF文件即可.网格组件的SWF文件为:SSGrid.swf. <body bgcolor="…