vortesnail
vortesnail
# 如何部署create-react-app项目到Github pages步骤 ### 此文目的： 提供两种将 `create-react-app` 创建的项目部署到 `Github Pages` 的方法，因为其中有坑，此文或许能帮到一些朋友。 ### 前提须知： - 你已经通过 `create-react-app` 创建了一个 react 项目， 并通过 `npm run start` 能在线下环境正确运行。 - 当然是在 github 上已经创建了一个与你本地代码同步的仓库啦～ - 我的项目名为...
我的[github/blog](https://user-gold-cdn.xitu.io/2020/1/6/16f76776ee84ae56)，若star，无比感谢 > 建议电脑观看，图有点挤，手机屏幕太小可能看不清楚。 ### 放轻松 作为一个前端er，你总会在学习或工作中，听到这样的声音：什么是`https`？你对`https`理解多少？说一说`https`吧？等此类问题，这也是在前端面试中比较容易被问到的问题，目的在于考究被面试者的知识广度，我相信你也不想在被问到的时候是以下表情：  此篇文章旨在帮助对于`https`完全没有了解的小小前端er建立起一个宏观的理解，此处的“宏观”并非草草了事，而是涉及到一些加密算法不予解析以及技术细节不予解读，总之这篇文章不需要多少的思考与理解能力，只需要认真地阅读，我相信你一定会理解`https原理`的，请**放轻松**。好了，让我们先来进入以下一个场景。  Michael和琪儿长期合作的伙伴关系，他们之间经常有密切的交易联系，经常会涉及一些金额的绝密信息需要通过互联网发送至对方，然而拥有技术的黑客Jack早已凯觎已久，总想着盗取点什么信息。 一天，Michael和琪儿仍然按着原来的方式来进行通信，所谓原来的方式，就是不对想要发送的信息做任何处理，直接在网络上传输：  这下，黑客Jack可乐坏了，他截获了Michael的消息，并把其中的卡号改成了自己的，给琪儿发了过去：  此时琪儿并不知道Michael发过来的信息以及被篡改过了，于是将资金打入了黑客自己的银行账号(上图中的8888)，并且出于礼貌给了一个简单的回复，这条回复事实上也能被黑客Jack截获，但是他并不在意了，收到钱后的他扬长而去，直到Michael再次发消息给琪儿催款的时候，琪儿才知道自己被黑客攻击了。 我们将以上的各种关系与我们与服务端获取发送消息的关系对应一下： | Michael | 琪儿 | 黑客Jack | 原来的方式 | | --- | --- |...
> 原文链接：[How to Start Testing Your React Apps Using the React Testing Library and Jest](https://www.freecodecamp.org/news/8-simple-steps-to-start-testing-react-apps-using-react-testing-library-and-jest/#prerequisites) **写测试通常都会被认作一个乏味的过程，但是这是你必须掌握的一个技能，虽然在某些时候，测试并不是必要的。然后对于大多数有追求的公司而言，单元测试是必须的，开发者对于代码的自信会大幅提高，侧面来说也能提高公司对其产品的信心，也能让用户使用得更安心。** 在 React 世界中，我们使用 [react-testing-library](https://testing-library.com/docs/react-testing-library/intro) 和 [jest](https://jestjs.io/docs/en/getting-started) 配合使用来测试我们的 React Apps。 在本文中，我将向你介绍如何使用 8 种简单的方式来来测试你的 React App。...
## 前言： 你可能也注意到了，html文件中的关于js的引用是我们手动写的，那假如我们改了输出路径或打包编译之后的文件名，那我们岂不是还要手动去修改html文件中的引用？我们怎么做到，像create-react-app中那样一旦你修改了某个文件内容，页面会自己刷新？我们来一步一步实现它们，当然，这一小节不仅仅只是为了完成这两点。 ## 自动编译html并引入js文件 public的index.html应该自动编译到dist目录，并且所有的js引用是自动添加的。你可以使用html-webpack-plugin插件来处理这个优化。 ### 安装[HtmlWebpackPlugin](https://www.webpackjs.com/plugins/html-webpack-plugin/) 在控制台执行以下代码： ```bash npm install --save-dev html-webpack-plugin ``` ### 在webpack.prod.config.js中配置plugins属性 ```javascript const merge = require('webpack-merge'); const common = require('./webpack.common.config.js'); const HtmlWebpackPlugin = require('html-webpack-plugin');...
> 本文直接灵感：[终于搞懂 React Hooks了！！！！！](https://juejin.im/post/5e53d9116fb9a07c9070da44#heading-8) > 这里是我的 [github/blog](https://github.com/vortesnail/blog) 地址，如有帮助，赏个 star～ 看人家 `Typescript` 和 `React hooks` 耍的溜的飞起，好羡慕啊～🥺 那来吧，这篇爽文从脑壳到jio干地教你如何使用这两大利器开始闪亮开发！✨  ## 课前预知 🌸**我觉得比较好的学习方式就是跟着所讲的内容自行实现一遍，所以先启个项目呗～** ```bash npx create-react-app hook-ts-demo --template typescript ``` 在 `src/App.tsx` 内引用我们的案例组件，在...
## 前言 > 我的 [github/blog](https://github.com/vortesnail/blog)，给个小星星咯～ 最近因为工作，需要写一个脚本来自动读取文件夹下的某个文件，把其中的内容写到另一个新生成的文件中。因为这种场景还是挺常见的，网络上也搜不到好的(手把手教学的)解决方案，这对于还没学过 `node.js` 的前端小白来说，很不友好啊～ 于是这篇文章就手把手教你写一个这样的脚本，都会尽量解释清楚，保证你看了就会！ ## 场景举例 假如有这么一个项目，其文件目录如下： ```basic |-- app1 |-- config.json |-- index.js |-- app2 |-- config.json |-- index.js |-- app3 |-- config.json |--...
# [译]使用 React Hooks 构建电影搜索应用程序 ## 前言： 在这篇文章中，我们将使用 React Hooks 构建一个非常简单的应用程序。因此，我们不会在此应用程序中使用任何class 组件。 我将解释一些API的工作原理，以便于使你能在构建其它应用程序时能更得心应手地使用 React Hooks。 以下是完成这个应用程序之后的页面截图： 我知道，这名字看起来很有创造性... 基本上，该程序可通过 [OMDB API](http://www.omdbapi.com/) 来搜索电影并将结果返回给我们。构建此应用程序的目的在于使我们更加理解 React Hooks 并且助你在自己开发的项目中更好地使用它，那么，我们开始吧！在此之前，你需要做一些事情： - Node (>=6) - 有一个超酷的代码编辑器 (我用的是...
大家好，我是 vortesnail。 ### 前言： 最近这几个星期，一直都在维护自己的[基于 React 的开源播放器组件](https://github.com/vortesnail/qier-player)，以为功能基本都差不多了，却忽视了播放器一个很重要的功能：**鼠标悬停在视频播放界面时，在一定时间后鼠标会消失，视频下方的控制栏也会隐藏，呈现视频的最大可视化。但是鼠标稍微一动，一切恢复如初**。用一张简单的 gif 图来说明的话，是下面这样子的：有点犯难，它不是简单地移到元素（如视频）上，2秒后让它执行鼠标消失和控制栏消失的操作，因为一旦鼠标一动一点，都要恢复原样，不过好在结合 **防抖** 的思想以及自己的一些思考，实现了这个功能，并将其封装为一个工具函数，可供大家使用，当然，其中也有不足，也请各位能给予意见，我会结合给的意见更新这篇博客。 ### 开始： 如果你现在需要使用这个功能，你希望用起来尽量简单，并且能达到你的使用要求，思来想去，给你暴露 4 个参数最为妥当： - element：你所希望操作的元素（比如上面 gif 中 “我是视频”这个 div 元素） - secondsLaterDoFn：你设定的时间之后，想做什么操作（比如上面 gif 中“鼠标消失，控制栏消失”） - seconds：你希望的时间，单位：ms（比如上面...
## 前言： 这一节我们将在脚手架中引入CSS，SASS，LESS，并且实现代码压缩，以及PostCSS的使用。 ## 先让CSS跑起来 ### 新建CSS文件 在我们的 `/src` 目录下，新建一个文件名为 `app.css` ，并输入以下代码： ```css .App { height: 200px; display: flex; justify-content: center; align-items: center; background-color: lightcoral; } h1 { font-size: 16px;...
# 从头到尾给你讲清楚如何实现一个new ### 前言 “诶，你讲讲如何实现一个new吧，有必要也可以写一下。”，面试官微笑（或严肃）着脸说道，并递给了你纸和笔。 “emmmm，那个，新建一个对象，emm，然后....emmm..不好意思，有点记不得了”。你也尴尬而不失礼貌地笑笑😊。 那我们今天就来聊聊这个东西怎么写呗～ 对于原型链继承关系可参考我的一篇博客： [原型链继承详解](https://github.com/vortesnail/blog/issues/1) ### 原生的 new 写法： 我们平常用new的时候，是这样用的： ```javascript function People(name) { this.name = name; this.job = '前端工程师'; } People.prototype.showName = function() { console.log(this.name);...