小羽向前跑

默认配置 defaultProps默认配置通过||操作符可以实现，React.js 也提供了一种方式defaultProps，可以方便的做到默认配置。class LikeButton extends Component { static defaultProps = { likedText: '取消', unlikedText: '点赞' } constructor () { super() this.state = { isLiked: fal...

父组件Demo1.jsimport React, { Component } from 'react'import './relevance.css'import Relevancenum from './Relevancenum'import Tabschange from './Tabschange'export default class Demo1 extends ...

功能：1.进入项目后的默认路径是home，默认展示首页模块2.点击路由，切换子组件3.点击文章路由，根据传值不同进入三级详情路由，同时二级路由不显示4.点击返回首页，跳转到首页安装routernpminstallreact-router-dom --save配置路由：1.根组件index.js里面 引入路由组件你可以选择BrowserRouter路由...

说明：先说一下写两个功能的原因是，要写使用两个及以上reducer的方法因为redux只能定义一个store，即一个应用一个store，而store只接收一个reducer，所以这两个reducer不同功能不同数据，需要将这些reducer整合到一起；功能：组件1：store数据：numberstore方法：点击按钮每次加100组件2：store数据：异步请求的...

报错：Expected an assignment or function call and instead saw an expression no-unused-expressions Search for the keywords to learn more about each error.期望一个赋值或函数调用，却看到一个表达式没有使用表达式搜索关键字以了解每个错误的更多信息。...

创建store.js引入并使用vueximportVuexfrom'vuex'Vue.use(Vuex)1.使用newVuex.Store创建({}）创建store2.创建state:{}存放数据3.mutations:{}存放方法4.actions:{}用于调用异步方法5.getters:{}用于数据计算import Vue from 'vue...

功能：1.输入框输入事项，点击add，list增加一条，输入框清空并且聚焦；2.点击当前checkbox，勾选文字为已完成，取消勾选文字为未完成；父组件TodoList.js分成了三个子组件TodoHeader,TodoInput,Listimport React, { Component } from 'react';import{TodoInput,TodoH...

假设拉取下来的是富文本携带html标签的内容应该如何渲染到页面：例：<div>我是富文本内容</div>在标签上使用dangerouslySetInnerHTML={{__html:this.state.article}}import React, { Component } from 'react';class TodoList extends Co...

点击按钮，喜欢或者取消小图标用的是https://emojipedia.org/这个网站的 直接复制使用即可创建组件Like.js一开始设置为黑色false，isLiked如果为true渲染红心，false渲染黑心setState时用了两种方法import React, { Component } from 'react'export default cl...

创建父组件Demofather.js第一种传值：在子元素标签上 title='待办事项' x={1}字符串可以用" "引号传递数字类型用{}大括号传递子组件标签内部可以传递任何数据，react将自动生成props.children数据import React, { Component } from 'react';import{Demo,Demo2} from '....

首先 npminstallless-loaderless--save-dev安装之后终端npmruneject来暴露webpack的配置文件，如果报错：Remove untracked files, stash or commit any changes, and try again.这是因为我们使用脚手架创建一个项目的时候，自动给我们增加了一个.gitigno...

//调用react下面的createElement方法，传入第一个参数是tag//第二个是属性，第三个是子元素集合import React from 'react'let JsxDemo =( <div className='app'> <h3>hello react</h3> </div>)//...

react-hooks写法直接用函数形式完成()=>{setCount(count+1)}useState是react自带的一个hook函数，它的作用是用来声明状态变量useState的用法，分别是声明、读取、使用（修改）useState这个函数接收的参数是状态的初始值ReactHooks不能出现在条件判断语句中，因为它必须有完全一样的渲染顺序例如不能出现以下...

import React, { useReducer } from 'react';function ReducerDemo(){ const [ count , dispatch] =useReducer((state,action)=>{ //判断action类型 switch(action){ case 'add':...

父子传值 跨层级传值父组件引入并创建createContext，子组件引入useContextimport React, { useState , createContext ,useContext } from 'react';const CountContext = createContext() //创建一个createContextfunction UseContext...

useEffect代替生命周期函数componentDidMount页面加载和componentDidUpdate页面更新//useEffect代替生命周期函数 componentDidMount页面加载和componentDidUpdate页面更新import React, { useState,useEffect } from 'react';function UseEffec...

//Refs使用，绑定dom元素，ref 不能设置在无状态组件上//不要在 render 或者 render 之前访问 refsimport React, { Component } from 'react';class Refsdemo extends Component { constructor(props) { super(props); ...

//按条件渲染内容 && 数组大于0时，渲染import React from 'react'//判断数组length大于0时，渲染未读消息//0条时不渲染未读消息function Choice() { const messages = ['React', 'Re: React', 'Re:Re: React']; return ( ...

//跟踪表单的值import React, { Component } from 'react';class FlavorForm extends Component { constructor(props) { super(props); this.state = {value: ''}; this.handleChan...

父组件AppRouterimport React from 'react'//BrowserRouter as Router 给BrowserRouter起名Router 方便使用import {BrowserRouter as Router, Route, Link} from 'react-router-dom'import Index from './Index'i...

在上篇的基础上做路由跳转：上篇安装路由及代码：安装：cnpm i -S react-router-dom1.在pages里创建四个跳转页面 2.在src文件夹下创建router.js，router.js全部内容：首先引入路由组件，创建四个要跳转的&lt;Route&gt;标签，path是组建路径，component是组件名称import React from ...

最终效果图：1.功能：各功能组件的组合和渲染    2.点击评价按钮评论组件出现，可输入文字和打分，点击取消按钮关闭评论3.点击提交按钮显示已评价 结构：1.在src下创建components文件夹，用于存放几个组件，每个组件创建一个文件夹存放，2.将视图展示的App.js移入components文件夹下，且创建App文件夹，3.每个组件的js文件均命名...

目录结构  单页文件Records.js模拟一个mock数据：1.https://www.mockapi.io/  可以使用github账号登陆2.新建项目3.我在此命名项目为accunt-app4.填写你数据的名字5.数据的健和类型6.生成后可调节你想要的条数7.可以在Data里预览数据8.可在终端里看请求状态   API下面的那条ur...

功能展示 ：1.用户可输入用户名2.输入评论内容3.点击发布4.用户名和用户评论会被显示在列表里，第一个评论在最上面5.且显示本条评论离现在过去了多长时间6.鼠标放在事件上方可显示删除键，点击删除，删除当前总体结构：1.components下创建comment文件夹2.先创建用户输入组件：CommentInput3.再创建单条用户评论视图：Comment...

结构展示：功能展示：1.使用swiper轮播插件，2.自动轮播，当前图片高亮小按钮首先引入swiper和配置环境1.npm install --save swiper2.在src文件夹index.js下引入样式，避免打包失败import Swiper from 'swiper/dist/js/swiper.js'import 'swiper/dist/cs...

效果：底部页面导航 点击当前图标 图标高亮页面结构1.将所用到的小图标文件放置在static文件夹下2.在src下新建tabbar文件夹，用于存放组件资源3.页面代码注意：将本页面的css引入，定义tarbarArr数组，用于循环小图标和文字，遍历数组tarbarArr：{ tarbarArr.map((v,i)=&gt;( ...

1.首先介绍高阶函数基本概念：函数可以作为参数被传递：函数可以作为返回值输出： 2.高阶组件组件作为参数被传递，返回值是一个组件高阶组件是一个函数案例：将A组件作为公共组件，BC组件作为A函数的参数，来共享显示A组件此处红框是A组件，红框里左边内容为B组件，右边内容为C组件 1.创建公共的A组件将组件A封装成一个函数，接收一个参数，这个参...

所有代码import React,{Component,Fragment} from 'react'class TodoList extends Component{ constructor(props){ super(props); this.state = { list:[ 'learn ...

脚手架里的index.js配置组件的挂载import React from 'react'import ReactDOM from 'react-dom'// import Life from './Life'import Xiaojiejie from './react/Xiaojiejie'// import Css from './react/Css'// import T...

父组件Xiaojiejie.js// todolist 增删 使用axios 使用easymockimport axios from 'axios'import React,{Component,Fragment } from 'react'import XiaojijieItem from './XiaojiejieItem' //子组件//Fragment组件的作用 ...

Redux简单介绍Redux是一个用来管理管理数据状态和UI状态的JavaScript应用工具。随着JavaScript单页应用（SPA）开发日趋复杂，JavaScript需要管理比任何时候都要多的state（状态），Redux就是降低管理难度的。（Redux支持React，Angular、jQuery甚至纯JavaScript）ReduxDevTools插件Redux调试工具...

一级路由+布局组件：//嵌套路由小案例 布局页面一级路由import React from 'react'import {BrowserRouter as Router, Route, Link} from 'react-router-dom' //引入路由要用的组件import Index from './Index' //二级路由 首页import Video from...

功能展示：1.当用户触发划屏事件时2.判断其正确方向并alert出来3.总共上下左右四种所有代码：import React,{Component} from 'react';import './Stroke.css'class Stroke extends Component{ constructor(props){ super(props)...