React
树根朽木
这个作者很懒,什么都没留下…
展开
-
[转]npx create-react-app 使用淘宝镜像(转载请删除括号里的内容)
1.查看npm的镜像源npm config get registry// 默认是:https://registry.npmjs.org/2.修改成淘宝的镜像源npm config set registry https://registry.npm.taobao.org3.create-react-app创建项目npx create-react-app myapp---------------------作者:AI 开发者来源:CSDN原文...转载 2020-09-26 10:53:19 · 645 阅读 · 1 评论 -
零基础到入门React SSR
第一章 使用 react-router 创建express服务器npm install express第一节 配置server.js新建 server/server.js.jsimport path from 'path';import fs from 'fs';import express from 'express';import React from 'react';import ReactDOMServer from &#原创 2020-09-23 17:29:21 · 428 阅读 · 0 评论 -
零基础到入门React 路由
第一章 声明式路由npm install react-router-dom第一节 exact与strict的区别https://segmentfault.com/a/1190000019130514import { BrowserRouter as Router, Route } from 'react-router-dom';class App extends Component { render() { return ( <>原创 2020-09-23 17:29:10 · 116 阅读 · 0 评论 -
利用 Jest 和Enzyme构建 TDD 应用程序
第一章 浅层渲染(Shallow Renderer)当为 React 写单元测试时,浅层渲染(Shallow Renderer) 会变得十分有用。浅层渲染使你可以渲染 “单层深度” 的组件,并且对组件的 render 方法的返回值进行断言,不用担心子组件的行为,组件并没有实例化或被渲染。浅渲染并不需要 DOM。第一节 概述1.1 简单的使用要开始使用 Jest,你不需要安装任何东西; 它是 Create React App 的一部分。如果查看 package.json 文件,您将看到已经有一个脚本原创 2020-09-22 18:09:57 · 462 阅读 · 0 评论 -
[转](2条消息) 把phpstorm添加到右键菜单
1、“windows徽标键 + R” 打开 "运行"窗口,输入 RegEdit,然后点击“确定”。如下图:2、找到 HKEY_CLASSES_ROOT --> * --> shell–>新建–>项为 shell 添加子项,并命名为 phpstorm,这个名字是在右键菜单中显示的名字。鼠标放在 shell 处,右击。如下图:3、为 phpstorm 添加子项 command,并将子项命名为该软件的路径名,鼠标放在默认处,右击,选择“修改”,即弹出“编辑字符串...转载 2020-09-22 08:34:41 · 386 阅读 · 0 评论 -
[转](2条消息) react 中事件中 绑定this 的 4 种写法,以及箭头函数绑定会出现的问题(转载请删除括号里的内容)
参考react官方文档事件第一种: 箭头函数绑定(需要传参数)onClick={() => this.handleClick(index)}import React, { Component } from "react"; class App extends Component { constructor(props) { super(props); this.state = { list: [ { id: 1, ti转载 2020-09-21 13:20:32 · 116 阅读 · 0 评论 -
js 中间件的简单实现原理
1.基础版我将复杂版的改变了下,该变成不同的方法名,不同的调用方法,但是只要next设置好,比较适合新手查看class Middleware { constructor () { this.middleware = (next)=>{//console.log("this.middleware: "+next) /*this.middleware: () =>{ console.log("use: "+fn原创 2020-07-20 15:32:53 · 2484 阅读 · 0 评论 -
Material-UI的使用
同样的两种使用方式1.模块安装npm install @material-ui/core2.CDN 引用<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />引用方式还是,同原来的一样,import React from 'react';import { Button } from '@ma.原创 2020-07-15 13:41:22 · 2460 阅读 · 0 评论 -
React 实战 报错解析
问题来源于生活,解决这些问题.没有出现问题,我们一直觉得我们的做法是正确的,只有出现问题的时候,我们才会知道哪里出现了问题.我决定自己写模板,就是这么简单,就算需要模板,我们也应该要日常中保存....原创 2020-07-15 10:23:37 · 153 阅读 · 0 评论 -
[转]npm镜像使用方法(转载请删除括号里的内容)
2019独角兽企业重金招聘Python工程师标准>>> npm镜像使用方法npm镜像,就是npm的只读副本。使用方法有3种,推荐第一种或者第三种编辑 ~/.npmrc 加入下面内容registry = http://registry.cnpmjs.org永久生效。config命令npm config set registry http://registry.cnpmjs.org npm info underscore (如果上面配置正确这个命令..原创 2020-07-15 06:34:05 · 255 阅读 · 0 评论 -
手动装bootstrap ,亲测可行,带上源码
1.首先,引用react-bootstrap 官方的一句话由于 React-Bootstrap 不依赖于具体的 Bootstrap 版本, 所以发行包中不包括任何 css。尽管使用这些组件时,一些样式表是必须的。 如何选择和加载 bootstrap 样式文件由使用者决定,最简单的办法就是从 CDN 上加载最新的样式表文件。他们居然希望我们可以引用link标签,但是在Vue 的打包过程中,因为他是单文件,我就没有看到过.或者在index.html页面?react确实可以!2.接下去我们安.原创 2020-07-14 16:48:17 · 453 阅读 · 0 评论 -
[转]bootstrap到底是用来做什么的
Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。是一个做网页的框架(目前最流行的WEB前端框架),就是说你只需要写HTML标签调用它的类你就可以很快速的做一个高大上的网页,你不用担心兼容问题,提供了很多样式供你选择!比如你需要做一个网站的导航对吧,你自己写的话你需要写很多代码,但是如果你使用bootstrap框架来写的话,只需要写好HTML标签然后调用类名就可以了...原创 2020-07-14 15:36:26 · 362 阅读 · 0 评论 -
关于Vue React 动态加载组件的一点聊聊
在Vue 基本学完他的语言,做了两个礼拜的admin搞了很多的数据交互,不能说都懂,基本上,是差不多,要达到95,是很艰难的,但是85基本,努力下还是可以的.达到95的时间,绝对是85的两倍以上,而且对于一些细枝末节更是要求严格,我从来不是一个95的高手,但是却擅长做一堆85的套路.为什么开头讲这样的话,Vue 你做到后面,无非两条路,一条走源码,自己搞框架,第二条,就是学小程序,react angular,通过这些来汲取,两条路都要有,但却又轻重缓急.我选择多个85后,然后再冲击95.原创 2020-07-13 16:24:34 · 225 阅读 · 0 评论 -
redux 与Vuex 的相似与 不相似
1.reducer => mutationaction => action最骚的就是redux的 state ,他有两处定义点1.是在创建的createstate的时候,第二个参数,创建相应的数据2.是在reducer的时候,来初始化这个数据程序的问题,要用数学的逻辑来解决.(2,3]来讲述程序上,定义过程中,对他们具体的划分,主要就是一些集合的方法与另一些的方法的交汇处的明确定义.面对if else 就用集合的思想.积分思想是无限追求接近块....原创 2020-07-13 16:08:53 · 321 阅读 · 0 评论 -
redux 三大属性详解
我们使用Vuex 的逻辑思路来理清楚redux1.state1.createStore(reducer, [preloadedState], [enhancer]) reducer(函数):一种归约函数,根据给定的当前状态树和要处理的动作,返回下一个状态树。 [preloadedState](任意):初始状态。您可以选择指定它,以在通用应用程序中混合服务器中的状态,或还原以前序列化的用户会话。如果你生产用,这必须是相同的形状,传递给它的键普通对象。否则,您可以自由传递任何您可以...原创 2020-07-13 14:47:17 · 1034 阅读 · 0 评论 -
React-redux的神奇操作
1.provide当我们正常使用redux的时候,我们提交action需要 dispatch ,但是,当我们使用provide的时候,他需要配合Connect(),我们就不需要去传递state,我们这里关于connect的属性进行详细的讲解connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])1.[mapStateToProps(state, [ownProps]): stateProps] ..原创 2020-07-13 13:54:52 · 205 阅读 · 0 评论 -
React 查漏补缺1
1.启用严格模式2.关于标签引用的时候is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.组件首字母大写3.为了再次避免一些无语的问题,1.所遇的变量都是小写4.一些的问题1.就是jsx 中都是用{} 来代表值得,而不是在Vue 中的样子5.组件中的state6.正常情况下,是不会出现..原创 2020-07-11 18:32:15 · 255 阅读 · 0 评论 -
jsx的简化写法
1.state2.类型要求写法2.组件获取相应的数据3.组件引入css4.如何v-for5.使用箭头函数它没有自己的this,只有外围的this.6.在这里还需要讲解一下,昨天state 父子之间没有讲清楚的一个东西就是父亲设计好更新总state的数据的函数子组件封装数据子组件接受后,调用改函数,上传到state中父组件执行函数,并且需要setstate 更新下状态然后再次还需要setstat...原创 2020-07-11 08:17:02 · 692 阅读 · 0 评论 -
React 发送axios
1.在ComponentDidMount 在渲染完成后,向url发起请求,获取状态,如果状态有改变,则设置state 状态React 的生命周期内同样的fetch也是可以的原创 2020-07-10 15:12:28 · 189 阅读 · 0 评论 -
[转]react 项目中 引入 bootstrap(转载请删除括号里的内容)
react-bootstrap是一个非常受欢迎的针对react封装过的bootstrap,它本身不包含css,所以也是需要使用bootstrap原生库。在create-react-app建的项目目录中安装react-bootstrap。npm install react-bootstrap --save安装bootstrap。npm install bootstrap@3.3.7 --save在index.js文件中增加css引用。import 'bootst..原创 2020-07-10 14:50:31 · 484 阅读 · 0 评论 -
React 的脚手架的详解
app.js中需要引入的东西create-react-app原创 2020-07-10 14:30:45 · 356 阅读 · 0 评论 -
react DOM算法详解,,为什么明明只有时钟改变的部分在改变
原创 2020-07-10 14:22:53 · 131 阅读 · 0 评论 -
React 生命周期学习一波
首先上图,才能看清楚1.通过一个时钟案例我们来了解react的生命周期我们如何让react 显示时钟效果我们componentDidMount 这个生命周期的时刻.我们给他重新定时.因为他是在render 之后的,所以我们可以这样去解决这个问题.同时,我们要销毁这个组件我们要清理这些的内存泄露问题.,需要使用this去绑定,这样他才能够清理的到....原创 2020-07-10 14:20:00 · 113 阅读 · 0 评论 -
React 三大属性
1.state第一步.首先我们要在constructor中然后在class中调用它的时候,就就是react的状态,和Vue 的状态Vuex 还是有很多的相似之处的.第二步 事件的处理同样的类似于Vue ,绑定函数,但是他都是在先自己的class 中设置的方法,并没有VUe 那样的相关的问题.但是我们这里需要注意到一个问题就是,在es6 class 中的相关的属性,他的this 指向问题.我们需要了解一下构造函数的作用,在构造函数中,将这个函数放置在这里...原创 2020-07-10 14:00:46 · 466 阅读 · 0 评论 -
React 理解父子关系
我还是喜欢用螺母与螺丝孔之间的插槽关系来解决问题.render 是最后的渲染函数,在整一个的父子分离过程中这一块是属于父亲的element 就是父亲中子元素的槽,同样Welcome就是子元素....原创 2020-07-05 19:50:31 · 208 阅读 · 0 评论