react

教程简介 1、阅读对象 只要对 js 基础掌握不牢的都适合 2、教程难度 初级「但是你不一定知道」，本人水平有限，文章内容难免会出现问题，如果有问题欢迎指出，谢谢 正文 视频 视频地址： www.bilibili.com/video/BV1kA… 一、本系列课程大纲 1、课程来源 首先我们要知道本系列教程的来源，大概有这么两个主要的原因 1、和一些前端开发人员聊天「其中不乏多年开发经验的」，对 js 的基础掌握的其实并不好，知其然，不知其所以然 2、看了 kotlin、swift、还有后来的 flutter、dart 等，发现这些语言语法都是类 js 语法，搞定了 js 这些语言都不是事，并且搞定了 js 什么 vue、react node 等照样拿下 2、课程受众和学习方式 直接看图 3、课程讲解内容 少啰嗦，看图 4、课程讲解方式 本系列课程的讲解方式主要是视频+笔记的形式，由于本人也在工作，所以都是业余时间录视频+写笔记，所以可能是笔记先行视频可能会滞后「希望大家谅解」 这里回归一下主题 5 分钟编程指的是每节视频的时长在 5 分钟左右 二、教程共享 本系列教程会共享到我的博客和 github 上面，并且视频会发布在 B 站上，朋友们可以选择性的看视频「B 站」或笔记「电子书」或是视频+笔记「博客」 博客： tigerchain.github.io/ B站： space

　　自公司前后分离上手React以来，一个坑一个坑的踩，Class的全生命周期云里雾里，还么屡明白，就抱上了Hook的大腿不松手，确实爽到飞起。修改到Hook的过程基本比较顺畅，直接少了三分之一的代码，组件更容易封装，调试更方便，诸多优点在此不再赘述，已有各路大佬纷纷评价，此处贴上中文官方地址： React-Hook文档 。这里主要讲讲修改到一块关于 Unity 3D模型加载的踩坑记。 　　 背景：React 加载 Unity 3D模型 ，使用到一个插件 react-unity-webgl ，感兴趣的盆友可以自行查阅。 　　因为Class改Hook处理语法变动，逻辑代码基本不用怎么改动，所以基本没有阻力，但是当我把这块业务代码改成Hook时，跟模型交互时通信失败，无法驱动模型动作。百思不得其解，弄了俩测试页面，test_hook、test_class，只能debugger，一步一步调，发现一些端倪。 　　Class 有些初始化的代码 都写在了constructor(props){}，这个大家都明白，第一次加载页面的时候会走。hook呢，最外层是一个大方法，之前迁移的时候就写在方法里最顶部了，也没什么问题。加载模型第一句是 const unityContent = new UnityContent(参数1,参数2)；两个页面都能加载出来模型，但是跟断点发现hook页面的

CSS Modules 解决 react 项目 css 样式互相影响的问题 参考文章： （1）CSS Modules 解决 react 项目 css 样式互相影响的问题 （2）https://www.cnblogs.com/crazycode2/p/8593143.html 备忘一下。 来源： oschina 链接： https://my.oschina.net/u/4413947/blog/4479099

又介绍一个老朋友——instanceof。 对于值类型，你可以通过typeof判断，string/number/boolean都很清楚，但是typeof在判断到引用类型的时候，返回值只有object/function，你不知道它到底是一个object对象，还是数组，还是new Number等等。 这个时候就需要用到instanceof。例如： 上图中，f1这个对象是被Foo创建，但是“f1 instanceof Object”为什么是true呢？ 至于为什么过会儿再说，先把instanceof判断的规则告诉大家。根据以上代码看下图： Instanceof运算符的第一个变量是一个对象，暂时称为A；第二个变量一般是一个函数，暂时称为B。 Instanceof的判断队则是： 沿着A的__proto__这条线来找，同时沿着B的prototype这条线来找，如果两条线能找到同一个引用，即同一个对象，那么就返回true。如果找到终点还未重合，则返回false 。 按照以上规则，大家看看“ f1 instanceof Object ”这句代码是不是true？ 根据上图很容易就能看出来，就是true。 通过上以规则，你可以解释很多比较怪异的现象，例如： 这些看似很混乱的东西，答案却都是true，这是为何？ 正好，这里也接上了咱们上一节说的“乱”。 上一节咱们贴了好多的图片

