zl程序教程

react 入门教程

  • React Native基础&入门教程:调试React Native应用的一小步

    React Native基础&入门教程:调试React Native应用的一小步

    React Native(以下简称RN)为传统前端开发者打开了一扇新的大门。其中,使用浏览器的调试工具去Debug移动端的代码,无疑是最吸引开发人员的特性之一。 试想一下,当你在手机屏幕按下一个按钮,处理事件的代码就可以立即在浏览器的调试工具里进行断点调试,而且每当你对代码进行修改,界面便可以完成快速地重载,省去昂长的编译时间,这会是多么提高工作效率。

    日期 2023-06-12 10:48:40     
  • ReactiveCocoa入门教程:第二部分

    ReactiveCocoa入门教程:第二部分

    翻译自:http://www.raywenderlich.com/62796/reactivecocoa-tutorial-pt2 原文链接: ReactiveCocoa 是一个框架,它允许你在你的iOS程序中使用函数响应式(FRP)技术。加上第一部分的讲解,你将会学会如何使用信号量(对事件发出数据流)如何替代标准的动作和事件处理逻辑。你也会学到如何转换、分离和组合这些信号量。 在这里,也就

    日期 2023-06-12 10:48:40     
  • React-Admin Tutorial入门教程(一个React的管理后台框架)

    React-Admin Tutorial入门教程(一个React的管理后台框架)

    文档地址: https://marmelab.com/react-admin/Tutorial.html yarn create react-app test-admin cd test-admin/ yar

    日期 2023-06-12 10:48:40     
  • React 测试入门教程

    React 测试入门教程

    Todo项的初始状态("未完成"或"已完成")应该正确 点击一个Todo项,它就反转状态("未完成"变为"已完成",反之亦然) 点击删除按钮,该Todo项就被删除 点击添加按钮,会新增一个Todo项 三、官方测试工具库 我们知道,一个React组件有两种存在形式:虚拟DOM对象(即React.Component的实例)和真实DOM节点。官方测试工具库对这两种形式,都提供测试解决方案。

    日期 2023-06-12 10:48:40     
  • React 测试入门教程

    React 测试入门教程

    Todo项的初始状态("未完成"或"已完成")应该正确 点击一个Todo项,它就反转状态("未完成"变为"已完成",反之亦然) 点击删除按钮,该Todo项就被删除 点击添加按钮,会新增一个Todo项 三、官方测试工具库 我们知道,一个React组件有两种存在形式:虚拟DOM对象(即React.Component的实例)和真实DOM节点。官方测试工具库对这两种形式,都提供测试解决方案。

    日期 2023-06-12 10:48:40     
  • 从零开始的react入门教程(十一),react ref 详解,三种写法与 ref 转发(传递)

    从零开始的react入门教程(十一),react ref 详解,三种写法与 ref 转发(传递)

    壹 ❀ 引 在前面的文章中,我们介绍了react的状态提升,随之引出了redux以及context,其实都说到底都是为了方便管理react的状态,让数据交互与组件通信变得更为简单。我们知道,react属于单向数据流,属性方法都像瀑布的水往下层组件流动,子组件获取父组件的属性也很简单,一个props就能搞定。问题来了,那万一父组件需要获取子组件的属性方法?或者父组件需要直接操作子组件的DOM,这

    日期 2023-06-12 10:48:40     
  • 从零开始的react入门教程(十),快速上手react-redux,相对于redux它究竟简化了什么?

    从零开始的react入门教程(十),快速上手react-redux,相对于redux它究竟简化了什么?

    壹 ❀ 引 在前面两篇文章中,我们介绍了redux与context部分概念与基本用法,这里我们做个简单复习。 redux属于应用数据流框架,主要用于应用状态的管理,比如react中的state。其数据流为view-->action-->reducer-->store-->view,比如用户点击了一个按钮,本质触发的是store.dispatch(action),然后re

    日期 2023-06-12 10:48:40     
  • 从零开始的react入门教程(九),react context上下文详解,可能有点啰嗦,但很想让你懂

    从零开始的react入门教程(九),react context上下文详解,可能有点啰嗦,但很想让你懂

    壹 ❀ 引 我在从零开始的react入门教程(八),redux起源与基础用法一文中,介绍了redux的前辈Flux,以及redux关于单项数据更新的基本用法。我们在前文提到,相对Flux支持多个store,redux推荐唯一数据源,也就是使用一个全局Store去掌管所有数据。数据源虽然统一了,但我们要使用Store还是得把Store引入到需要的组件中,比如上文中的Counter组件与Summa

    日期 2023-06-12 10:48:40     
  • 从零开始的react入门教程(八),redux起源与基础用法

    从零开始的react入门教程(八),redux起源与基础用法

    壹 ❀ 引 我们在从零开始的react入门教程(七),react中的状态提升,我们为什么需要使用redux一文中介绍了react的状态提升,对于不同组件之间状态需要通信时,将状态提升至两个组件共有的最近父组件进行管理是官方较为推荐的做法。 但随之暴露的问题也非常明显,如果组件层级跨越较大,遥远的父组件将状态通知到目标组件时,可能需要通过多层组件进行数据传递,对于这些组件而言,数据传递很明显是没

    日期 2023-06-12 10:48:40     
  • 从零开始的react入门教程(七),react中的状态提升,我们为什么需要使用redux

    从零开始的react入门教程(七),react中的状态提升,我们为什么需要使用redux

    壹 ❀ 引 在前面的文章中,我们了解到react中的数据由props与State构成,数据就像瀑布中的水自上而下流动,属于单向数据流。而这两者的区别也很简单,对于一个组件而言,如果说props是外部传递进来的属性,那么State便是组件内部自身提供的属性。当然这个组件又可以将自己的State与props作为props继续传递给自己的子级,比如下图: 而对于props与State的通信,我们也

    日期 2023-06-12 10:48:40     
  • 从零开始的react入门教程(六),一篇文章理解react组件生命周期

    从零开始的react入门教程(六),一篇文章理解react组件生命周期

    壹 ❀ 引 学习任何一门框架,无论是vue、react亦或是angular,我们除了需要熟练掌握框架语法外,了解框架自身的生命周期也是至关重要的。一方面生命周期在面试中多多少少总是会提及,其次了解框架内部运转过程,对于帮助你写出符合预期的代码也是极有帮助。 但对于大多数刚接触一门框架的初学者而言,以react为例内部就存在数十个生命周期函数,它们分别代表什么含义,应该在何种场景去使用它,这些都

    日期 2023-06-12 10:48:40     
  • 从零开始的react入门教程(五),了解react中的表单,何为受控组件与非受控组件

    从零开始的react入门教程(五),了解react中的表单,何为受控组件与非受控组件

    壹 ❀ 引 我们在从零开始的react入门教程(四),了解常用的条件渲染、列表渲染与独一无二的key一文中介绍了react中常用的条件渲染操作,比如三元运算符,逻辑运算符等,结合react组件或者react元素,我们能做到很多视图层的切换效果。 除此之外我们也介绍了react中的渲染操作,不同于vue类似框架使用循环指令,react中直接使用数组API达到渲染元素元素块的操作;说到循环我们不得

    日期 2023-06-12 10:48:40     
  • 从零开始的react入门教程(四),了解常用的条件渲染、列表渲染与独一无二的key

    从零开始的react入门教程(四),了解常用的条件渲染、列表渲染与独一无二的key

    壹 ❀ 引 在从零开始的react入门教程(三),了解react事件与使用注意项一文中,我们了解了react中事件命名规则,绑定事件时对于this的处理,以及事件中可使用的e对象。那么这篇文章中我们来熟悉react中常用的条件渲染语法。 贰 ❀ 条件渲染 在开发中,我们常有根据一个变量值的真或假来决定渲染A或者B内容的情况,这种需求不管用三元或者if语句都能轻松实现,比如实现一个简单的登录是否

    日期 2023-06-12 10:48:40     
  • 从零开始的react入门教程(三),了解react事件与使用注意项

    从零开始的react入门教程(三),了解react事件与使用注意项

    壹 ❀ 引 在从零开始的react入门教程(二),从react组件说到props/state的联系与区别一文中,我们介绍了react组件的基本用法以及props与state的区别。其中react组件分为函数组件与class组件,函数组件一般比较简单,它的函数名首字母需要大写,接受外部传入的props并返回react元素,这是一个简单的函数组件。 function App(props) {

    日期 2023-06-12 10:48:40     
  • 从零开始的react入门教程(二),从react组件说到props/state的联系与区别

    从零开始的react入门教程(二),从react组件说到props/state的联系与区别

    壹 ❀ 引 在从零开始的react入门教程(一)一文中,我们搭建了第一个属于自己的react应用,并简单学习了jsx语法。jsx写法上与dom标签高度一致,当然我们也知道,本质上这些react元素都是React.createElement()的语法糖,通过编译,bable会将其还原成最原始的样子,比如如下代码效果相同: <div class="echo"></div>

    日期 2023-06-12 10:48:40     
  • 从零开始的react入门教程(一),让我们从hello world开始

    从零开始的react入门教程(一),让我们从hello world开始

    壹 ❀ 引 按照之前的计划,从这个月开始,我将由浅至深更新一些react相关的技术博文。由于我目前也是react新手一名,所以文章本质上也算自己学习历程的记录,倘若这些文章能帮助到一些人那就再好不过了。那么这一篇文章就作为一个新的开端,从零开始一起变得更强吧,本文开始。 贰 ❀ 准备工作 在学习基础知识之前,我们可以在本地搭建并运行一个react应用,便于后续学习时例子效果预览。请先确保电脑已

    日期 2023-06-12 10:48:40     
  • ReactJS入门教程

    ReactJS入门教程

    一、ReactJS简介React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web

    日期 2023-06-12 10:48:40