![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
崔世勋
这个作者很懒,什么都没留下…
展开
-
css less的基本使用
less作为css的一种形式的扩展,它并没有阉割CSS的功能,而是在现有的CSS语法 上,添加了很多额外的功能。变量在less中利用@符号进行变量的定义@nice-blue: #5B83AD;@light-blue: @nice-blue + #111;#header { color: @light-blue; }混合在less中我们可以定义一些通用的属性集为class,...转载 2019-10-23 14:42:19 · 1454 阅读 · 0 评论 -
React项目调试
Redux DevTools浏览器安装此插件,npm start之后,F12,点击Redux, 可跟踪Action以及state的变化。React DeveloperTools浏览器安装 此插件,F12后,点击ReactReact Perf性能插件。F12之后,在源代码处打断点F12后,选择调试-》Source->找到对应的代码,打断点即可。...转载 2019-10-22 16:52:14 · 251 阅读 · 0 评论 -
ant design pro基本使用
Ant Design Pro是一个企业级中后前端解决方案.准备本地环境需要安装yarn, node 和git. 技术栈基于ES2015+, React, UmiJS, dva, g2和antd(Ant Design of React).git和node的安装参考网上就可以, nodejs安装成功后, 即可使用npm. 如果你的网络环境不佳, 推荐使用cnpm( npm client f...转载 2019-06-14 09:59:24 · 2193 阅读 · 0 评论 -
React 组合与继承
包含关系有些组件无法提前知晓它们子组件的具体内容. 在Sidebar和Dialog等展现通用容器的组件中特别容易遇到这种情况.我们建议这些组件使用一个特殊的children prop来将他们的子组件传递到渲染结果中:function FancyBorder(props) { return ( <div className={'FancyBorder FancyBor...转载 2019-06-13 16:41:54 · 790 阅读 · 0 评论 -
React状态提升
通常, 多个组件需要反映相同的变化数据, 这时我们建议将共享状态提升到最近的共同父组件中去.示例:function BoilingVerdict(props) { if (props.celsius >= 100) { return <p>The water would boil.</p>; } return <p>The w...转载 2019-06-13 16:31:38 · 162 阅读 · 0 评论 -
React 表单
受控组件在HTML中, 表单元素之类的通常自己维护state, 并根据用户输入进行更新. 而在React中, 可变状态通常保存在组件的state属性中, 并且只能通过使用setState()来更新.我们可以两者结合起来, 使用React的state成为唯一数据源. 渲染表单的React组件还控制着用户输入过程中表单发生的操作. 被React以这种方式控制取值的表单输入元素就叫做"受控组件"...转载 2019-06-13 16:11:22 · 155 阅读 · 0 评论 -
React 列表和key
基础列表组件function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => <li key={number.toString()}> {number} </li> ); retur...转载 2019-06-13 15:58:04 · 155 阅读 · 0 评论 -
React 条件渲染
React中的条件渲染和Javascrip中的一样, 使用Javascrip运算符if或者条件运算符去创建元素来表现当前的状态, 然后让React根据它们来更新UI.function UserGreeting(props) { return <h1>Welcome back!</h1>;}function GuestGreeting(props) { r...转载 2019-06-13 15:47:15 · 130 阅读 · 0 评论 -
React 事件处理
(1)React事件的命名采用小驼峰式(camelCase), 而不是纯小写.(2)使用JSX语法时你需要传入一个函数作为事件处理函数, 而不是一个字符串.传统的HTML<button onclick="activateLasers()"> Activate Lasers</button>在React中<button onClick={a...转载 2019-06-13 15:33:32 · 202 阅读 · 0 评论 -
UmiJS
umi是一个可插拔的企业级react应用框架, umi以路由为基础.参考: https://umijs.org/zh/guide/#%E7%89%B9%E6%80%A7目录及约定在文件和目录的组织上, umi更倾向于选择约定的方式, 一个复杂的目录结构如下:.├── dist/ // 默认的 build 输出目录├── moc...转载 2019-06-15 16:31:57 · 3537 阅读 · 0 评论 -
DvaJS
dva是一个基于redux和redux-sage的数据流方案, 然后为了简化开发体验, dva还额外内置了react-router和fetch.参考: https://dvajs.com/guide/reduxRedux是Javascript状态容器, 提供可预测化的状态管理.那什么是可预测化, 我的理解就是根据一个固定的输入, 必然会得到一个固定的结果.1. 三大原则(1...转载 2019-06-15 18:21:07 · 748 阅读 · 1 评论 -
React中import的用法
import defaultcomponent,{a,b,c...} from 'XXX'eg: import React,{Component} from 'react';导入‘react’文件里export的一个默认的组件,将其命名为React以及Component这个非默认组件import defaultcomponent form 'XXX'导入XXX文件中的默认组件,命名为def...转载 2019-07-24 08:17:25 · 1147 阅读 · 0 评论 -
如何进行React组件单元测试
Javascript单元测试框架对比1. Jasmine带有断言, spies(用来模拟函数的执行环境)和mocks.2. AVA优势是Javascript的异步特性和并发运行测试.3. Tape比较小的框架.4. Mocha使用比较多的一个库, 高级功能需要引用插件完成.5. jest见下.Enzyme是一个React测试工具库, Enzyme提供渲染...转载 2019-07-29 09:42:25 · 351 阅读 · 0 评论 -
React-classnames库
react原生动态添加多个className会报错:import style from './style.css'<div className={style.class1 style.class2}</div>想要得到的最终渲染效果是:<div class='class1 class2'></div>引入classnames库后:...转载 2019-07-30 09:10:49 · 172 阅读 · 0 评论 -
react中使用prop-types检测props数据类型
在多人开发时,当被人使用自己定义的组件时,有可能出现类型传错的情况,而在自己的组件上加上prop-types,他可以对父组件传来的props进行检查,加入父组件中想传递的是字符串类型‘3’,而传递了一个数字类型3,如果没有类型检查系统不会给与提示,但是有了类型检查以后,再控制台会给你一个类型传递错误的提示。这样在工作中可以快速找到错误。学习文档 :https://www.npmjs....转载 2019-07-26 08:26:04 · 302 阅读 · 0 评论 -
类型定义文件(*.d.ts)
类型定义文件在TypeScript中, 我们可以很简单的, 在代码编写中定义类型:interface IBaseModel { say(keys: string[] | null): object}class User implements IBaseModel { name: string constructor (name: string) { this.n...转载 2019-07-23 09:18:22 · 2586 阅读 · 0 评论 -
antd 实现跳转
使用<Link />标签1. 导入umi组件import Link from 'umi/link';2. 页面使用<Link />标签<Link to="/dashboard/analysis?id=1&name=admin"><Button icon="plus"><FormattedMessage id='glo...转载 2019-08-14 16:32:16 · 4853 阅读 · 0 评论 -
stylelint
https://stylelint.io/stylelint是css语法检查和纠错工具,它由PostCSS提供.PostCSS就是Babel的css版, 会把css转成ast(抽象语法树), 然后用各种插件处理它,最后再转回css.如同babael和eslint, 它们都用 cosmiconfig加载配置, 所以你的配置对象可以写在:1. package.json的stylelin...转载 2019-08-22 14:31:25 · 388 阅读 · 1 评论 -
idea antd react
参考:https://ant.design/index-cn1. 安装nodejshttps://blog.csdn.net/CHS007chs/article/details/847103622. create-react-appcnpm install -g create-react-app yarn3、使用idea打开之后,就可以在termial中执行命令。4、...转载 2018-12-06 16:48:38 · 1353 阅读 · 0 评论 -
理解es6
const修改的也可变const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址所保证的数据不得改动。对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等于常量。但对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指向实际数据的指针,const只能保证这个指针是固定的(即总是指向另一个固定的地址)。export def...转载 2018-12-08 09:17:35 · 269 阅读 · 0 评论 -
React-JSX
const element = <h1>Hello, world!</h1>;这种看起来可能有些奇怪的标签语法即不是字符串也不是HTML,它被称为JSX, 一种JavaScript的语法扩展。推荐在React中使用JSX来描述用户界面, 虽然React并不强制要求使用JSX。JSX用来声明React当中的元素。JSX语法的特点就是,凡是使用JavaScript的值...转载 2018-07-24 14:17:03 · 212 阅读 · 0 评论 -
React 元素渲染
元素是构成React应用的最小单位。将元素渲染到DOM中<div id="root"></div>在此div中的所有内容都将由React DOM来管理,所以我们将其称之为“根” Dom节点。我们用React开发应用时一般只会定义一个根节点,但如果你是在一个已有的项目中引入React的话,你可能会需要在不同的部分单独定义React根节点。要将React元...转载 2018-07-24 14:31:22 · 242 阅读 · 0 评论 -
React 组件 &Props
组件可以将UI切分成一些独立的、可复用的部件。组件可以接收任意的输入值,并返回一个需要在页面上展示的React元素。函数定义、类定义组件定义一个组件最简单的方式是使用JavaScript函数:function Welcome(props) { return <h1>Hello, {props.name}</h1>;}该函数是一个有效的React组件,...转载 2018-07-24 15:05:35 · 385 阅读 · 0 评论 -
React State 和 生命周期
将函数转换为类通过5个步骤将函数组件Clock转换为类:(1)创建一个名称扩展为React.Component的ES6类。(2)创建一个叫做render()的空方法。(3)将函数体移动到render()方法中。(4)在render()方法中,使用this.props替换props。(5)删除剩余的空函数声明。class Clock extends React.Comp...转载 2018-07-24 15:35:55 · 212 阅读 · 0 评论 -
npm总是报错:unable to verify the first certificate
2014年2月27日,npm不再支持自签名证书。因为npm install用的是https协议。解决方法1:取消ssl验证:npm config set strict-ssl false如果还没成功,则将npm源更换为国内镜像:npm config set registry http://registry.cnpmjs.org/npm config set registry htt...转载 2018-07-20 14:02:24 · 1802 阅读 · 0 评论 -
React+SpringBoot项目部署
create-react-app由npm install 安装生成的,为什么单独列出这个呢?这个是关键,因为要创建react,最普通的方式就是通过命令create-react-app projectname生成名为projectname的项目,那么idea为了方便大家快速搭建,需要用到reate-react-app中的index.js文件用来创建react应用,所以不清楚自己的create-r...转载 2018-07-20 14:29:55 · 5236 阅读 · 0 评论 -
'react-scripts' 不是内部或外部命令,也不是可运行的程序 或批处理文件--解决方案
create-react-app创建的React项目时,有时在安装完其他组件后,再次运行 npm start 命令时会报以上错误,让我很郁闷,不过在上网搜了这个错后原来:是create-react-app有丢包的缺陷,手动安装包后,需要重新npm install一下,这样node_modules/.bin/目录下才会重新出现react-scripts的文件,这样npm start命令才能正常执...转载 2018-07-30 13:39:56 · 3776 阅读 · 0 评论 -
react-native不是内部或外部命令
1.查看npm全局路径(npm是在nodejs安装的时候一起安装的)npm config get prefix2.配置环境变量在系统变量中新建变量NODE_PATH在系统变量和用户变量path中查看是否有C:\Users\用户\AppData\Roaming,如果有,则替换为NODE_PATH,如果没有,在系统变理PATH中添加%NODE_PATH% 最后欢迎大家访问我的...转载 2018-09-04 10:33:06 · 1559 阅读 · 0 评论 -
React Native 运行报错 SDK location not found
两种解决办法:1.添加系统环境变量ANDROID_HOME指向Android SDK的安装目录。2.在react-native项目android文件夹下新建local.properties文件,内容:sdk.dir=你的android sdk目录 最后欢迎大家访问我的个人网站:1024s...转载 2018-09-04 13:28:17 · 461 阅读 · 0 评论 -
解决 maven { url 'https://maven.google.com' } 国内用不了
替换为maven { url 'https://dl.google.com/dl/android/maven2/' } 最后欢迎大家访问我的个人网站:1024s转载 2018-09-04 13:29:50 · 7657 阅读 · 0 评论 -
Idea react-native ndk is missing a "platform" directory
File->Setting下安装NDK 最后欢迎大家访问我的个人网站:1024s原创 2018-09-04 13:42:25 · 696 阅读 · 1 评论 -
idea+react-native android环境搭建
背景:之前一直使用idea开发spring的项目,所以本机已经有jdk和idea。安装nodejs这个参考网上的就可以,在安装nodejs时,npm也会被附带安装了。npm总是报错:unable to verify the first certificatenpm config set registry https://registry.npm.taobao.org(使用淘宝...原创 2018-09-04 17:25:34 · 3120 阅读 · 0 评论 -
React/React Native的ES5 ES6写法对照表
模块1.引用在ES5里,如果使用CommonJS标准,引入React包基本通过require进行,代码类似这样://ES5var React = require("react");var { Component, PropTypes} = React; //引用React抽象组件var ReactNative = require("react-native...转载 2018-09-05 09:01:56 · 195 阅读 · 0 评论 -
React-Native 样式、布局
所有的核心组件都接受名为style的属性,这些样式名基本上是遵循web上的css的命名,只是按照js的语法要求使用驼峰命名法,例如将background-clor改为backgroundColor。在实际开发中组件的样式会越来越复杂,我们建议使用StyleSheet.create来集中定义组件的样式。import React, { Component } from 'react';im...转载 2018-09-05 10:14:52 · 552 阅读 · 0 评论 -
React Native常用命令
1.react-native init myReactNativeProject --version使用--version参数可以在创建工程时指定react-native的版本。2. npm install 库的名称 --save生产环境需要的库,会在package.json文件中的dependencies中记录来链接库3. npm install 库的名称 --save-dev...原创 2018-09-06 13:05:47 · 279 阅读 · 0 评论 -
React-Native删除第三方开源组件的依赖包
我们安装第三方的开源组件是npm install react-native-video --save,然后再输入react-native link,就自动向native 模块中添加了各处依赖和导包的操作但是如何删除呢?只是删除组件npm uninstall react-native-video但是你会发现,在RN目录下的package.json文件中,这个组件依赖依旧存在。首先...转载 2018-09-06 14:09:12 · 2820 阅读 · 0 评论 -
TypeScript
TypeScript是微软开发的javascript加强版,就有带了type的javascript。TS允许你以接口的形式定义复杂的类型,当你要在应用程序中使用复杂的对象或数组时,会进行严格的静态类型审查,增加分健壮性。umi中内置了TypeScript的loader,可以直接创建.tsx或者.tx文件来写TypeScrpit代码。1、首先安装依赖包cnpm install ts...原创 2018-12-13 13:29:03 · 272 阅读 · 0 评论 -
React学习
参考:https://doc.react-china.org/tutorial/tutorial.htmlReact是什么React的核心概念有2点:(1) 声明式渲染,(我理解就是,不需要直接操作dom)例子:点击一个按钮, 改变颜色.命令式:const container = document.getElementById(‘container’);const ...转载 2018-07-24 13:49:33 · 234 阅读 · 0 评论