跳到主要内容位置

React9

查看所有标签(分类)

如何使用 JSX 编写 React 组件

张旭乾

在 React 中,我们通常使用 JSX 来编写组件。JSX 是一种类似 HTML 的语法,它可以帮助我们更方便地编写组件,并且可以使代码更加易读和易于维护。在本文中,我们将介绍如何使用 JSX 编写 React 组件,并且将介绍 JSX 与 HTML 的区别、渲染列表、条件渲染、注册事件和传递 Props 相关知识。

React 框架简介

React 是一个由 Facebook 开发的用于构建用户界面的 JavaScript 库。它采用组件化的开发模式,使得开发者可以将一个 Web 应用程序拆分成多个组件,每个组件负责不同的功能,从而使得开发、测试和维护变得更加容易。

React 的主要特点是高效、可重用和灵活。它采用了 Virtual DOM 技术,可以最小化 DOM 操作,从而提高性能。另外,React 还拥有丰富的生态系统,包括 React Router、Redux、React Native 等等,可以帮助开发者更加高效地构建 Web 应用程序、移动应用程序和桌面应用程序等等。

前端组件化开发的 7 条经验总结

张旭乾

自从 2010 年第一份工作接触了前后端半分离的开发方式之后,在后面的这些年里,对前端的组件化开发有了更全面一点的认识,组件化在我们的前端开发中,对提高开发效率、代码的可维护性和可复用性有很大帮助,甚至对跟设计师沟通的效率和企业的品牌形象都有着深刻的影响。这篇文章就把我在开发中总结的一些组件化开发经验分享一下。示例中的所有代码都是伪代码,你可以按照实际情况应用到 React 或 Vue 的项目中。

前端组件化发展历史

在讨论组件化开发之前,我们先看看前端组件化开发的发展历史。网页开发刚起步时,并没有『前端』这个概念,更不用提组件化了。当时,网页只是作为可以在浏览器中浏览的富文本文件,开发网页就是使用一些标签让浏览器解析并显示。受制于 HTML 只是描述式的语言,网页中的代码没有办法复用,即使是类似的页面,都需要复制粘贴大量的重复代码:

如何购买阿里云服务器搭建个人网站

张旭乾

阿里云

在做完网站之后,我们需要把它部署到服务器上。服务器就是一台远程的虚拟电脑,在它上面安装服务器程序后,可以把我们部署的网站呈现给访问网站的用户。比较专业且大型的服务器提供商有:

  • 阿里云。
  • 腾讯云。
  • 华为云等。

它们的服务基本上都差不多,这里就以阿里云为例来看一下,如何购买一台适合自己的服务器。 选择服务器最重要的是 **CPU、内存和带宽,**需要根据网站的用户量、所占的空间(例如图片、数据的大小)来选择对应的配置。

  • 如果性能太差,就无法应对大量用户的访问,比如说 1000 人同时访问。
  • 如果带宽比较小,对于大访问量也会造成页面响应延迟。

假如你要搭建的是个人网站、博客之类的,那么可以选择一个比较基础的配置,这样也比较便宜。

从 0 仿微信 8.0 动态表情实现过程

张旭乾

微信 8.0 更新的一大特色就是支持动画表情,如果发送的消息只有一个内置的表情图标,这个表情会有一段简单的动画,一些特殊的表情还有全屏特效,例如烟花表情有全屏放烟花的特效,炸弹表情有爆炸动画并且消息和头像也会随之震动。本着作为前端工程师的职业精神,我就想看看能不能实现一个类似的特效。折腾许久之后,做出来的效果如下:

前后端通信之 HTTP 协议简介

张旭乾

前后端数据的交换一般是基于 HTTP 协议。HTTP 协议包括客户端和服务端两个实体,客户端发送请求给服务端,服务端返回响应给客户端。在 HTTP 中,数据称为资源,可以是 html 文档、图片、也可以是普通文本。资源是通过 URL 进行定位的。

CSS Flexbox 布局最容易理解完全教程

张旭乾

在 CSS flexbox 布局出现以前,如果要控制 HTML 元素的布局,要用到很多种奇葩的方式。在水平方向上得用float控制左右对齐,稍一不注意,就会有浮动的元素飞来飞去~。在垂直方向上就更是百家争鸣了:要么手动计算高度然后算出中心点,要么用 line-heightheight 的结合,要么用十之八九不生效的 vertical-align 属性等等等等。自从 flex-box 出现以后,一切似乎就豁然开朗了,水平垂直各种花式对齐,空间分配由你做主。当然,要用好它,用对它也不是一件容易的事,今天就给你说说 flex-box 布局,看完之后你也能熟练的运用它!(博客中的示例都是真实的 HTML 代码,可以使用 chrome 开发者工具查看属性。(此文为了演示某些 flex 示例,在小屏幕下会有横向滚动条)

React State 和 Event教程 - 制作渐变背景生成器

张旭乾

Hello, 今天教你写一个渐变背景生成器。我会用这个例子来解释 react 的 state,状态管理,还有事件处理。这个小工具提供了两个颜色选择器,分别可以选择渐变的两个颜色,渐变的角度是 75 度,线性渐变。另外还有一个重置按钮可以把渐变恢复成初始值。

React Props 教程 - 制作一个按钮

张旭乾

你在写 HTML 页面的时候肯定知道,html 标签的属性都是固定的,比如 a 标签的 href, input 里边的 type 属性。这些属性都是内置的,不方便扩展和复用。而用 React 创建组件的话,可以给它定义一些更符合语义和逻辑的属性,比如颜色、尺寸等。

什么是 React?你为什么应该学React?

张旭乾

Hello! 今天来带你走进 React 的大门!我第一次听说 React 是我在美国读研的时候,室友选了 web programming 这节课,然后遇到了关于 react 的好多问题,就是总也配置不好。我看他那个时候 React 的配置特别麻烦,要引入一堆依赖,像 bower, babel 等等... 还有文档写的也不清楚。有一次他刚开始做一个作业,问了我一个问题,大概是有一个组件显示不出来,结果看了半天我也不知道是怎么回事啊,因为我也没学过。后来他自己研究出来了,是因为这个组件在使用的时候没有大写。