reactjs
关注
分享
扫一扫
文章平均质量分 92
咩有猫腻.
要努力哦.
展开
-
react-----umi中的数据流向问题 + 约定式路由 + 路由传参
页面跟数据是分开写的demo1list.js 页面import React, { useEffect, useRef } from 'react';import { connect } from 'dva';import { Form, Input, Button } from 'antd';const List = props => { console.log(props); const { dispatch, book } = props; const { list原创 2020-08-12 12:44:33 · 781 阅读 · 0 评论 -
react---Umi基础介绍和项目搭建 + umi基础model使用 + Dva基本概念和原理
umiumi是一个react的企业级开发框架，内置了dva、路由等插件。可以实现零配置的方式开发一个react项目https://umijs.org/zh-CN创建项目npm create umi first-umi-app # 创建一个first-umi-app项目cd first-umi-app # 进入目录npm inpm start # 启动项目目录src 表示源代码.umirc.js 是配置文件src/models 此文件夹中的内容是redux数据model的代码示例e原创 2020-08-11 21:09:57 · 2083 阅读 · 0 评论 -
react---大总结大复习
ReactReact 是 facebook 出的一款针对前端 view 视图层的 library 库。react 使用了 jsx 语法(就是在 js 中写 html 标签)https://zh-hans.reactjs.org/ react 官网地址7/27 第一天react js 文件的引入<div id="app"></div><script src="./libs/babel.min.js"></script><!-- js文件引入的原创 2020-08-08 14:51:07 · 546 阅读 · 0 评论 -
react项目---插件安装和页面初始化（后台管理的demo）1
基础文件的初始化书写格式模板原创 2020-08-05 20:59:10 · 259 阅读 · 0 评论 -
react---redux-thunk 有异步action和接口配合使用
/src/api/movies.js 封装接口export function loadMovies() { return fetch( "https://pcw-api.iqiyi.com/search/recommend/list?channel_id=4&data_type=1&mode=24&page_id=1&ret_num=48" ).then((res) => res.json());}/src/store/actions/prod.原创 2020-08-05 16:00:56 · 472 阅读 · 0 评论 -
redux---redux-thunk：异步action插件（解决redux里的action中复杂的数据类型，也就是解决异步处理的）
redux里所有的action都必须是一个简单地数据类型比较复杂的话，就需要借助一个插件 redux-thunk这个插件是用来解决异步处理的安装： npm i redux-thunkredux-thunk是redux里最知名的插件承接前几篇文章的代码描述/store/index.jsimport { createStore, compose, applyMiddleware } from "redux";import thunk from "redux-thunk";import root原创 2020-08-05 10:06:04 · 299 阅读 · 0 评论 -
react---redux代码拆分封装
就是将上篇文章中的/src/store.js文件放到一个目录下进行多个拆分原store.jsimport { createStore, combineReducers } from "redux";function counter(state = { count: 1 }, action) { console.group("counter reducer"); console.log(state); console.log(action); console.groupEnd();原创 2020-08-04 22:09:26 · 315 阅读 · 0 评论 -
react----redux安装使用和传值、react和redux进行结合使用（快捷键rfcredux）
redux状态管理工具，遵循的是单项数据流.reducer是用来改变数据的action是用来组织数据，每一个action需要包含一个type属性state是用来存储数据的如果要改变数据是通过dispatch派发一个action在reducer中改变数据redux和vuex的区别： vuex只能在vue中使用 redux可以和任何一个前端框架进行结合命令安装npm i redux # 安装依赖项npm i react-redux # react和redux 关联结合使用//原创 2020-08-04 20:27:08 · 416 阅读 · 0 评论 -
react---路由的其他（Link、NavLink、params传参、链接传参、Link跳转、props.history.push编程式跳转、withRouter、私有路由Switch、exact）
1.Link和NavLink的区别NavLink比Link多了一个class=“active”, 可以在App.css为他们设置样式function App() { return ( <Router> <div className="App"> <ul> <li> {/*1️⃣ Link <Link exact to="/">首页&l原创 2020-08-04 10:05:28 · 1800 阅读 · 0 评论 -
react---私有路由和权限判断（PrivateRoute + withRouter）
mePrivateRoute.jsx 私有路由import React from "react";import { Route, Redirect } from "react-router-dom";function PrivateRoute(props) { const isLogin = localStorage.getItem("token") ? true : false; return isLogin ? ( <Route path={props.p原创 2020-08-04 09:45:49 · 2748 阅读 · 0 评论 -
react---路由基本使用 + 路由基础属性（两种路由形式：component 、render） + 传参 + 嵌套 +组件分开合并
react 路由npm i react-router-dom # 安装路由插件Router 表示所有需要使用路由的部分都必须包含在此节点内部，一个项目只需要有一个此节点就好此Router有两种常见的形式hash browser， hash路由，连接处有个＃，不需要配置，没有兼容，可以直接使用； 而浏览器历史记录路由需要在web服务器中做特殊配置，兼容性也不好， 因此不建议使用浏览器历史记录路由。Route 表示一个路由对象，需要属性 path component原创 2020-08-03 19:40:28 · 1054 阅读 · 0 评论 -
react---antd design--table操作
People.jsximport React, { useState, useEffect } from "react";import { Table, Button } from "antd";import { loadDMList } from "../api/iqiyi";const columns = [ { title: "序号", align: "center", width: 80, render: (text, record, index) =原创 2020-08-01 17:44:31 · 717 阅读 · 0 评论 -
react---收藏的点击和取消（刷新还会存在）--demo
使用的都是爱奇艺电影接口demo1–承接上上篇脚手架生成的react来继续的修改了List.jsx和创建文件 src/api/favs.jsfavs.jsexport function onCollection(id) { const favs = getCollections(); if (favs.indexOf(id) === -1) { favs.push(id); } localStorage.setItem("favs", JSON.stringify(favs)原创 2020-08-01 15:40:04 · 955 阅读 · 0 评论 -
react----antd design插件基础使用
antd官网链接1.安装：npm i antd2.在index.js文件中写入：import 'antd/dist/antd.css’3.然后在对应的组件中引入标签并使用（查看antd官网详细使用步骤，cv）继上篇博客，仅修改了部分内容List.jsximport React, { useState, useEffect } from "react";import { loadDMList } from "../api/aiqiyi";import { Button, Card } from原创 2020-08-01 15:29:10 · 487 阅读 · 0 评论 -
react----脚手架搭建项目 + 进度条插件 使用（nprogress）
脚手架搭建项目npx create-react-app movie-app # 使用react脚手架搭建项目npm start # 启动项目,先进入文件夹组件中react中function和class两种快速创建的快捷键， function是页面中输入： rfce 回车 class是页面中输入： rcc 回车 组件的后缀名既可以是js也可以是jsx因为用到了axios，所以先安装在引入 npm i axios import axios from 'axios' App原创 2020-07-31 20:53:11 · 1450 阅读 · 0 评论 -
react----全选、反选--demo
<title>全选/反选</title> </head> <body> <div id="app"></div> <script src="./libs/babel.min.js"></script> <script src="./libs/react.js"></script> <script src="./libs/react-d...原创 2020-07-30 21:47:03 · 1006 阅读 · 0 评论 -
react---context上下文（跨组件之间传参）
context在react—function中的用法重点代码： const mainContext = React.createContext(); const { Provider } = mainContext; const c = React.useContext(mainContext); // 写在组件内部 <title>context-2</title> </head> <body>原创 2020-07-30 19:40:44 · 790 阅读 · 0 评论 -
react-----待办事项demo（map循环套循环-点击完成）
<title>待办事项</title> </head> <body> <div id="app"></div> <script src="./libs/babel.min.js"></script> <script src="./libs/react.js"></script> <script src="./libs/react-dom.js.原创 2020-07-30 18:34:41 · 258 阅读 · 0 评论 -
react--获取react中组件的dom元素内容-ref操作--this.refs+ref（分别为 function 和class中的ref使用）
从两者的使用情况来看，function明显比class使用起来 更方便简单react—class中this.refs + ref的使用 <title>ref操作</title> </head> <body> <div id="app"></div> <script src="./libs/babel.min.js"></script> <script src="./li原创 2020-07-30 16:22:44 · 1410 阅读 · 0 评论 -
react---获取react中组件的dom元素内容-----(自定义属性 data-xxx +e.target.dataset.xxx )
this.refs + ref的使用 <title>ref操作</title> </head> <body> <div id="app"></div> <script src="./libs/babel.min.js"></script> <script src="./libs/react.js"></script> <script src原创 2020-07-30 15:45:38 · 1547 阅读 · 0 评论 -
react---组件生命周期（componentDidMount、shouldComponentUpdate等）---点击按钮小球隐藏显示--demo
React组件生命周期初始化阶段挂载阶段更新阶段当状态或者属性发生改变之后会触发更新阶段的钩子函数在更新阶段不能修改状态数据卸载阶段 <title>生命周期</title> <style> .ball { width: 100px; height: 100px; border-radius: 50%; background-color: ora原创 2020-07-30 13:06:53 · 4148 阅读 · 0 评论 -
react----useEffect副作用(加载更多按钮、购物车全选单选 就会用到这个）
hooksuseState 可以定义一个局部状态数据useEffect 副作用,当一个数据或者属性发生改变之后会引起的一些变化原创 2020-07-30 11:08:04 · 697 阅读 · 0 评论 -
react---子组件向父组件传参
<title>子组件向父组件传参</title> </head> <body> <div id="app"></div> <script src="./libs/babel.min.js"></script> <script src="./libs/react.js"></script> <script src="./libs/react-d.原创 2020-07-29 21:26:44 · 222 阅读 · 0 评论 -
react---父组件向子组件传参---fetch调接口父传子--demo
<title>Document</title> <!-- 输入bs3-cdn:css --> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" /> </head.原创 2020-07-29 20:26:31 · 215 阅读 · 0 评论 -
react--动态传递数据到子组件（点击颜色按钮让小球变色--demo）
<title>父组件动态向子组件传参</title> <style> .ball { width: 200px; height: 200px; border-radius: 50%; display: block; margin: 1rem auto; /* background-color: deeppink; */ transi...原创 2020-07-29 19:07:30 · 504 阅读 · 0 评论 -
react----掉接口取数据
如果不想用this.state.list 想要直接用list的时候，就需要解构一进页面，render（）会先执行两次，一次是初始化的时候，一次是加载成功的时候 <title>获取数据</title> </head> <body> <div id="app"></div> <script src="./libs/babel.min.js"></script> <sc.原创 2020-07-29 18:20:01 · 510 阅读 · 0 评论 -
react-class定义的组件和状态+class中使用setState
<title>组件定义-class定义的组件</title> </head> <body> <div id="app"></div> <script src="./libs/babel.min.js"></script> <script src="./libs/react.js"></script> <script src="./li...原创 2020-07-29 17:02:51 · 1377 阅读 · 0 评论 -
react--function定义组件和状态
<title>react组件定义</title> </head> <body> <div id="app"></div> <script src="./libs/babel.min.js"></script> <script src="./libs/react.js"></script> <script src="./libs/rea...原创 2020-07-29 11:53:23 · 2543 阅读 · 0 评论 -
react--jsx语法中的循环展示（className，js{}的用法、fetch调用接口循环）
<title>第一个循环数据</title> <style> .person { background-color: #999; } </style> </head> <body> <div id="app"></div> <script src="./libs/react.js"></script>原创 2020-07-28 19:07:15 · 1028 阅读 · 0 评论 -
react---入门页面结构搭建2--react的两种使用基础方法（function+class）、（json和js之间的相互转换）
json和js之间的相互转换如果是在框架里用import引入，也可以，但是如果在页面中写个js，也是非常简单的方式将json文件修改为js 文件后，在页面中用script引入，然后就可以直接使用使用起来相对非常简便基础使用方法先引入三个js文件，上一张有写怎么使用引入连接的步骤<title>第一个react组件</title> </head> <body> <div id="app"></div> &原创 2020-07-28 17:26:14 · 373 阅读 · 0 评论 -
react---入门页面结构搭建1---三个连接的引入（react、react-dom、babel)--jsx语法
在bootcdn.cn中引入三个网络文件，在是由于在bootcdn.cn中搜索到的babel文件加载很慢还容易使用不了，同时又试了babel网站文件链接的引入也很慢无法正常执行，就将其文件下载了下来，放入文件目录下来引入使用此处代码不是最终使用的方法，仅仅此时展示过程,连接最终用法在文章最后面<body> <!-- 所有的内容一会都将挂载#app这个节点上 --> <div id="app"></div> <script sr原创 2020-07-28 16:55:23 · 1036 阅读 · 0 评论