原文： Atomic CSS-in-JS 时间：2020/04/27 作者： Sébastien Lorber 译者： ziven27 翻译时间：2020/05/10 译者： 国内大家都去搞 JS 去了，可以看到我们有可以与 REACT 抗衡的 VUE。却显见有类似 CSS-in-js, OOCSS，BEM，Atomic CSS ... 的 CSS 解决方案出现？这是为什么呢？ 随着 Facebook 和 Twitter 最近的产品技术方案的迭代更新，我们看到了一个新的流行趋势: Atomic CSS-in-JS。 在这篇文章中，我们将看到什么是原子CSS，它是如何与像 TailwindCSS 这样的 functional / utility-first CSS 之类技术方案的关系，以及哪些基于 react 框架的大厂是如何使用它的。 因为我不是这方面的专家，所以不要指望深入了解它的优缺点。我只是希望你能从对它的了解中有所启发。 注意: Atomic CSS 与 Atomic Design 设计无关。 译者注：Atomic CSS 是 CSS 代码的一种设计模式，Atomic Design 是对于设计资源和设计组织方式的一种设计理念。 什么是 atomic CSS? 大家可能听说过各种 CSS 解决方案，例如BEM，OOCSS ... < button class =

　　很多刚接触web前端的开发的新手小白，都会有这样的疑问，“零基础小白如何学习web前端?学习web前端的学习路线是什么?”。接下来，小编就带大家来了解一下这些问题，助力新手小白快速转变成为合格的web前端开发工程师。 　　随着互联网技术的发展和进步，前端开发工作已经变的越来越复杂，仅仅是罗列一份前端开发的学习列表就已经是一件艰巨的工作。 　　曾经只要会编写HTML、CSS和Javascript就能够找到一份前端开发的工作。而现在，web前端开发远远不止是简单编码。因为我们的互联网技术的不断发展，技术更新迭代迅速，企业也对web前端开发人员有了更多的要求。 　　结合一些新手小白的情况和目前市面上企业对于web前端开发人员的需求，千锋上海为大家分享一份web前端开发的学习路线。 　　1、前端页面重构。主要内容为PC端网站布局、HTML5+CSS3基础、webApp页面布局。学习目标是完成PC端网站布局，webApp页面布局，还要可以通过HTML5+CSS3的2D、3D等属性实现一些精美的动画效果。 　　2、JavaScript高级课程、PC端全栈项目开发。主要内容为原生JavaScript、面向对象进阶与ES5/ES6应用、JavaScript工具库自主研发、JQuery经典交互特效开发、HTTP协议、Ajax进阶与后端开发、前端工程化与模块化应用以及AngularJS等

一、前言 很多零基础的同学在学习前端开发的过程中，总是会迷失在繁杂的知识体系当中。 没有一个适合自己的学习路径，会导致学习效率低下，很多同学都是在较低的学习效率和不断的受挫中放弃学习的。 本手册专门为这些零基础的同学打造，手册从前端最基础的【网页重构】开始，通过平滑的学习曲线，为大家提供一个明确的学习路径，最终让您独立完成一个小型的学生管理系统。 为了让您达到最终的学习效果，本手册在最后几章添加了一些后端的知识，不过不用担心，这些只是一些入门级的node和数据库知识，内容简单易懂，绝对不会影响同学们的前端开发学习体验。 二、关于学习内容的说明 为什么选择Vue？ 前端的三大框架（React，Angular，Vue）是当前前端开发工程师必须掌握的技能，对于初学者来说，选择一个适合自己的框架是非常重要的，很多初学者会在框架选择上浪费自己宝贵的学习时间。这里针对国内行情，强烈推荐初学者从Vue学起，主要原因如下： 相对于React和Angular，国内使用Vue的公司较多，除非您已经有了自己心仪的公司，而且那家公司并不使用Vue。否则，从就业的角度，Vue是您最好的选择。 Vue相对于React和Angular，对前端初学者更友好，Vue相对于Angular要更容易入手，而React的生态体系对于新手也是一项艰巨的挑战。再有，Vue的中文文档相当完善

