React学习笔记

React学习笔记（一）：创建react项目并结合elementUI

创建过程命令行安装全局create-react-app脚手架工具npminstall-gcreate-react-app在工作目录下创建项目create-react-appmy-demo进入项目目录cdmy-demo启动项目npmstart这样，react项目就创建完成了,接下来安装elementui组件。首先是安装npmielement-react--save安装必要的主题包npminstall
濮家大少·2020-09-11 23:01

React学习笔记（4）---react属性与状态

1.属性的含义和用法用this.props引用属性用法：1》.键值对式：？可以是{。。。}或字符串“”，数组{[...]},或变量{val}2》.展开对象式：varprops={one:"123",two:333}3》.调用setProps式;很少用到vari=React.render(,document.body);i.setProps({name:"123"})实例：varstyle={col
thystar·2020-09-11 10:12

react学习笔记一-----react前端框架的初步搭建

前言本人也是新手，刚开始研究学习react初步搭建一个页面框架，没有用到特别高深的技术，其实是不会呀！哈哈仅仅作为学习的记录，有写的不好的地方请见谅，如果有错误或者更好的建议可以留言，大家一起学习。该笔记会不断更新，但是由于工作原因，可能更新的较慢，见谅。正文学习过程就是官方文档、各种案例尝试写了一遍react配置和安装方式：create-react-app采用的是create-react-app
sanguing·2020-08-25 05:51

react学习笔记（四）[译] React 16.6 懒加载(与预加载)组件

前言最近在看react官方文档，见识了es6import()动态加载和React.lazy()懒加载函数，很想写一篇博客记录心得，然在掘金上浏览到一篇与此相关的技术译文，写的挺棒，把我没有考虑到的应用点都写出来了，特转发该译文https://juejin.im/post/5c31a45df265da61193bfc7e
harmsworth2016·2020-08-24 00:46

React学习笔记

React优点：完全由js实现，组件化；虚拟DOM：达到组建高效更新的目的；diff算法：进行虚拟DOM和DOM的对比，treediff;componentdiff,elmentdiff;1、React项目创建:首先安装node.jsnpminstall–gcreat-react-appcreat-react-app项目名cd项目名npmstartmanifest.json指定了开始页面index
zzw_99·2020-08-23 18:15

React学习笔记_Redux-Saga

Redux-Saga学习笔记一、Redux-Saga介绍redux-saga旨在于更好、更易地解决异步操作（action）redux-saga相当于在Redux原有数据流中多了一层，对Action进行监听，捕获到监听的Action后可以派生一个新的任务对state进行维护二、于redux-thunk比较：相同点：可以处理异步操作和协调复杂的dispatch不同点：Sagas是通过Generator
chenshiying007·2020-08-22 17:13

React学习笔记（三）：引用（Refs）& DOM

概述：引用（Refs）提供了一个获得DOM节点或者创建在render方法中的React元素的方法；在典型的React数据流中，props是唯一的父组件与它们的子元素的通信方式。更改子元素，你需要使用新的props去重新渲染子元素。但是在一些情况下你现在典型数据流之外强制的更改元素。被更改的子元素可能是一个React组件的实例，或者是一个DOM元素。对所有这些情况，React提供了一种特殊方法：Re
Kant3·2020-08-22 10:55

React学习笔记 之 styled.components（一）

（零）目录动机：介绍了styled.components的“禅”，对了解这个工具很有用下载：没得说上手：介绍了styledComponetns的基本使用方式：怎样创建样式组件、传递props、通过props为组件做适配、怎样为任意（eg.第三方）组件添加样式、扩展样式、加入额外的props、如何使用动画，最后介绍了对ReactNative的支持。（一）动机来自MaxStoiber的一次演讲，摘要如
Kant3·2020-08-22 10:55

React学习笔记（四）：不受控制的（Uncontrolled）组件

概述：在大多数情况下，都建议使用受控制的组件去实现表单，在一个受控制的组件中，表单数据被React组件所处理。而它的替代就是不受控制的组件——表单数据被DOM自己处理。（一）不受控制的组件创建不受控制的组件，我们不再对每次state更新创建事件处理函数——可以使用引用（ref）从DOM取得数据classNameFormextendsReact.Component{constructor(props
Kant3·2020-08-22 10:55

React学习笔记--JS部分

一，JS部分1，Array(9).fill(null)--定义一个为9的数组，默认填充null2，stringObject.slice(start,end)arrayObject.slice(start,end),与string对象的用法相似，返回一个新的数组。start：要抽取的片断的起始下标。如果是负数，则该参数规定的是从字符串的尾部开始算起的位置。也就是说，-1指字符串的最后一个字符，-2指
yzx会游泳的鱼·2020-08-18 23:28

React学习笔记（5）--事件

1.事件处理函数的使用组件：React自有方法用户定义方法事件处理函数可以接受event参数；如之前用过的：//监听内容的变化并且记录在状态中handleChange:function(event){this.setState({inputText:event.target.value});},//添加提交按钮并打印结果handleSubmit:function(){console.log("re
thystar·2020-08-18 22:22

React学习笔记_realword

一、normalizr扁平化数据保持状态扁平化API经常会返回嵌套资源。这在Flux或基于Redux的架构中处理起来会非常困难。我们推荐使用normalizr之类的库将数据进行扁平化处理，保持状态尽可能地扁平化。例子:典型的API调用返回数据：文章信息文字信息中包含作者信息、评论。article:usersandcomments{"id":"123","author":{"id":"1","nam
chenshiying007·2020-08-18 21:54

React学习笔记一

我是通过scriptsrc的方式引入的react的相关文件，本次学习顺序按照《React快速上手开发》一书的顺序学习的，本篇博客笔记地址：http://note.youdao.com/noteshare?id=09c72e73de42ff99a65977eaf4db892e&sub=60C0A66521F9494DA5A784A2A6E9877E一、通过scriptsrc的方式引入所需的js文件1
ailong3046·2020-08-18 19:01

【react学习笔记】项目配置(typeScript)

目录使用cra创建项目配置路径别名路径代码提示webpack识别别名css预处理器配置sass配置less配置sass文件自动导入配置Mobx配置react-router配置antdantd自定义主题参考使用cra创建项目在项目中使用tsnpxcreate-react-app项目名--templatetypescript为什么使用cra呢？因为它会自动安装并配置ts相关的包，以及jest测试包等常
ajh99990·2020-08-13 12:55

React学习笔记_export和import总结

强力推荐nodejs视频react视频export和import总结一、ES6的模块化的基本规则或特点每一个模块只加载一次，每一个JS只执行一次，如果下次再去加载同目录下同文件，直接从内存中读取。一个模块就是一个单例，或者说就是一个对象；每一个模块内声明的变量都是局部变量，不会污染全局作用域模块内部的变量或者函数可以通过export导出一个模块可以导入别的模块lib.js//导出常量exportc
chenshiying007·2020-08-12 17:03

React学习笔记之二：认识index.js

2.index.js先创建一个react工程create-react-appfirst-reactcdfirst-reactnpmstart我们打开目录下的index.js文件，从入口文件开始认识react//index.jsimportReactfrom'react';//ReactDom用于页面渲染importReactDOMfrom'react-dom';//index.css用于处理页面样
月半叫做胖·2020-08-12 12:01

react学习笔记

React.js-第1天1.React简介React起源于Facebook的内部项目，因为该公司对市场上所有JavaScriptMVC框架，都不满意，就决定自己写一套，用来架设Instagram（照片交友）的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。Angular12009年谷歌MVC不支持组件化开发由于React的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简
jianlu_blet·2020-08-12 11:59

React学习笔记(一)：基础

React学习笔记(一)：基础创建react项目1、安装react的脚手架，全局安装一次即可cnpminstall-gcreate-react-app2、使用手脚架创建项目，在要创建项目的目录下输入create-react-app
weixin_43943881·2020-08-12 00:52

React学习笔记(五)：路由

React学习笔记(五)：路由这篇文章并不是一下子告诉你怎么做，而是一个学习过程，会不停的改造路由。
weixin_43943881·2020-08-12 00:52

React学习笔记

1.React核心概念组件化虚拟DOMJSX2.起步初始化及安装命令行下面yarninit-yyarnaddreactreact-dom@babel/standalone3.JSXHTML语言直接写在javascript语言中，这就是JSX语法，它允许HTML和JavaScript的混写https://reactjs.org/docs/jsx-in-depth.html官方文档3.1环境配置（JS
weixin_42050791·2020-08-12 00:01

react学习笔记 item9 ---双向绑定（mixin）

我们知道在angular中数据时双向绑定的；而在react中，数据是向一个方向传递：从拥有者到子节点。也就是我们说的单向数据绑定。如果在react中要实现双向数据绑定，就得需要借助插件。React.addons是为了构建React应用而放置的一些有用工具的地方，其中包含了一些有用的插件，其中就有用于简化用户表单输入数据和组件state之间的双向数据绑定——LinkedStateMixin。要使用这
诗渊·2020-08-11 18:14

11.26-11.27 React学习笔记

11.26注意：React的首字母必须是大写，不然浏览器会把组件当作普通标签出现错误。importReactfrom’react’//导入React//创建并且暴露这个组件exportdefaultfunctionHello(props){console.log(props)return这是Hello组件---(props.name)---(props.age)---(props.gender)}
Sitwoold·2020-08-03 13:43

React学习笔记（三）——React源码

3.1初步React源码的组织结构如下：其中renderers是React代码的核心部分，包含了大部分功能的实现。其结构如下：3.2VirtualDOM模型该模型负责VirtualDOM底层框架的构建工作，它拥有一整套的VirtualDOM标签，并负责虚拟节点及其属性的构建、更新、删除等工作。3.2.1创建React元素创建过程如下：constNav,Profile;//输入（JSX）consta
wuqingdeqing·2020-08-03 08:33

React学习笔记(六)：在react中使用AntD

React学习笔记(六)：在react中使用AntD官方文档：https://ant.design/docs/react/use-with-create-react-app-cn基础使用一、安装AntD
weixin_43943881·2020-08-03 08:49

React学习笔记（一）——环境搭建&项目基本目录

一、React环境搭建1.安装node.js（通过命令行node-v查看当前node.js版本）（1）普通安装方式：node.js官网（2）多版本安装方式：nvm安装2.安装npm（通过命令行npm-v查看当前npm版本，一般安装node.js会自动安装npm）由于国内使用npm可能会比较慢，推荐使用阿里的npm镜像地址，在cmd命令行中输入如下命令即可：npmconfigsetregistryh
@xiaomajia·2020-07-30 05:25

React学习笔记(八) 虚拟DOM与Diff算法

1、虚拟DOM（1）什么是虚拟DOM我们先来回顾一下什么是DOM？DOM是一个用于表示HTML文档结构的树，实际上它是一个JavaScript对象树上的每一个节点代表一个HTML元素，每个HTML元素拥有大量的属性、方法和事件，是一个十分复杂的对象所谓的虚拟DOM就是用于表示真实DOM结构的一个JavaScript对象，它与真实DOM之间存在一个映射关系每个React元素对应一个HTML元素，但是
wsmrzx·2020-07-30 05:02

React学习笔记（五）：性能优化

React内部，使用了许多有趣的技术去减少更新UI的DOM操作消耗。对于很多应用，React可以提供更快的用户界面而不需要特意的去优化。尽管如此，你还是有很多方法去优化你的APP。（一）使用生产构建如果你经历过ReactAPP的表现问题，请确认你测试的是压缩过的生产环境版本。默认情况下，React会提供很多有用的预警信息——在开发阶段非常有用。但是它们使React应用变得更大和更慢，所以你需要保证
Kant3·2020-07-30 01:06

react学习笔记（一）react项目搭建、目录介绍

React简介首先React.js是全球最火的前端框架由Facebook推出的前端框架，国内的一二线互联网公司大部分都在使用React进行开发，比如阿里、美团、百度、去哪儿、网易、知乎这样的一线互联网公司都把React作为前端主要技术栈。React的社区也是非常强大的,随着React的普及也衍生出了更多有用的框架，比如ReactNative和ReactVR。React从13年开始推广，现在已经推出
vip.wbiao·2020-07-29 22:02

react学习笔记

安装一下直接按照官方文档就可以npxcreate-react-appmy-appcdmy-appnpmstart开发前，配置vscode，提升开发效率vscode安装**ES7React/Redux/GraphQL/React-Nativesnippets**在vscode的插件搜react出来的第一个就是安装后配置jsx语法里面的html标签提示打开设置ctrl+,然后在右上角有一个设置.jso
前端我最菜·2020-07-28 09:45

react学习笔记（六）插槽、路由

学习教程https://www.bilibili.com/video/BV1T7411W72T?t=842&p=18importReactfrom'react';importReactDOMfrom'react-dom'classParentComextendsReact.Component{constructor(props){super(props)console.log(props)}ren
sasaraku.·2020-07-27 17:15

react学习笔记二----nodejs服务器搭建及异常处理

承接部分react学习笔记一-----react前端框架的初步搭建说明本次学习笔记可能和react没有关系，但是既然要完整的练习，服务器肯定是必不可少的。
sanguing·2020-07-15 04:12

React学习笔记----如何在html页面中使用react

React学习笔记----如何在html页面中使用react一、ReactJS简介React起源于Facebook的内部项目，因为该公司对市场上所有JavaScriptMVC框架，都不满意，就决定自己写一套
suwu150·2020-07-14 23:27

React学习笔记_基于Cookie的登录认证

基于Cookie的登录认证更多干货分布式实战（干货）springcloud实战（干货）mybatis实战（干货）springboot实战（干货）React入门实战（干货）构建中小型互联网企业架构（干货）python学习持续更新ElasticSearch笔记kafkastorm实战(干货)scala学习持续更新RPC深度学习GO语言持续更新对于初学者来说如何实现react的登录，其实是一件非常好脑的
chenshiying007·2020-07-14 17:02

React学习笔记_登录模块

基于React的登录第一种登录Login页面提交登录handleSubmit(),中直接调用API请求。请求登录成功后跳转history.push(nextPathname,null);实现方式参照http://blog.csdn.net/qq_27384769/article/details/78775835第二种登录Login页面提交登录handleSubmit()后，通过saga发起异步请求
chenshiying007·2020-07-13 09:07

React学习笔记_从create-react-app学习webpack

从create-react-app学习webpack更多干货分布式实战（干货）springcloud实战（干货）mybatis实战（干货）springboot实战（干货）React入门实战（干货）构建中小型互联网企业架构（干货）python学习持续更新ElasticSearch笔记kafkastorm实战(干货)scala学习持续更新RPC1.没有配置的现代化构建CreateReactAppisa
chenshiying007·2020-07-11 16:17

React学习笔记（四）-- 数据流

简介React的组件简单理解起来其实就是一个函数，这个函数会接收props和state作为参数，然后进行相应的逻辑处理，最终返回该组件的虚拟DOM展现。在React中数据流向是单向的，由父节点流向子节点，如果父节点的props发生了改变，那么React会递归遍历整个组件树，重新渲染所有使用该属性的子组件。那么props和state究竟是什么？它们在组件中起到了什么作用？它们之间又有什么区别和联系呢
桂圆_noble·2020-07-10 20:06

react学习笔记

onClick={()=>alert('click')},onClick驼峰大写，箭头函数onClick={alert('click')}在使用JavaScriptclasses时，必须调用super()，方法才能在继承父类的子类中正确获取到类型的thisonClick={()=>props.onClick()}可以简化onClick={props.onClick}组件渲染：React可以是用户自
xiewu1015·2020-07-09 02:52

Vue.js-React学习笔记--进阶之路更新中

vue框架介绍框架，framework，是能够让程序开发人员更好的专注于业务逻辑的开发，而无需关心底层功能的实现。vue是一个渐进式JavaScript框架，Vue(读音/vjuː/，类似于**view**)是一套用于构建用户界面的**渐进式框架**。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。国人自己的开发的框架，作者是：尤雨溪vue有两大核心：数据驱动页面、组件化vue框架学习
JackieDYH·2020-07-06 22:28

react学习笔记6：props组件传值和显示

为什么80%的码农都做不了架构师？>>>我们在组件已经知道如何传值和如何接收值显示到组件xml中：1.组件props的特性我们在设置state的时候可以修改，并且渲染到xml中，props可以接收值，不过这个值是不可以修改的2.设置默认的props我们知道state都是我们预先设置xml需要使用的内容，同样的我们接收的props还可以设置默认值，如果调用的位置没有传递，就会在xml显示默认设置，和
weixin_34072857·2020-07-06 00:47

2020-web前端-react学习笔记-01

React构建用户界面的JavaScript库，主要用于构建UI界面。Instagram，2013年开源。特点：声明式的设计高效，采用虚拟DOM来实现DOM的渲染，最大限度的减少DOM的操作。灵活，跟其他库灵活搭配使用。JSX，俗称JS里面写HTML，JavaScript语法的扩展。组件化，模块化。代码容易复用，2016年之前大型项目非常喜欢react单向数据流。没有实现数据的双向绑定。数据-》视
itwangyang520·2020-07-04 19:00

12.React学习笔记.React实现slot

一.介绍image.png以京东m页的导航栏为例。实现Vue中类似slot的功能。React中jsx可以直接把元素当数据返回，所以不需要slot。二.子组件布局aaabbbccc把想要的东西放到子组件标签内。子组件中的标签，都被放到this.props.children内。追溯到createElement源码。所有的属性都放在config中，源码中对config做了一个遍历，把所有的属性名称存在了
_生生不息_·2020-07-04 16:13

React学习笔记_动态注入reducer

Reduxstore的动态注入reducer更多干货React入门实战（干货）分布式实战（干货）springcloud实战（干货）mybatis实战（干货）springboot实战（干货）构建中小型互联网企业架构（干货）在React+Redux+React-Router的单页应用架构中,我们将UI层（React组件）和数据层（Reduxstore）分离开来，以做到更好地管理应用的。Reduxsto
chenshiying007·2020-07-02 17:46

React学习笔记 - JSX简介

ReactLearnNote2React学习笔记（二）标签（空格分隔）：ReactJavaScript一、JSX简介像constelement=Helloworld;这种被称为JSX，一种JavaScript
weixin_30436101·2020-06-27 19:58

【React】react学习笔记10-兄弟组件间的传值

上一篇博文简述了脚手架的使用，以及在ws中的简单配置，详细的配置方法就不讲了，可能有很多细节，在日常使用中发掘就好。然后是脚手架的项目结构以及之间的联系，这个完全可以自己找出来，再不济就百度一下就好。今天记录一下组件之间的传值问题，特别是兄弟组件的传值，真的是为难了我好久的一个问题：要做啥呢？：方便兄弟组件中传值，我知道的实现方式有两种，一种是使用ReactContext，一种是如图所示的传球：组
the_fool_·2020-06-26 18:13

React学习笔记（一）使用Create React App快速构建一个React项目并创建一个登陆页面

首先安装nodeJs，然后命令行快速构建一个React项目：npxcreate-react-appmy-appcdmy-appnpmstart在项目根目录下用npm安装好各种组件库。然后项目结构如下：App.js中这么写:importReactfrom'react';importlogofrom'./logo.svg';import'./App.css';functionApp(){//设置页面标
KogRow·2020-06-26 09:15

Vue和React学习笔记

【Vue学习笔记】MVVM模式Model：负责数据存储View：负责页面展示ViewModel：负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示Vue框架的特点模板渲染：基于html的模板语法，学习成本低。响应式的更新机制：数据改变之后，视图会自动刷新。【重要】渐进式框架组件化/模块化轻量：开启gzip压缩后，可以达到20kb大小。（React达到35kb，AngularJS达
汤姆猫丶·2020-06-25 16:48

React 学习笔记（二）：生命周期；axios

React学习笔记（一）：JSX；工厂函数组件、ES6类组件；三大属性（state、props、refs）学习视频源自：https://www.bilibili.com/video/BV1Et41137Sb
哈！小白要成长！·2020-05-26 11:32

Webpack + React学习笔记(一) —— 准备

前言这篇文章用来记录从无到有的Webpack+React的学习笔记。开始一开始什么都没有。step1：初始化项目1.mkdirreact-what-i-like创建一个空的文件夹。2.cdreact-what-i-like切换到该文件夹。3.npminit初始化该项目->一路回车，可以看到生成了package.json。image.png4.mkdirpublic:创建public文件夹用来放打包
cab240f6e992·2020-04-11 09:04

React学习笔记——交互和动态组件

学习目的：本节是学习如何使我们的组件具有交互性。简单的例子：classLikeButtonextendsReact.Component{constructor(){super();this.state={liked:false};this.handleClick=this.handleClick.bind(this);}handleClick(){this.setState({liked:!thi
Aries_苏世·2020-04-08 12:44

React学习笔记

只写自己目前的笔记React要构建React环境使用Facebook官方脚手架create-react-appnpmi-gcreate-react-appstateReact存储数据的地方，当此属性发生改变会触发生命周期更新视图props跟state差不多，通过标签属性传入数据组件的两种创建方式函数式组件//组件首字母大写functionComponent(props){//可以有一个props参
岁月x离歌·2020-03-24 15:36
上一页 1 2 3 4 5 6 7 8 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他