5 posts tagged with "react"

View All Tags

CSS Flexbox 布局教程

峰华

峰华

前端工程师 / B站UP主

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

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

峰华

峰华

前端工程师 / B站UP主

Hello, 今天教你写一个渐变背景生成器。我会用这个例子来解释 react 的 state,状态管理,还有事件处理。

你将学到的

这个小工具提供了两个颜色选择器,分别可以选择渐变的两个颜色,渐变的角度是 75 度,线性渐变。另外还有一个重置按钮可以把渐变恢复成初始值。

效果演示:

源码:Github - React-Examples

示例和视频

State 简介

首先看一下什么是 state,上篇文章讲了 props:

  1. 用来给组件传递参数,组件会根据这些 props 来控制它自己生成的 html
  2. 它的值不会发生变化,只要传给他的一个固定的值,那么它就会永远是这个值。

如果想让一个属性根据条件发生变化的话。那么这里就要用 state 状态。状态就是说这个组件可能在某一个时间或者是发生了什么事件之后,会发生一些变化,就拿这个例子来说,咱们要展示一个渐变的背景,那么这个背景颜色就要根据用户所选择的颜色来发生改变,这个颜色因为是变化的,所以说它就要定义成一个 state,它的值是在用户选择完颜色之后来进行更新的。

使用 State 跟普通 JavaScript 相比,它的好处是:

  • 在组件内部管理状态,代码封装性好,出错的话也容易定位到问题组件。
  • 数据和展示分离,只需要修改 state 的值,就能更新对应的组件。
  • state 可以通过 props 向下传递给其他组件,只要 state 改变,所有使用它的组件都会刷新。

接下来看一下这个例子怎么实现。

一组美丽的按钮 - React Props 教程

峰华

峰华

前端工程师 / B站UP主

你在写 HTML 页面的时候肯定知道,html 标签的属性都是固定的,比如 a 标签的 href, input 里边的 type 属性。这些属性都是内置的,不方便扩展和复用。而用 React 创建组件的话,可以给它定义一些更符合语义和逻辑的属性,比如颜色、尺寸等。这些属性在 React 里边叫做 props,你可以自己定义这些属性将会影响到组件的哪些部分。这样的一个组件,通过给它一个合适的名字,比如 Button,那么所有按钮的展现都可以用它来实现,只需要改变它的属性就可以展示为不同的样式。那今天我就教你定义一个这样的按钮组件,它有默认的背景色、文字颜色、还有实心和线框样式,后边通过属性,props,来控制它是蓝色、红色还是黑色,然后利用另一个属性来控制它是实心的背景还是线框的。好,那咱们开始吧。

你将学到的

上一张效果图:

带你走进React的大门 - 你为什么应该学React?

峰华

峰华

前端工程师 / B站UP主

B 站视频 - 点击传送

Hello! 今天来带你走进 React 的大门!我第一次听说 React 是我在美国读研的时候,室友选了 web programming 这节课,然后遇到了关于 react 的好多问题,就是总也配置不好。我看他那个时候 React 的配置特别麻烦,要引入一堆依赖,像 bower, babel 等等... 还有文档写的也不清楚。有一次他刚开始做一个作业,问了我一个问题,大概是有一个组件显示不出来,结果看了半天我也不知道是怎么回事啊,因为我也没学过。后来他自己研究出来了,是因为这个组件在使用的时候没有大写。我当时就觉得这个 React 好复杂呀,然后就决定,我可不学他,后来我在暑假里面就学了 vue,但是回国之后呢,因为某些原因我就没有找后端的工作,转向了前端,当时又看这个 react 已经变得特别方便了,有一个 create react app 工具,就能省好多事儿,而且 react 的生态圈又特别的庞大,就决定学了 react。因为我觉得这个 react 开发大型的前端应用特别方便,尤其是它出了 hooks 之后。所以,我今天想给你分享一下。这个 react 到底是什么东西?它有什么好处?