Apache Echarts 5 线上发布会

React

Lottie Web动效在React中的构建

时至今日Web动效已经不是什么新鲜事了,在很多Web页面或Web应用上都有Web动效的身影。承载Web动效的方式也很多种,比如早期的Gif动效,也有人用视频来表示动效,也有使用JavaScript构建动效(比如Canvas,WebGL构建),还有一些JavaScript库构建动效以及CSS构建Web动效等。不过,近几年更多的是在探讨如何快速生产,并且还原动效。针对于这方面,在业内Lottie动效算是流行的一种,也是口碑很好的一种。今天我们就来看看,如何在React中借助Lottie的能力,快速还原Web动效。

使用React Hooks构建CSS的transition和animation

Web动效在Web应用中所起的作用就不说了。有人说,Web动效可以给Web起到锦上添花效果,也有人说,Web动效可以增加用户的粘性和吸引力。就目前来说,在Vue框架体系下,可以使用<transition>组件来构建Web动画效果,其实在React体系下,也可以使用类似的方式来给Web元素添加动画效果。接下来,就和大家一起探讨,在React框架如何将CSS的trasitionanimation运用到元素中,让Web元素动起来。如果你对这方面知识感兴趣的话,欢迎继续往下阅读。

A11Y 101: 构建可访问性React应用的技巧

众所周之,React目前是前端领域最为流行的JavaScript框架之一,很多Web开发都是基于React进行Web开发。但据 WebAIM Million统计分析可得知“使用React框架开发的Web应用或Web页面就可访问性方面而言,其错误要比一般的主页多出5.7%”。而且在社区中普遍认为,基于React开发的Web应用对于Web可访问性本来就差,而且开发者无法很好的基于React框架开发出具有可访问性的Web应用。事实上这是一种错误的认知,基于React能不能开发出具有可访问性的Web应用和React本身并没有太多的关系,因为开发一个具有可访问性的Web应用更多的是和HTML和WAI-ARIA有着紧密的关联。换句说,基于React开发具有可访问性的Web应用,应该注意些什么,以及如何更好的开发更具可访问性的Web应用。这是今天要和大家一起聊的话题。

SVG在React中的运用

在Web的世界当中,SVG并不是什么新的语言,只不过早年前SVG在Web的应用并不太广泛。不过近年来,它在Web的应用越来越广泛。最为常见的就是一些Icon图标,复杂一点是一些矢量图(比如不规则的图形),甚至还可以使用SVG的滤镜、动效等功能,实现一些复杂的UI效果。不过这些并不是今天要和大家聊的主题,今天想和大家聊的是 SVG在前端框架中的应用,比如React框架。

使用React Hooks和WAAPI创建动效

早期在Web页面或Web应用中实现 Web动画 通常是使用JavaScript来完成。使用JavaScript创建动画非常灵活,但不能轻易地让浏览器通过硬件加速来优化动画,也不能将其连接到 布局渲染 管道中。值得庆幸的是,自2007年Webkit团队引入的 CSS AnimationCSS Transition 克服了早期JavaScript动画实现的挑战。但是,CSS Animation和Transition也有很多的限制,特别是在 动态创建动画、控制动画的回放和监视动画生命周期方面等。不过,Web Animation API的出现,让开发者(特别是Web动画方面的开发者)看到了曙光。因为,Web Animation API引入了一种新的解决方案,它提供了CSS Animation和Transition的优化能力,同时还提供了早期基于JavaScript制作动画的API的灵活性。Web Animation API通过 计时模型(Timing Mode)动画模型(Animation Model)提供对Web动画开发和控制。

CSS自定义属性在组件开发中的使用

图解CSS系列的《CSS自定义属性》一文中,对CSS的自定义属性做过深入的阐述。如果你阅读过这篇文章,应该对CSS自定义属性有所了解,也能体会到该特性的强大之处。今天,CSS自定义属性可以用于Web开发中的很多地方,能让开发者变得更为便捷灵活,比如最近流行的Dark Mode开发。而今天我们就来和大家聊聊CSS自定义属性在组件开发中的运用。

初探React Context API

最近在整理CSS自定义属性在React中的使用时了解到“可以使用React Context API相关的知识更好的在React组件中使用CSS自定义属性”,但是自己对这方面的知识了解的并不多,因此想借此机会来学习React Context API相关的知识。也基于这个原因有了这篇文章。

初探Tailwind CSS

写CSS有些年头了,经历了不同的时期用不同的姿势来编写CSS,其目的就是给Web元素添加样式。但编写样式着实令人感到烦恼,甚至是效率低下,成本极高。也正因如此,社区中有很多CSS方法论和框架来帮助开发快速有效编写CSS。虽然这些方法论和框架有助于我们快速编写CSS,构建UI组件,但也有令人感到头痛之处,比如冗余的代码,代码的覆盖等。随着功能第一(Utility-First)CSS的出现,让我看到了编写CSS的另一种有效的方式,该方式也被认为是现代Web中构建Web界面最好的选择。其中Utility-First CSS的典型作品之一就是Tailwind CSS。接下来,我们就来了探讨Tailwind CSS,我们将了解基于组件的样式有哪些问题,以及为什么要基于Utility-First CSS来构建组件。

A11Y 101:可访问性审核的几种姿势

在《如何检测和修复可访问性》一文中和大家一起探讨了怎么让开发者在开发过程中检测和修复Web应用可访问性的问题。尽管近63%的开发者没有这方成的习惯,但如果我们想构建一个具有高可访问性的Web网站或Web应用就必须考虑可访问性相关的事项。而可访问性的一个关键方面就是审核(Accessibility Auditing)。了解应用程序是否具备可访问性,其最佳方法就是对其进行测试度量;通过这种方式,可以确定在发布到生产环境之前是否需要进行修改。

React中的state

上一节中我们学习了如何使用React的props来改变组件(UI)以及如何在React中使用props。除了props可以改变组件之外还可以通过React的state,而且state也是React的重要概念和必须掌握的知识之一。通过上一节的学习,我们了解到props是纯静态的改变UI,而今天要聊的state是动态的,让你的组件真的能动起来,可以让用户和你的产品进行交互。用户和你的应用程序的每次交互都有可能更改state,从而导致对应的UI更改(或内容的重新渲染)。如果你从未接触过或者想学习这方面的知识的话,欢迎继续往下阅读。

页面

返回顶部