react 实战：写一个年份选择器

上代码. 组件的Js文件. import React, { Component } from "react"; import Style from './myYearSelect.less' function getOffsetTop(el){ return el.offsetParent ? el.offsetTop + getOffsetTop(el.offsetParent) : el.offsetTop } function getOffsetLeft(el){ return…

放弃antd table，基于React手写一个虚拟滚动的表格

缘起标题有点夸张,并不是完全放弃antd-table,毕竟在react的生态圈里,对国人来说,比较好用的PC端组件库,也就antd了.即便经历了2018年圣诞彩蛋事件,antd的使用者也不仅不减,反而有所上升. 客观地说,antd是开源的,UI设计得比较美观(甩出其他组件库一条街),而且是蚂蚁金服的体验技术部(一堆p7,p8,p9,基本都是大牛级的)在持续地开发维护,质量可以信任. 不过,antd虽好,但一些组件在某一些场景下,是很不适用的.例如,以表格形式无限滚动地展示大量数据(1w+)时,…

仿照jQuery写一个关于选择器的框架(带了注释,请多多指教~)

var select = (function () { //这是一个异常与捕获的代码,它表示的意思是:如果push方法出现了错误那么就需要重写push方法 try { //这边是自己模拟一个场景,来使用系统的push方法,如果可以实现的话就证明系统支持push方法 //这种方法是系统能力检测中的方法功能检测 var div = document.createElement( 'div' ); div.innerHTML = '<p></p>'; var arr = []; push…

在React中写一个Animation组件，为组件进入和离开加上动画/过度

问题在单页面应用中,我们经常需要给路由的切换或者元素的挂载和卸载加上过渡效果,为这么一个小功能引入第三方框架,实在有点小纠结.不如自己封装. 思路原理以进入时opacity: 0 --> opacity: 1 ,退出时opacity: 0 --> opacity: 1为例元素挂载时挂载元素dom 设置动画opacity: 0 --> opacity: 1 元素卸载时设置动画opacity: 0 --> opacity: 1 动画结束后卸载dom 组件设计为了使得组件简…

用react+redux写一个todo

概述最近学习redux,打算用redux写了一个todo.记录下来,供以后开发时参考,相信对其他人也有用. 代码代码请见我的github 组织架构如下图:…

使用React.js写一个类似单选框与复选框的功能

单选框 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <script…

[AST实战]从零开始写一个wepy转VUE的工具

为什么需要 wepy 转 VUE "转转二手"是我司用 wepy 开发的功能与 APP 相似度非常高的小程序,实现了大量的功能性页面,而新业务 H5 项目在开发过程中有时也经常需要一些公共页面和功能,但新项目又有自己的独特点,这些页面需求重新开发成本很高,但如果把小程序代码转换成 VUE 就会容易的多,因此需要这样一个转换工具. 本文将通过实战带你体验 HTML.css.JavaScript 的 AST 解析和转换过程如果你看完觉得有用,请点个赞~ AST 概览 AST 全称是叫抽象…

深入浅出React Native 3: 从零开始写一个Hello World

这是深入浅出React Native的第三篇文章. 1. 环境配置 2. 我的第一个应用将index.ios.js中的代码全部删掉,为什么要删掉呢?因为我们准备从零开始写一个应用~学习技术最好的方式就是自己动手写,看别人的代码一百遍的效果也不如自己写一遍来的效果大~ 我们要做的事情主要分成以下两步: 1. 创建组件 2. 将创建好的组件显示在app上打开index.ios.js文件,输入 var HelloWorld = React.createClass({ render: functio…

[闲的蛋疼系列]从零开始用TypeScript写React的UI组件(0)-先写一个Button??

0.咸鱼要说的一入前端深似海,咸鱼入海更加咸. 最近闲的蛋疼,手上年前的事也完成了7788了,借助[PG1]的话来说,我们要keep real. 咸鱼肯定不real 了,因为我们都活在梦里,所以咱们keep一下,学习一下菜鸟???是怎么给React写组件的. 咸话少说,咱们开始吧 1.搭一个React,TS的环境作为一条咸鱼,我肯定不会一步一步给你说清楚的. 要搭? 看这篇文章,反正我是照着这篇文干的文章链接:https://www.jianshu.com/p/71bbcdc8c1fc 然…

Python+Flask+Gunicorn 项目实战(一) 从零开始，写一个Markdown解析器 —— 初体验

(一)前言在开始学习之前,你需要确保你对Python, JavaScript, HTML, Markdown语法有非常基础的了解.项目的源码你可以在 https://github.com/zhu-y/markdown-toolkit 找到,最后的效果会像 http://yzhu.pythonanywhere.com 展示的一样. 本文分为三个部分: Python+Flask+Gunicorn 项目实战(一) 从零开始,写一个Markdown解析器 —— 初体验 Python+Flask+Gun…

用 nodejs 写一个命令行工具：创建 react 组件的命令行工具

用 nodejs 写一个命令行工具 :创建 react 组件的命令行工具前言上周,同事抱怨说 react 怎么不能像 angular 那样,使用命令行工具来生成一个组件.对呀,平时工作时,想要创建一个 react 的组件,都是直接 copy 一个组件,然后做一些修改.为什么不能将这个过程交给程序去做呢?当天晚上,我就仿照 angular-cli 的 api,写了一个生成 react 组件的命令行工具 rcli.在这里记录一下实现的过程. api 设计 0.1.0 版本的 rcli 参照 an…

React学习及实例开发（二）——用Ant Design写一个简单页面

本文基于React v16.4.1 初学react,有理解不对的地方,欢迎批评指正^_^ 一.引入Ant Design 1.安装antd yarn add antd 2.引入 react-app-rewired (一个对 create-react-app 进行自定义配置的社区解决方案) yarn add react-app-rewired --dev 3.把 package.json 里的scripts部分改为 "scripts": { "start": "…

案例实战之如何写一个webpack plugin

案例实战之如何写一个webpack plugin 1.写一个生成打包文件目录的file.md文件 // 生成一个目录项目目录的文件夹 class FileListPlugin { constructor(options) { this.options = options } apply(compiler) { compiler.hooks.emit.tap('fileListPlugin', (compilation) => { let assets = compilation.assets l…

五、React事件方法（自写一个方法（函数），然后用按钮onClick触发它、自写方法改变this指向3种写法、

上接:https://www.cnblogs.com/chenxi188/p/11782349.html 项目目录: my-app/ README.md node_modules/ package.json .gitignore public/ favicon.ico index.html manifest.json src/ componets/ Demo.js App.css App.js App.test.js index.css index.js logo.svg 一.自写一个方法(函数…

手写一个React-Redux，玩转React的Context API

上一篇文章我们手写了一个Redux,但是单纯的Redux只是一个状态机,是没有UI呈现的,所以一般我们使用的时候都会配合一个UI库,比如在React中使用Redux就会用到React-Redux这个库.这个库的作用是将Redux的状态机和React的UI呈现绑定在一起,当你dispatch action改变state的时候,会自动更新页面.本文还是从它的基本使用入手来自己写一个React-Redux,然后替换官方的NPM库,并保持功能一致. 本文全部代码已经上传GitHub,大家可以拿下来玩玩:…

Spring Security 实战干货：从零手写一个验证码登录

1. 前言前面关于Spring Security写了两篇文章,一篇是介绍UsernamePasswordAuthenticationFilter,另一篇是介绍 AuthenticationManager.很多同学表示无法理解这两个东西有什么用,能解决哪些实际问题?所以今天就对这两篇理论进行实战运用,我们从零写一个短信验证码登录并适配到Spring Security体系中.如果你在阅读中有什么疑问可以回头看看这两篇文章,能解决很多疑惑. 当然你可以修改成邮箱或者其它通讯设备的验证码登录. 2.…

Cordova webapp实战开发：（6）如何写一个iOS下获取APP版本号的插件？

上一篇我们学习了如何写一个Andorid下自动更新的插件,我想还有一部分看本系列blog的开发人员希望学习在iOS下如何做插件的吧,那么今天你就可以来看看这篇文字了. 本次练习你能学到的学习如何获取iOS当前版本号学习iOS下插件类的编写学习iOS下插件的配置学习iOS下插件的调用主要内容 APP中[检查更新]显示当前版本号插件类的编写在上一篇介绍Andorid插件时我们贴出了很多源码,这里也直接贴出代码,首先是iOS下插件的代码. 我们在Plugins下新建两个文件,一个头文件…

案例实战之如何写一个webpack loader

通过以下几个实例掌握webpack loader的写法 1.写一个多语言替换的loader 在index.js在页面上插入了一个{{title}}文本,我们需要在打包的时候将其替换成对应的多语言 function component() { let element = document.createElement('div') let str = 'hello webpack loader <h1>{{title}}</h1>' element.innerHTML = str el…

从零开始写一个npm包,一键生成react组件(偷懒==提高效率)

前言最近写项目开发新模块的时候,每次写新模块的时候需要创建一个组件的时候(包含组件css,index.js,组件js),就只能会拷贝其他组件修改名称 ,但是写了1-2个后发现效率太低了,而且极容易出错,所以自己写一个npm包来减少工作量,下面就一步一步来创建一个属于自己的npm仓库首先第一步创建一个package.json文件,打开终端,输入以下命令: npm init 然后会依次提示项目名称.版本.项目描述.入口文件...一直回车,直到出现Is this ok? (yes) ,然后输入ye…

React Native创建一个APP

React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用.在 JavaScript 中用 React 抽象操作系统原生的 UI 组件,代替 DOM 元素来渲染等. React Native的优点: 1.跨平台,兼容Web.iOS.Android三大主流平台 2.React调用原生控件,性能优于H5框架 3.更好的手势识别 4.实时部署更新,再也不担心应用市场审查缓慢设计理念:既拥有Native的用户…

React实战之Ant Design—Upload上传_附件上传

React实战之Ant Design—Upload上传_附件上传 Upload组件大家都在官方文档中看过了,但写的时候还是会遇到许多问题,一些新手看了文档后感觉无从下手,本文过多的简绍就不说了,直接看代码和注释,直接用就行我直接放在form表单中,因为实战中单个附件上传很少几,乎都在form表单中加入一个附件上传所以为了更好的应用,我直接就放在form表单中应用 import React, { PureComponent } from 'react'; import {Form, Button…

从零开始react实战:云书签-1 react环境搭建

总览篇:react 实战之云书签本篇是实战系列的第一篇,主要是搭建 react 开发环境,在create-react-app的基础上加上如下功能: antd 组件库按需引入 ,支持主题定制支持 less 语法,并使用 css-module 配置路由支持 http 请求配置 redux 注意:需要 node 版本大于 8.0. 创建 create-react-app 安装 npm install -g create-react-app 创建 react 应用 create-react-ap…

使用Ant Design写一个仿微软ToDo

实习期的第一份活,自己看Ant Design的官网学习,然后用Ant Design写一个仿微软ToDo. 不做教学目的,只是记录一下. 1.学习 Ant Design 是个组件库,想要会用,至少要知道React和ES6. Ant Design 官网:https://ant.design/index-cn 可以看看官网的实战教学:https://www.yuque.com/ant-design/course Ant Design Pro 一个比较完整的开源项目,看里面的东西可以学习挺多的:http…

react实战系列 —— React 的数据流和生命周期

其他章节请看: react实战系列数据流和生命周期如何处理 React 中的数据,组件之间如何通信,数据在 React 中如何流动? 常用的 React 生命周期方法以及开源项目 spug 中使用了哪些生命周期方法? 数据和数据流虽然也有很多静态网站,但人们使用的大多数网站都充满了随时间变化的数据. state 和 props 是 React 组件处理数据和彼此通信的两种主要方法. React 提供了两个数据相关的 api:state 和 props. 前面我们已经知道,不要直接修改 s…

怎样写一个webpack loader

div{display:table-cell;vertical-align:middle}#crayon-theme-info .content *{float:left}#crayon-theme-info .field{font-weight:bold}#crayon-theme-info .field,#crayon-theme-info .value{margin-left:5px}#crayon-theme-info .description.value{font-style:ital…