前端
天水一方_sky
这个作者很懒,什么都没留下…
展开
-
React官方文档—1. 安装
InstallationReact 可被灵活地运用在各种项目中。你可以用它创建新的应用程序,也可以逐渐地将其加入到现有的代码库中而无需重写。这里有几种你马上能上手的方式:尝试 React创建新应用添加 React 到现有应用尝试 React如果你只是想简单尝试下 React,可以使用 CodePen. 首先试试这个 Hello World 示例代码。转载 2018-01-14 20:12:13 · 433 阅读 · 0 评论 -
SVG.js之Elements
Element is the base prototype wrapping all elements (or nodes for that matter) in SVG.js. An extra level of refinement is added with SVG.Shape. Every element that can take a fill and/or stroke attribu转载 2018-02-01 20:37:51 · 823 阅读 · 1 评论 -
React Router --1. 简介
简介React Router 是一个基于 React 之上的强大路由库,它可以让你向应用中快速地添加视图和数据流,同时保持页面与 URL 间的同步。为了向你说明 React Router 解决的问题,让我们先来创建一个不使用它的应用。所有文档中的示例代码都会使用 ES6/ES2015 语法和语言特性。不使用 React Routerimport React from 'react'import转载 2018-01-18 23:08:59 · 190 阅读 · 0 评论 -
React Router --2. 1 路由配置
路由配置路由配置是一组指令,用来告诉 router 如何匹配 URL以及匹配后如何执行代码。我们来通过一个简单的例子解释一下如何编写路由配置。import React from 'react'import { Router, Route, Link } from 'react-router'const App = React.createClass({ render() { re原创 2018-01-18 23:10:01 · 247 阅读 · 0 评论 -
React Router--2.2 路由匹配原理
路由匹配原理路由拥有三个属性来决定是否“匹配“一个 URL:嵌套关系 和它的 路径语法它的 优先级嵌套关系React Router 使用路由嵌套的概念来让你定义 view 的嵌套集合,当一个给定的 URL 被调用时,整个集合中(命中的部分)都会被渲染。嵌套路由被描述成一种树形结构。React Router 会深度优先遍历整个路由配置来寻找一个与给定的 URL 相匹配的路由。路径语法路由路径是匹配一原创 2018-01-18 23:11:28 · 797 阅读 · 0 评论 -
React Router--2.3 Histories
HistoriesReact Router 是建立在 history 之上的。 简而言之,一个 history 知道如何去监听浏览器地址栏的变化, 并解析这个 URL 转化为 location 对象, 然后 router 使用它匹配到路由,最后正确地渲染对应的组件。常用的 history 有三种形式, 但是你也可以使用 React Router 实现自定义的 history。browserHist转载 2018-01-18 23:12:43 · 300 阅读 · 0 评论 -
React Router--2.4 默认路由(IndexRoute)与 IndexLink
默认路由(IndexRoute)与 IndexLink默认路由(IndexRoute)在解释 默认路由(IndexRoute) 的用例之前,我们来设想一下,一个不使用默认路由的路由配置是什么样的:Router> Route path="/" component={App}> Route path="accounts" component={Accounts}/> Route p转载 2018-01-18 23:13:44 · 1878 阅读 · 0 评论 -
React Router--3.1 动态路由
动态路由React Router 适用于小型网站,比如 React.js Training,也可以支持 Facebook 和 Twitter 这类大型网站。对于大型应用来说,一个首当其冲的问题就是所需加载的 JavaScript 的大小。程序应当只加载当前渲染页所需的 JavaScript。有些开发者将这种方式称之为“代码分拆” —— 将所有的代码分拆成多个小包,在用户浏览过程中按需加载。对于底层转载 2018-01-18 23:14:48 · 574 阅读 · 0 评论 -
React Router--3.2 跳转前确认
跳转前确认React Router 提供一个 routerWillLeave 生命周期钩子,这使得 React 组件可以拦截正在发生的跳转,或在离开 route 前提示用户。routerWillLeave 返回值有以下两种:return false 取消此次跳转return 返回提示信息,在离开 route 前提示用户进行确认。你可以在 route 组件 中引入 Lifecycle mixin 来转载 2018-01-18 23:15:33 · 1778 阅读 · 0 评论 -
React Router--3.3 服务端渲染
服务端渲染服务端渲染与客户端渲染有些许不同,因为你需要:发生错误时发送一个 500 的响应需要重定向时发送一个 30x 的响应在渲染之前获得数据 (用 router 帮你完成这点)为了迎合这一需求,你要在 Router> API 下一层使用:使用 match 在渲染之前根据 location 匹配 route使用 RoutingContext 同步渲染 route 组件它看起来像一个虚拟的 Jav转载 2018-01-18 23:17:52 · 240 阅读 · 0 评论 -
React Router--3.4 组件生命周期
组件生命周期在开发应用时,理解路由组件的生命周期是非常重要的。 后面我们会以获取数据这个最常见的场景为例,介绍一下路由改变时,路由组件生命周期的变化情况。路由组件的生命周期和 React 组件相比并没有什么不同。 所以让我们先忽略路由部分,只考虑在不同 URL 下,这些组件是如何被渲染的。路由配置如下:Route path="/" component={App}> IndexRoute com转载 2018-01-18 23:18:42 · 791 阅读 · 0 评论 -
JavaScript操作SVG的一些知识
前阵子学习了一下SVG(Scalable Vector Graphics),希望能借此弥补自己在图形艺术上的不足,当然最后也没有得到什么提高,不过也扩充了一些网页前段技术知识。通过做了一些小的设计项目,也发现SVG可以弥补一些HTML元素的不足,比如倾斜、弧线、动画、复用等等。虽然SVG和HTML一样都属于XML的一种方言,一些基本的JavaScript对HTML的DOM操作都适用于SVG转载 2018-01-31 22:03:43 · 1678 阅读 · 0 评论 -
用CSS给SVG <use>的内容添加样式
SVG图形的一个最常见用例是图标系统,其中最常用的SVG sprite技术就是使用SVG 元素在文档中任意位置“实例化”图标。使用元素实例化图标或任何其它的SVG元素或图像,给元素添加样式时经常会碰到一些问题。这篇文章的目的是尽可能给你介绍一些方法来解决:使用引入的内容添加样式受限的问题。但是在开始之前,我们先快速浏览一下SVG的主要结构和分组元素,然后慢慢进入use的世界中,以及转载 2018-01-31 21:46:01 · 11950 阅读 · 0 评论 -
React学习记录 — 1. 安装
尝试 React在线尝试 React 或设置你的本地开发环境。在线如果你只是想玩玩 React,你可以使用在线的代码演示场。 在 CodePen 或CodeSandbox 上尝试 Hello World 模板。最小化的 HTML 模板如果你喜欢使用自己的文本编辑器,你也可以 下载这个 HTML 文件 ,编辑它,然后从浏览器的本地文件系统中打开转载 2018-01-30 22:12:31 · 259 阅读 · 0 评论 -
React官方文档—2. Hello World
Hello World尝试React最简单的方法是使用CodePen上的Hello World例子。如果你不想安装任何东西,可以在浏览器中打开它,然后跟着尝试我们接下来的例子。如果你更愿意使用本地开发环境,可以查看安装页面 。一个最简单的React例子如下:ReactDOM.render( h1>Hello, world!h1>, document.getE转载 2018-01-14 21:09:12 · 208 阅读 · 0 评论 -
React官方文档—3.JSX 简介
我们来观察一下声明的这个变量:const element = h1>Hello, world!h1>;这种看起来可能有些奇怪的标签语法既不是字符串也不是HTML.它被称为 JSX, 一种 JavaScript 的语法扩展。 我们推荐在 React 中使用 JSX 来描述用户界面。JSX 乍看起来可能比较像是模版语言,但事实上它完全是在 JavaScript 内部实现的原创 2018-01-14 21:11:08 · 268 阅读 · 0 评论 -
React官方文档—4.元素渲染
元素渲染元素是构成 React 应用的最小单位。元素用来描述你在屏幕上看到的内容:const element = h1>Hello, worldh1>;与浏览器的 DOM 元素不同,React 当中的元素事实上是普通的对象,React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致。注意:初学者很可能把元素转载 2018-01-14 21:12:42 · 180 阅读 · 0 评论 -
React官方文档—5.组件 & Props
组件 & Props组件可以将UI切分成一些的独立的、可复用的部件,这样你就只需专注于构建每一个单独的部件。组件从概念上看就像是函数,它可以接收任意的输入值(称之为“props”),并返回一个需要在页面上展示的React元素。函数定义/类定义组件定义一个组件最简单的方式是使用JavaScript函数:function Welcome(props) {转载 2018-01-14 21:14:17 · 226 阅读 · 0 评论 -
React官方文档—6.State & 生命周期
参考该例子。到目前为止我们只学习了一种方法来更新UI。我们调用 ReactDOM.render() 方法来改变输出:function tick() { const element = ( div> h1>Hello, world!h1> h2>It is {new Date().toLocaleTimeString()}.h2>转载 2018-01-14 21:15:56 · 414 阅读 · 1 评论 -
React官方文档—7.事件处理
事件处理React 元素的事件处理和 DOM元素的很相似。但是有一点语法上的不同:React事件绑定属性的命名采用驼峰式写法,而不是小写。如果采用 JSX 的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM元素的写法)例如,传统的 HTML:button onclick="activateLasers()"> Activate Laser转载 2018-01-14 21:17:02 · 321 阅读 · 0 评论 -
React官方文档—8.条件渲染
条件渲染在 React 中,你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。React 中的条件渲染和 JavaScript 中的一致,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI。先来看两个组件:function UserGreeti转载 2018-01-14 21:18:17 · 227 阅读 · 0 评论 -
React官方文档—9.列表 & Keys
列表 & Keys首先,让我们看下在Javascript中如何转化列表如下代码,我们使用map()函数让数组中的每一项翻倍,我们得到了一个新的数列doubledconst numbers = [1, 2, 3, 4, 5];const doubled = numbers.map((number) => number * 2);console.log(double转载 2018-01-14 21:19:12 · 464 阅读 · 0 评论 -
React官方文档—10.表单
表单HTML表单元素与React中的其他DOM元素有所不同,因为表单元素生来就保留一些内部状态。例如,下面这个表单只接受一个唯一的name。form> label> Name: input type="text" name="name" /> label> input type="submit" value="Submit" />form>转载 2018-01-14 21:20:11 · 277 阅读 · 0 评论 -
Sass学习笔记 — 1. 如何安装Sass
安装Sass和Compasssass基于Ruby语言开发而成,因此安装sass前需要安装Ruby。(注:mac下自带Ruby无需在安装Ruby!)window下安装SASS首先需要安装Ruby,先从官网下载Ruby并安装。安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量。如下图:安装完成后需测试转载 2018-01-30 21:39:28 · 411 阅读 · 0 评论 -
React Router--3.5 在组件外部使用导航
在组件外部使用导航虽然在组件内部可以使用 this.context.router 来实现导航,但许多应用想要在组件外部使用导航。使用Router组件上被赋予的history可以在组件外部实现导航。// your main file that renders a Routerimport { Router, browserHistory } from 'react-router'import r转载 2018-01-18 23:19:35 · 643 阅读 · 1 评论