博客专栏  >  前端   >  React 教程

React 教程

DEMO齐全,附github:https://github.com/qq20004604/react-demo 特别适合学过 Vue 的人上手阅读查看。

关注
1 已关注
29篇博文
  • 聊聊React的一些玩法(上:工具篇)

    1、简化写法 我们在写 React 组件时,参考官方文档写法,一要声明 state,二要绑定函数的 this,常规写法如下: class DEMO extends React.Componen...

    2018-03-25 00:47
    147
  • React-router(11)路由配置

    11、路由配置 DEMO地址 参考 9.routeConfigTable.js 简单来说,就是有一个对象,如下: const RouteConfig = [ { ...

    2018-03-04 22:44
    277
  • React-router(10)登录拦截

    10、登录拦截 DEMO地址 参考 8.needLogin.js 登录拦截说起来比较高大上,其实很简单。 需要组件: 登录功能组件; 受保护组件(需要登录后才能访问); 受保护组件...

    2018-03-04 22:43
    1082
  • React-router(9)重定向

    9、重定向 DEMO地址 参考 7.redirect.js 重定向有两种方式,第一种是通过 <Redirect> 标签实现,第二种是通过编程式导航方式实现。 ...

    2018-03-04 22:42
    363
  • React-router(8)Link 标签 to 属性为对象时(路由信息传值)

    8、Link 标签 to 属性为对象时(路由信息传值) DEMO地址 参考 6.routeInfo.js 在组件里,每个组件的路由数据,都是各自独立的。 在之前分析中,已知: ma...

    2018-03-04 22:42
    250
  • React-router(7)path 和 url 的区别

    7、path 和 url 的区别 在 match 属性中,有 path 和 url 属性,大部分时间他们是一样的,那么区别是什么呢? 假如路由匹配路径是 /Params/2/:myParams,实...

    2018-03-04 22:20
    131
  • React-router(6)父组件传 【值】 or 【函数】 给子组件

    6、父组件传 【值】 or 【函数】 给子组件 DEMO地址 参考 5.fromParentComponent.js 如果你已经熟悉了前面的内容,会知道以下结论: 路由传参是通过 p...

    2018-03-04 22:19
    252
  • React-router(5)params 路由传参

    5、参数 DEMO地址 参考 4.params.js React路由取参数,有两种: ?a=1 :这种属于 search 字符串,在 location.search 里取值; /a/...

    2018-03-04 22:19
    857
  • React-router(4)props 路由信息

    4、props DEMO地址 参考 3.props.js react-router 的路由信息,都存储在组件的 props 里。 之所以是存在 props 里,是因为我们写在父组件里的...

    2018-03-04 22:18
    450
  • React-router(3)BrowserRouter 和 HashRouter(哈希地址和普通地址)

    3、BrowserRouter 和 HashRouter 前两节的DEMO,都是 HashRouter,而非 BrowserRouter ,二者有所不同。 以下解释的前提是你要懂什么叫 hash ...

    2018-03-04 22:10
    726
  • React-router(2)路由嵌套

    2、路由嵌套: 参考 2.routingNested.js DEMO地址 还是以上一节上面那个 DEMO 为示例。 毫无疑问,我们肯定会面临路由嵌套的问题,即在顶级路由匹配到组...

    2018-03-04 22:03
    277
  • React-router(1)基础用法

    0、参考文献 React Router 4 简易入门 一个中文文档,但不确定是否是官方的,例子比较多 初探 React Router 4.0 这个对标签的说明比较详细 react-router...

    2018-03-04 22:01
    177
  • React(17)异步组件

    26、异步组件 当在React里使用异步组件时,核心知识是两个: webpack 如何异步加载其他模块:通过 require(['xxx'], function(module){})来实现; R...

    2018-02-12 18:21
    575
  • React(16)包裹标签 React.Fragment

    24、包裹标签 React.Fragment 在 Vue 里,我们会用 <template></template> 标签来包裹一些不能有父容器...

    2018-02-12 18:20
    1144
  • React(15)ref

    23、ref 用过 Vue 的同学,在使用 React 的 ref 时,注意不要混淆。 在 Vue 中,ref 绑定的 DOM 元素,可以直接在组件实例里,通过 this.$refs.xxx 来获...

    2018-02-12 18:20
    126
  • React(14)JSX 的一些语法说明

    22、JSX 【1】标签名可以是对象的属性(前提对象属性是一个组件) 这种情况下,对象和属性的首字母,可以不大写(但 建议大写 ,以作区分) let MyDom = { my() {...

    2018-02-12 18:19
    93
  • React(13)style 和 class

    20、style 写法 JSX里,写 style 属性,有几点需要注意: 以 k-v (对象)形式来写 style 属性(如果直接写在 html 标签里,容易以为是双大括号,事实上还是单大括号)...

    2018-02-12 18:19
    132
  • React(12)组合(类似 Vue 组件的插槽)和继承

    18、组合(类似 Vue 组件的插槽) 在Vue中,假如我们需要让子组件的一部分内容,被父组件控制,而不是被子组件控制,那么我们会采用插槽的写法 <slot>&l...

    2018-02-12 18:18
    210
  • React(11)组件通信

    17、组件通信 这个很好理解,我们开发常面对几种情况: 子组件 需要使用 父组件 的值:通过标签传入,props取值,如:<Status temperaature={this.st...

    2018-02-12 18:18
    114
  • React(10)React表单元素应用方法大全

    16、表单 总结写前面 值的改变,通过 onChange 事件触发(包括文字输入框、radio、checkbox); 选中与否,通过设置 HTML 元素的 checked 等于一个符合要求的 s...

    2018-02-12 18:17
    109

webpack3
167323
Vuejs入门
19120934
前端的小玩意
3756395
img博客搬家
img撰写博客
img发布 Chat
img专家申请
img意见反馈
img返回顶部