使用 iconfont 有很多优势,比如只需要加载一次,全部图标都可以设置字号大小,颜色、透明度等,可以随意变换字体的形态,并且图标是矢量的,不会随着字体大小的变化失真,得益于 iconfont.cn 提供的便利,大多情况下,我们不必上传自己的图标,只需要便捷的搜索,就可以将图标加入到自己的项目图标库中,但最近工作中却遇到了比较严重的问题。
IconPark图标库是一个通过技术驱动矢量图标样式的开源图标库,可以实现根据单一SVG源文件变换出多种主题, 具备丰富的分类、更轻量的代码和更灵活的使用场景;致力于构建高质量、统一化、可定义的图标资源,让大多数设计师都能够选择适合自己的风格图标,并支持把图标源文件导出为React、Vue2、Vue3、SVG多种形式的组件代码,让开发者使用更高效。
React 最初是由 Facebook(Meta) 内部开发的,然后于 2013 年 5 月 29 日在 Facebook 的 F8 开发者会议上首次公开宣布,并「于同一天开源发布」。不知不觉中,React已经开源 10 年了。
之前一直有在维护一个上海地铁线路图的 pwa,最主要的特性就是 "offline first"。但是由于代码都是通过原生的 js 去实现,之前我都不是很喜欢去用框架,不想具有任何框架的偏好。但是到后期随着代码量的增加,代码的确变得混乱不堪,拓展新功能也变得尤为困难。因此,花了将近两个礼拜的时候对于应用进行了一次完整的重构。网站访问地址:https://neal1991.github.io/subway-shanghai
难以满足产品项目需求的,或遇到缺失图标的,往往还是需要设计师按所选图标的风格自己绘制。
Parcel是一款极速零配置WEB应用打包工具,快速、几乎零配置是它最大的特点,开箱即用。相比webpack,Parcel对于新手来说未尝不是一个很好的选择。
来源 | https://www.jianshu.com/p/182b69e54fe8
本篇文章为大家盘点了1月份最热门的 JavaScript 项目,让我们一起来看下吧! 一、编辑器tui.editor https://github.com/nhnent/tui.editor Star 5033 tui.editor(TOAST UI Editor)是一款所见即所得的Markdown编辑器。TOAST UI Editor提供Markdown模式和WYSIWYG模式。它的功能非常强大,你可以编辑表格,UML图和图表等。 TOAST UI Editor的Markdown模式的特点有: ● 所见即
在这个实用的Astro指南中,我将指导你完成设置过程,并告诉你如何构造你的文件。你将学习如何添加页面、交互式组件,甚至是markdown文章。我还会告诉你如何从服务器上获取数据,创建布局,并使用vanilla JavaScript和其他框架添加互动性。准备好享受一些动手的乐趣,因为我们将一起创建一个小型的网站实例。我们将构建一个多页面的网站,包括一个博客。
本文主要讨论基于webpack5+TypeScript的React项目(cra、craco底层本质都是使用webpack,所以同理)在2023年的今天是如何在项目中使用svg资源的。
1:打开编辑器,导入上一节的创建的项目,开始查看目录结构,manifest.json指定了开始页面index.html,一切的开始都从这里开始。
本系列分为四篇: 建站四部曲之后端接口篇(SpringBoot+上线) 建站四部曲之Python数据爬虫篇(selenium) 建站四部曲之前端显示篇(React+上线) 建站四部曲之移动端篇(Android) ---- 零、前言 本系列为了总结一下手上的知识,致敬我的2018 本篇的重点在于:用前两篇的数据使用React搭建一个简单网站 本篇总结的技术点: React的组件封装、React实现简单的懒加载、React中的网络请求、搜索功能 React中form表单与接口的对接、路由react-
大家好,在本系列的前三篇文章里,我们一起学习了在 React 中经常会用到的 ES6 新特性,以及 REACT 16+ 版本的一些新特性 和 团队 成员在 Winwow 和 MAC 环境下混合开发时需要注意的一些问题,从本篇文章起,我们将正式开始从最基础的内容开始学习React,今天我们将从创建第一个 React 组件开始学起。
React 是目前为止最受欢迎的 JavaScript 框架之一,而且我相信它也是目前最好用的开发工具之一。
官方文档:https://webpack.docschina.org/loaders/url-loader/
大家好,在本系列的前三篇文章里,我们一起学习了在 React 中经常会用到的 ES6 新特性,以及 REACT 16+ 版本的一些新特性和团队成员在 Winwow 和 MAC 环境下混合开发时需要注意的一些问题,从本篇文章起,我们将正式开始从最基础的内容开始学习React,今天我们将从创建第一个 React 组件开始学起。
在 JS 程序中,为了实现漂亮的图形、图表和数据可视化,我们选择使用开源库。生活在数据爆炸的时代,我们开发的每一个应用程序几乎都使用或者借助数据来提升用户体验。为了帮助你轻松地为你最喜欢的应用程序添加漂亮的数据可视化,这里列出了 2019 年最好的 JavaScript 数据可视化库(排名不分先后)。
在当今互联网生活中,无论是做设计、写文章、创作、写PPT等,都会接触到图片、视频和音频这些资源。那么我们该去哪里去找一些优质的免费资源呢?
Ant Design 的 Icon,是在"确定"和"自然"的设计价值观影响下的一套美观、一致、易用、便于延展的图标体系;
在上一篇《从零搭建react+ts组件库(一)项目搭建与封装antd组件》介绍了使用webpack来搭建一个基于antd的组件库的基本框架,但是作为一个组件库,实际上还有很多的都还未引入,本篇将会补充less模块化以及svg引入的基本方式。
我选择在本地搭建 React 开发环境,这与实践更加接近。在初学时,我们可以通过 Create React App 创建项目。它是 React 初学者创建单页应用的最佳方式。
大家好,如果要做一个博客网站,你会选择什么前端技术呢?本篇文章,我将和大家一起使用 React 和 Next.js 技术从0到1创建一个博客网站,通过本案例,你将会学习到 Next.js 的以下内容:
在本文中,你将学习如何使用 ChatGPT API 构建一个将 JSON 对象转换为 Typescript interface 的 Web 应用
1.英文官网: https://reactjs.org/ 2.中文官网: https://react.docschina.org/
React Conf 2019 在今年 10 月份举办,内容质量还是一如既往的高,如果想进一步学习前端或者 React,这个大会一定不能错过。
CSS 是前端开发的重要组成部分,但是它并不完美,本文主要探讨 React 样式管理方面的一些解决方案,目的是实现样式的高度可定制化, 让大型项目的样式代码更容易维护.
自诞生之初截止目前(2016年初),React可以说是前端界最流行的话题,如果你还不知道React是何物,你就该需要充充电了。 d3是由纽约时报工程师开源的一个绘制基于svg的数据可视化工具,是近几年最流行的visualization工具库之一。d3提供丰富的svg绘制API、动画甚至布局等功能,目前市面上大多数visualization仓库是由d3构建的。d3的优势在于将data与DOM绑定,理想化的方案是直接操作data而不是操作DOM来实现UI的更新,从这个角度上讲,d3的理念与React有异曲同工之
至此,Mac环境下react基于脚手架的开发环境已搭建完成。运行项目( npm start)后,浏览器会自动打开本地页面http://localhost:3000/。如果到此步弹出带有react的Logo的欢迎页面,则表示环境已经成功配置。
之前我们讨论了怎么在 Angular 项目路径添加指定的访问前缀,该项目针对 SPA 应用;当然,我们也讨论了 Next 项目路径添加指定的访问前缀,该项目是使用 React 框架完成的 MPA 应用。本文,我们讨论 React 的 SPA 应用,怎么为该应用添加指定的访问前缀呢?
「前端实验室」 专注分享 Github、Gitee 等开源社区优质的前端项目、前端技术、前端学习资源以及前端资讯等各种有趣实用的前端内容。
在日常使用github中,除了利用git进行项目版本控制之外,最多的用处就是游览各式的项目,在看到一些有趣或者有用的项目之后,我们通常就会顺手star,目的是日后再看。但是当我们star了许多项目之后,回过头想找一个的项目就会发现,很难在短时间内找到它,官方也并没有提供很好的管理我们的star项目的功能,因此在市面上也出现了一些对star进行管理的工具,比如说 astralapp,Star Order等等,其实github的接口api都是开放的,我们完全可以自己构建一个属于自己的项目管理工具。公司的前端技术栈是React,而笔者之前使用的是Vue,因此正好想利用github的open api 自己构建个react的github star管理项目来加深react的使用。而大体功能我们就模仿astralapp。
本轮子是通过 React + TypeScript + Webpack 搭建的,至于环境的搭建这边就不在细说了,自己动手谷歌吧。当然可以参考我的源码。
近期ChatGPT很火,作为前端er,我思考与尝试了让它帮忙写代码、帮助我解析与研究某些国内资料较少的技术、优化代码、解释代码、优化简历——都非常棒,就是很可惜GPT的图片能力还一般,如果什么时候它可以解析图片了,或许图片生成代码就不远了。
近年来,随着移动端对数据可视化的要求越来越高,类似 MPAndroidChart 这样的传统图表库已经不能满足产品经理日益变态的需求。前端领域数据可视化的发展相对繁荣一些,通过 WebView 在移动端使用 Echarts 这样功能强大的前端数据可视化库,是解决问题的好办法。
可以给每个方法加上.bind(this)来解决 this 指向的问题,因为大多数教程都告诉你这样做。如果你有几个受控组件,那么constructor(){}中就会有一大堆代码。
在上文中介绍了使用 iconfont 的缺点,以及使用 SVG 的优点,简单归纳为以下几点:
好啦, 今天的分享就到这里啦, 如果你有好用的库推荐, 欢迎在评论区反馈~ 后续会在 趣谈前端 中持续总结复盘, 让技术工作更高效
在这篇文章中,我们将了解如何在 TailwindCSS 的官方 Nuxt 模块的帮助下有效地将 TailwindCSS 与 Nuxt 应用程序结合使用。我们还将了解如何将 SVG 图标与 TailwindCSS 一起使用,而不是直接使用图像或 SVG 图标,以及如何基于给定图像为 TailwinCSS 构建自定义调色板。
超过 10k stars 和 1k fork,NativeBase 是一个广受欢迎的 UI 组件库,它为 React native 提供了几十个跨平台组件。当使用 NativeBase 时,你可以使用任何现成的本地第三方库,并且项目本身围绕着它提供了丰富的生态系统,从有用的starter-kit到可定制的主题模板。这是一个不错的入门工具包。
Create React App是FaceBook的React团队官方出的一个构建React单页面应用的脚手架工具。它本身集成了Webpack,并配置了一系列内置的loader和默认的npm的脚本,可以很轻松的实现零配置就可以快速开发React的应用。
如今,对于现今前端热门的三大框架Vue,Angular,React,对于web开发者来说,早已不是什么陌生的词
我喜欢形状,尤其是彩色的!网站上的形状与背景颜色、图像、横幅、部分分隔符、艺术品等属于同一类别:它们可以帮助我们理解上下文并通过可供性告知我们的行动。
自2013年5月29日首次发布以来,React.js已经占领了互联网。我和许多其他开发人员将他们的成功归功于这个了不起的框架,这已经不是什么秘密了。
静态资源处理是前端工程经常遇到的问题,在真实的工程中不仅仅包含了动态执行的代码,也不可避免地要引入各种静态资源,如图片、JSON、Worker 文件、Web Assembly 文件等等。
会上讲了很多激动人心的技术点,这里先介绍一些我比较感兴趣的点, 希望对大家有所启发。
前几天在B站看到科技网红up主「程序员鱼皮」分享了一则GitHub年终总结的视频,总结在开发者在 GitHub 这一年的代码贡献,提交记录,修正记录等,而且以动画流程的形式展现出来,画面清晰美观,看起来很高级。
PlainBashC++C#CSSDiffHTML/XMLJavaJavascriptMarkdownPHPPythonRubySQL
领取专属 10元无门槛券
手把手带您无忧上云