百度云盘：Python地理空间分析指南PDF高清完整版免费下载 提取码：0e23 内容简介 用非常流行的Python语言做地理空间分析； 学习高效、易学的地理空间分析指南； 书中含有典型且非常实用的开发案例，帮助读者快速掌握相关技能； 图文结合，将学习效率大大提高。 Python作为一种高级程序设计语言，凭借其简洁、易读及可扩展性日渐成为程序设计领域备受推崇的语言之一。 本书以地理空间分析为背景，介绍了Python在地理信息处理方面的应用技巧。全书共分为10章，分别介绍了Python与地理空间分析、地理空间数据、地理空间技术、Python的地理空间分析工具、Python与地理信息系统、Python与遥感、Python与高程数据、Python与地理空间高级建模、实时数据、综合应用等内容。 本书内容结构清晰，示例完整，适合希望了解测绘数字化和分析的读者，也适合想使用Python进行空间地理分析、建模和GIS分析的开发人员及研究人员参考阅读。 作者简介 Joel Lawhead 目前是NVision公司的CIO，该公司是业内屡获殊荣的地理信息集成和传感工程服务提供商。他还获得了管理专业人员资格认证（Project Management Professional，PMP)，地理信息专业资格认证(certified GIS Professional ，GISP)。

这篇文章是前端自动化测试系列的开始，自动化测试系列会从理论走向实践，真正带领大家学会使用前端自动化测试框架，并能在业务中落地。 看完整个系列，还不会使用自动化测试工具为生产提效，请来找我！ 点赞数过一百，下周更新前端自动化测试与 React 的结合，如何在 React 项目中落地，欢迎大家多多点赞评论收藏！你们的赞赏是我写作最大的动力！ 之前发沸点说掘金发文只发精品文，阅读量最少 3k，看看这次行不行。 悄悄说一句，文末有福利！ 众所周知的原因，前端作为一种特殊的 GUI 软件，做自动化测试困难重重。在快速迭代，UI 变动大的业务中，自动化测试想要落地更是男上加男 :dog:。 近期的学习过程中，翻阅了众多前端自动化测试相关的文章， 「 大多数都在讲如何使用自动化测试框架对前端代码进行测试，很少讲解为什么要引入自动化测试，引入自动化测试有哪些好处，哪些项目适合引入自动化测试 」 ，但这些才是真正我们想要知道的。 考虑到各位读者爸爸们可能没有接触过自动化测试的内容，这篇文章就从基本概念和基础用法入手，为大家讲解自动化测试的内容。 开始之前，先进行一下前戏（可能比较长，不喜欢的可以快进 :dog:）： 情景还原 小王是国内一家大厂的前端开发。就在述职前一周，产品经理给了一个需求，要求在老项目上加上新的功能。 小王打开老项目代码，定睛一看，心头一紧 —— 要改的组件已经长达 800 多行

好在之前接触过 flux，对于理解 vuex 还是很有帮助的。react 学到一半，后来因为太忙，就放弃了，现在也差不多都忘记了。不过感觉 vuex 还是跟 flux 还是有点区别的。 对于很多新手来说，只是阅读文档是不好消化，我的建议是看看 vuex 的实例，通过研究实例来学习vuex。这样就会好理解多了。如果还是不能理解，最好办法就是先把store 的四个属性：state， getters, mutations, actions 记下来，然后再分析四个属性的特点，什么地方会用到，是怎样连接在一起的？通过这样问自己问题来进行学习。 简单来说，vuex 就是使用一个 store 对象来包含所有的应用层级状态，也就是数据的来源。当然如果应用比较庞大，我们可以将 store 模块化，也就是每个模块都有自己的 store。分割方式见如下的代码： 从上面的代码我们也可以看出，一个 store 有四个属性：state， getters, mutations, actions。下面我将从这四个属性开始讲。 1、State 先来讲state。state 上存放的，说的简单一些就是变量，也就是所谓的状态。没有使用 state 的时候，我们都是直接在 data 中进行初始化的，但是有了 state 之后，我们就把 data 上的数据转移到 state 上去了。当一个组件需要获取多个状态时候