Category: Javascript /Jquery / React / Bootstrap / Web

React Hooks入门教程, React钩子入门, React钩子用法

    本教程将带你学习 如何使用React Hooks 如何定制自己的Hook   起步准备 要继续学习本教程,你应该基本了解: ES6(箭头函数,解构,类) React   项目安装 请确保已经配置好React开发环境,并且是最新版本的Node.js,再执行: npx create-react-app exploring-hooks  … Read More

轻量级“新颖”小巧的网页内容编辑器:ContentTools, A JS library for building WYSIWYG editors for HTML content.

  介绍 ContentTools是一个美观小巧的网页内容工具(一个JS库),具备所见即所得(WYSIWYG)的编辑器功能,只需几个简单的步骤,即可将ContentTools添加到任何HTML页面。如下图所示页面通过实时ContentTool的弹出层实现实时编辑功能。用小而美来形容它最好不过了!   Github地址 https://github.com/GetmeUK   特性 ContentTools是用于HTML页面的美观小巧的内容编辑器。它被设计为: 与框架无关的库不使用任何JavaScript框架(没有JQuery),但可以很好地使用它们。 灵活的ContentTools软件包由5个库组成,每个库或可以独立使用。 可扩展的软件包旨在易于扩展。 小巧完整的编辑器(JS,CSS,图像和图标字体)为241kb(压缩后为49kb)。   功能简介 ContentTools具有字体加粗、斜体、超链接、对齐、列表、表格、图片、视频、代码、撤销、重做、删除等功能   1、加粗显示… Read More

Javascript 箭头函数, 箭头函数基础知识, 深入理解箭头函数, JS箭头函数为何用?怎么用?何时用?

  定义 箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,arguments,super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。   语法   基础语法 (param1, param2, …, paramN) => { statements } (param1, param2, …,… Read More

React Hook 钩子检测外部点击, React Hook 钩子监控外部点击, react onClickOutside, react-click-outside-hook

    1. 使用组件 react-cool-onclickoutside   react-cool-onclickoutside 是一个React 钩子  ,当用户在目标组件区域之外单击时触发回调。这是UI交互设计(IxD)的有用逻辑,例如关闭下拉菜单,模态或工具提示等。帮助大家❤️。   特征 React监听基于React hook的外部点击  。 Support‍♀️支持多个引用,以涵盖更多用例。 ?使用  被动事件侦听  … Read More

React基础: React Hook 钩子入门,React Hook 钩子要用法, useEffect() 实例

  下面就来谈谈,怎样正确理解钩子,并且深入剖析最重要的钩子之一的useEffect()。内容会尽量通俗,让不熟悉 React 的朋友也能看懂。   一、React 的两套 API 以前,React API 只有一套,现在有两套:类(class)API 和基于函数的钩子(hooks) API。     任何一个组件,可以用类来写,也可以用钩子来写。下面是类的写法。 class Welcome… Read More

React报错: Uncaught SyntaxError: Unexpected token < in React

  我创建了一个index.html,就像: <!DOCTYPE html> <html lang="en"> <head> <title>React Example</title> <script crossorigin="anonymous" src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin="anonymous" src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script…

React.js 入门实例:AJAX处理, Form表单处理, 表单事件

  React AJAX React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取,当从服务端获取数据时可以将数据存储在 state 中,再用 this.setState 方法重新渲染 UI。 当使用异步加载数据时,在组件卸载前使用 componentWillUnmount 来取消未完成的请求。  … Read More

细数jQuery和React用法差别, jQuery转React, jQuery和React的区别, jQuery和React实例对比

  我也听说过React.js很好,最近花了一些时间玩它。既然我对React非常满意,我决定写一个关于这个主题的教程。   目标受众群:足够了解jQuery的人 在开始之前,我想澄清一下我的目标受众是谁。 在从未尝试过React的人们中,有些人对Backbone,Ember或Angular之类的前端JS框架感到满意,有些人非常了解JavaScript,有些人知道足够的jQuery可以解决。 对其中一些人有效的教程,对他一些可能就不是最佳的。   在本教程中,我针对的是我提到的第三组:了解jQuery的人。可能适合该类别的人员包括: 可以在HTML / CSS / jQuery中进行基本编码的设计师。 知道如何使用jQuery插件的WordPress开发人员。 刚完成在线基本HTML / CSS… Read More

浅谈React与jQuery的思维差异, React和jQuery的区别

为什么越来越多的互联网公司都在转向React.js去开发前端组件,除了性能因素外,很大一部分原因是因为用jQuery去写很复杂的DOM操作,后期代码会变得越来越难维护。现在大部分的 Web APP 都有一个特点:后端的Model层很简单,但是随着产品业务的拓展前端View却变得越来越复杂,这个时候如果还在用纯jQuery去写DOM操作将会变得很不直观,代码也会变的很臃肿进而变的越来越难以维护,下面就拿一个微博发送框的简单例子来展示一些React的简洁与强大。 注意: React并不适合所有项目,需要结合实际情况综合考虑 jQuery与React并不是一个层面上的东西,jQuery只是一个工具库,这里只是展示两种编程模式的思维差异 理解一个技术的思想比学会怎么用它更重要,同时我们还需要知道不同的技术间的区别的核心在哪,这样我们才能学会用合适的技术去解决合适的问题 这里的tweet box只是一个简化版的UI模型,仅用来说明jQuery和React的思维差异,并不具备发Twitter的功能 你也可以写出简洁的jQuery代码。但是你必须想出良好的代码结构,每次想要增加新功能的时候还需要特别注意是否影响代码的重构,使用React会帮助你团队内部拥有更好的代码结构,页面性能也会得到相应的提高   需要实现的效果 tweet box为空时,tweet button显示为灰色不可点击状态 tweet box下方显示还可以输入的字符数量… Read More

React.js 入门实例, React 零基础入门实例,React 优化 DOM 操作

  React.js 简价 React.js 是一个帮助你构建页面 UI 的库。如果你熟悉 MVC 概念的话,那么 React 的组件就相当于 MVC 里面的 View。如果你不熟悉也没关系,你可以简单地理解为,React.js 将帮助我们将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合、嵌套,就成了我们的页面。 一个组件的显示形态和行为有可能是由某些数据决定的。而数据是可能发生改变的,这时候组件的显示形态就会发生相应的改变。而 React.js 也提供了一种非常高效的方式帮助我们做到了数据和组件显示形态之间的同步。… Read More