05 28 #yyds干货盘点# 推荐 10 个很“哇塞”的Web“资源”给前端工友，收藏等于学会~ 毋庸置疑：善用在线资源和工具可以加速开发，提高质量、让生活更 Chill ?~本篇为前端工友们带来 10 个棒棒哒免费的 Web 资源，收藏⭐等于学会 (๑•̀ㅂ•́)و✧1. Undraw如果你的网站需要免费的 SVG 插图，一定不要错过 Undraw 这个网站！SVG 插图资源是海量的，本瓜下拉了十几、二十次都拉不完（当然，搜索功能也是有的）；并且 搜索 技术文档 代码片段 原创 掘金安东尼 11小时前 39 阅读 点赞 评论 收藏 好客租房106-外观和样式调整 外观和样式调整 步骤: 1修改页面标题:在index.html中修改 2基础样式调整:在index.css中调整 index.css html,body{ height: 100%; font-family: "Microsoft YaHei";... css html 微信公众号 原创 前端歌谣 20小时前 58 阅读 点赞 评论 收藏 好客租房103-初始化项目 1.2项目搭建 初始化项目 1初始化项目:npx create-react-app hkzf-moblie 2启动项目 npm start 初始化 项目搭建 原创 前端歌谣 20小时前 54 阅读 点赞 评论 收藏 好客租房104-组件库antd-mobile 切换到版本2 1打开ant-moblie文档 2安装组件库 3在根部导入要使用的组件 4渲染组件 5在index.js中导入组件样式 import React from "react";import {Button} from "antd-mobile"f... 前端 原创 前端歌谣 20小时前 55 阅读 点赞 评论 收藏 好客租房105-配置基础路由 步骤:安装路由 1yarn add react-router-dom 2导入路由文件Router/router/link 3在pages文件中创建Home/index。js和cotyList/index。两个页面 4使用Router配置首页和城市选择页面 i... 数据 公众号 原创 前端歌谣 20小时前 42 阅读 点赞 评论 收藏 好客租房108-嵌套路由 嵌套路由:路由里面继续包括路由 home组件表示父组件的内容 news组件表示子路由的内容 本文只贴出部分代码 需要全代码关注微信公众号前端小歌谣 news/index.js import React from "react";impor... 微信公众号 嵌套 原创 前端歌谣 20小时前 38 阅读 点赞 评论 收藏 好客租房107-两种布局调整 1有tabbar的页面（首页 找房 资讯 我的） 2无tabbar的页面 城市选择（简单 不需要额外处理） 本文只贴出部分代码 需要全代码关注微信公众号前端小歌谣 微信公众号 原创 前端歌谣 20小时前 38 阅读 点赞 评论 收藏 好客租房109-实现TabBer 1基本使用 页面底部的导航菜单 核心代码拷贝到home中 分析并调整代码 让其在项目中正常运行 import React from 'react'import { TabBar } from 'antd-mobile'//导入路由class Home ... ico 微信公众号 导航菜单 原创 前端歌谣 20小时前 35 阅读 点赞 评论 收藏 好客租房110-修改tabber样式外观 1删除前面页面路由的样式 2修改tabbar菜单项文字标题 3修改tabbar菜单文字标题颜色 4使用字体图标 修改tabber菜单的图标 5修改tabbar菜单项的图标大小 6调整tabbar菜单的位置 让其固定在最底部 import React from... ico 菜单项 字体图标 原创 前端歌谣 20小时前 25 阅读 点赞 评论 收藏 好客租房111-tabber配合路由使用 1根据tabbar组件文档设置不渲染内容部分（只保存菜单项 不显示内容） 2给tabber.item绑定事件 3再点击事件中调用history.push（）实现路由切换 4创建tabbar组件菜单项对应的三个组件 并在home组件中配置路由信息 5给菜单提... 菜单项 绑定事件 点击事件 原创 前端歌谣 20小时前 27 阅读 点赞 评论 收藏 好客租房112-tab.item页面重构 tabBar.item import React from 'react'import { TabBar } from 'antd-mobile'import {BrowserRouter as Router,Route, Link} from "rea... ico css 搜索 原创 前端歌谣 20小时前 28 阅读 点赞 评论 收藏 好客租房113-首页路由处理 1首页的路由进行处理 2配合默认路由 跳转到/home 3Redirect组件实现路由重定向 to跳转到要跳转的路由 import React from "react";import {Button} from "antd-mobile"import ... 重定向 数据 原创 前端歌谣 20小时前 30 阅读 点赞 评论 收藏 好客租房114-轮播图的功能 1打开ant-moblie组件库的carousel 2选择基本 点击显示远吗 3开始拷贝代码 import React from "react";//留白import { Carousel } from 'antd-mobile';class Index e... ide 微信公众号 原创 前端歌谣 20小时前 32 阅读 点赞 评论 收藏 好客租房115-获取数据 1安装axios yarn add axios 2在index组件中引入axios 3在state中加入swiper数据 4进行数据处理 5在函数中调用方法 6渲染轮播图 import React from "react";import axios from... ios ide 轮播图 原创 前端歌谣 20小时前 37 阅读 点赞 评论 收藏 好客租房116-flex布局组件导航菜单 import React from "react";import axios from "axios"//留白import { Carousel,Flex } from 'antd-mobile';import Nav1 from '../../assets... ios ide 数据 原创 前端歌谣 20小时前 27 阅读 点赞 评论 收藏 好客租房120-在脚手架中使用sass 1打开脚手架的文档 添加sass样式 2安装sass yarn add node-sass 3创建后缀名称为scss或者sass的文件 4引入文件 渲染文件 .nav{ padding: 10px; img{ width: 48... css 后缀名 原创 前端歌谣 20小时前 32 阅读 点赞 评论 收藏 好客租房117-flex布局组件导航菜单优化 import React from "react";import axios from "axios"//留白import { Carousel,Flex } from 'antd-mobile';import Nav1 from '../../assets... ios ide 数据 原创 前端歌谣 20小时前 35 阅读 点赞 评论 收藏 好客租房118-轮播图bug修复 第一个 数据加载完成加载一个true import React from "react";import axios from "axios"//留白import { Carousel,Flex } from 'antd-mobile';import Nav1... ios perl 数据 原创 前端歌谣 20小时前 31 阅读 点赞 评论 收藏 好客租房119-tabbar栏目高亮bug修复 路由切换页面高亮的问题 import React from 'react' import { TabBar } from 'antd-mobile' import {BrowserRouter as Router,Route, Link} from "reac... ico 高亮 重定向 原创 前端歌谣 20小时前 36 阅读 点赞 评论 收藏 好客租房121-租房小组分业务和数据处理 1根据当前地理位置展示不同小组信息 2根据后台接口找到找房数据 3前端只负责渲染 数据获取 1在state中获取数据 2根据文档获取数据 import React from 'react' import axios from 'axios' //留白 impo... 数据 ios perl 原创 前端歌谣 20小时前 35 阅读 点赞 评论 收藏 好客租房122-租房样式结构 import React from 'react'import axios from 'axios'//留白import { Carousel, Flex,Grid} from 'antd-mobile'import Nav1 from '../../ass... 数据 ios perl 原创 前端歌谣 20小时前 29 阅读 点赞 评论 收藏 好客租房92-路由的基本使用 如果出现报错先降低npm的版本 //导入reactimport React from 'react'import ReactDOM from 'react-dom'import {BrowserRouter as Router,Route,Link} fro... 父类 原创 前端歌谣 20小时前 阅读 点赞 评论 收藏 好客租房85-组件性能优化（5纯组件） 我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 . 前言 最好的种树是十年... 点击事件 原创 前端歌谣 20小时前 阅读 点赞 评论 收藏 好客租房84-组件性能优化（4减少不必要的渲染） 封装成子组件 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1：类组件必须以大写字母开头 ... 生命周期 钩子函数 父类 原创 前端歌谣 20小时前 阅读 点赞 评论 收藏 好客租房86-组件性能优化（5纯组件shallow compare） 纯组件内部的对比是shallow compare 对于值类型来说 比较两个值是否相同 引用数据类型 是判断引用数据类型是否相同 引用数据类型 值类型 原创 前端歌谣 20小时前 阅读 点赞 评论 收藏 好客租房87-虚拟Dom和diff算法 React更新视图的思想是 只要state变化就能重新渲染视图 特点:思路特别清晰 理想状态 部分更新 只更新有变化的地方 新视图 原创 前端歌谣 20小时前 28 阅读 点赞 评论 收藏 好客租房89-react原理总结 1工作角度：应用第二 原理第二 2原理有助于更好理解React的自身运行机制 3setState（）异步更新数据 4父组件更新导致子组件更新 纯组件提升性能 5思路清晰简单为前提，虚拟dom和diff保证效率 6虚拟dom->state+jsx 7虚拟dom的... 运行机制 更新数据 原创 前端歌谣 20小时前 阅读 点赞 评论 收藏 好客租房88-虚拟Dom和diff算法（代码优化） 代码优化 原创 前端歌谣 20小时前 26 阅读 点赞 评论 收藏 好客租房90-react路由基础学习目标 前端 原创 前端歌谣 20小时前 26 阅读 点赞 评论 收藏 好客租房91-react路由介绍 现代的前端应用大多都是spa 单页应用程序 也就是只有一个HTML页面的应用程序 应为他的用户体验更好 对服务器的压力更小 前端路由 从一个视图导航到另一个视图 前端路由是一套映射规则 是url和组件的对应关系 使用React路由简单来说 就是配置路径和组件（... 应用程序 html页面 路径和 原创 前端歌谣 20小时前 阅读 点赞 评论 收藏
