React
这里是我的react学习总结
小R.
总之岁月漫长,然而值得期待
展开
-
初识react(16)—— 如何动态渲染 标题title 关键字 描述
一、首先在index.html中写如下代码(在用脚手架搭建react项目时,index.html文件已有 title和name值为description的meta这两部分的代码,所以可以再添加个 关键字的 meta):<meta name="description" content="description" /> <meta name="keyWord" content="keyWord"原创 2020-09-11 16:30:00 · 1365 阅读 · 0 评论 -
初识react(15)—— 在 react 中如何使用 wangEditor 富文本编辑器
之前写项目时用到过 wangEditor 和 markdown ,只是当时忘了总结。以至于现在需要用 wangEditor 了还得翻以前的项目,只是以前用的不是react,需要更改代码。废话不多说,下面总结一下 在 react 中如何使用 wangEditor 富文本编辑器。1、安装 wangEditornpm install wangeditor2、引入 wangEditorimport E from 'wangeditor' 3、使用 wangEditor 这个可以看看 wangE原创 2020-09-03 11:45:28 · 1715 阅读 · 0 评论 -
初识react(14)—— antd实现按需打包
一、安装 antd:npm install antd二、安装依赖模块:npm install react-app-rewirednpm install customize-cranpm install babel-plugin-import三、设置 config-overrides.js: 首先新建一个 js 文件,如下图所示: 代码如下:const { override, fixBabelImports } = require('customize-cra');/原创 2020-09-03 11:20:20 · 714 阅读 · 1 评论 -
初识react(13)—— 使用 moment 来获取日期
在写项目时,我们有时需要获取当前时间,这时我们除了用之前 js 获取日期的方式之外,也可以使用 moment 来获取日期。1、安装 momentnpm install moment --save2、引入 momentimport moment from 'moment'3、使用 moment获取当前时间://获取 当前时间moment().format('YYYY-MM-DD HH:mm:ss'); //2020-08-25 10:23:59//获取年份moment().原创 2020-08-25 11:33:43 · 9604 阅读 · 0 评论 -
初识react(12)——如何在 基于antd的表格中 渲染 接口获取的数据
方法一:代码如下:import React,{Component}from 'react'import {Table} from 'antd';import http from "../../server" //这里是我跨域所用到的export default class School extends Component { state = { data:[] }; //发送get请求获取数据 async getList(){原创 2020-08-24 11:58:13 · 1980 阅读 · 2 评论 -
初识echarts(1): 如何在 react 中使用echarts
在写这篇博客之前,我看到网上模板中的图表总觉得“好大上啊,代码一定很复杂吧”,现在网上搜搜找找,一通摸索,突然觉得好像没那么难搞。这篇博客我先简单总结总结 “如何在 react 中使用echarts”。一、npm安装 echarts 、echarts-for-react:npm install echarts --savenpm install --save echarts-for-react二、引入模块,这里最好按需引入:import echarts from 'echarts/lib原创 2020-07-31 09:31:58 · 5644 阅读 · 4 评论 -
初识react(11)——用中括号更新传入数据对应的状态
// 更新对应的状态handleChange = (name, val) => { // 更新状态 this.setState({ [name]: val // 属性名不是name, 而是name变量的值 })};InputItem placeholder='请输入用户名' onChange={val => {this.handleChange('username', val)}}>用户名:</InputItem><I原创 2020-07-10 12:13:44 · 495 阅读 · 0 评论 -
初识react(10)——axios使用 FormData 发送参数,后端接收不到数据
在用 react 和后端交互时,曾出现 axios 使用 FormData 发送参数,后端接收不到数据的状况。在网上看到有人说是需要设置 header 头,但没什么作用。后来发现网上有这样一种写法: const instance = axios.create({ withCredentials:true});instance.post(url,formData) .then...原创 2020-04-20 09:41:35 · 1363 阅读 · 2 评论 -
初识react(9)——实现 axios 的封装使用
在搭建好react脚手架项目后(使用脚手架搭建项目的博客),我们经常会使用axios 发送请求与后端交互,下面是关于 axios 的使用的内容。先安装axios:npm install axios --save在 src 目录下新建一个 server.js 的文件,代码如下:import axios from 'axios'import qs from 'qs'import {message} from 'antd';//对 get post方法 进行封装let http = {原创 2020-04-18 22:05:43 · 796 阅读 · 2 评论 -
初识react(8)——引入 public 文件夹下的图片显示不出来
前段时间用react写项目时曾遇到 引入在 public 文件夹下的图片显示不出来 的问题,虽然很快解决了,但我初次使用react会遇到这个问题,说明也会有一部分人也会遇到这个问题,还是总结一下吧,嘿嘿???? 此时我将图片存在 public 文件夹下的 images 文件夹里,如下图所示: 这种情况下,在 react 项目的 jsx 文件里应该这样引入图片:<img src="/...原创 2020-04-18 21:39:00 · 7554 阅读 · 4 评论 -
初识react(7)——利用 react-app-rewired 实现按需打包
首先下载 react-app-rewired:npm install --save-dev babel-plugin-import react-app-rewired定义加载配置的js模块——在项目根目录下创建 config-overrides.js 文件,代码如下:const {injectBabelPlugin} = require('react-app-rewired');mod...原创 2020-04-17 18:18:22 · 2195 阅读 · 2 评论 -
初识react(6)——多种方法实现跨域请求
解决跨域: 1. 正向代理——开发环境:一个位于客户端和目标服务器之间的代理服务器。为了获取到目标服务器的内容,客户端向代理服务器发送一个请求,代理服务器帮助我们去目标服务器里面获取数据并返回给我们。 2. 反向代理——上线环境:可以通过代理服务器来接受网络上的请求链接,然后将这个请求转发给内部的网络服务器,并把这个服务器上得到的数据返回给网络请求的客户端。此时代理服务器对外的表现就是...原创 2020-04-13 10:01:25 · 385 阅读 · 0 评论 -
初识react(5)——怎么截取数组中部分数据
最近做react项目时,遇到这样一个问题:遍历数据为23条,我想分别提取前20条,第21条,第22条,和第23条数据。可能是java和js学的不好,第一时间没想到怎么写。 后来知道可以用arr.slice(start,end)实现。 slice 方法返回的是一个 Array 对象,其中start指的是想要截取的头部下标,end是尾部下标,但不包括end元素。例如:let exam_o...原创 2020-04-01 09:08:58 · 3648 阅读 · 0 评论 -
初识react(4)——在react-app中如何实现md5加密
当我们用react-app做项目时,会有对用户密码加密的操作,下面给大家分享:在react-app中如何实现md5加密。 如果你不知道如何用react-app搭建脚手架项目,可去看我的博客 初识react(1)——使用脚手架创建项目 下面步入正题,1. 首先npm下载md5:npm install --save js-md5 如下图所示: 2. 引入 js-md5:...原创 2020-03-31 09:09:42 · 3165 阅读 · 0 评论 -
初识react(3)——react点击事件如何获取当前dom元素
前不久做react项目时遇到了一个问题:设置一个点击事件后,无法获取当前dom元素。 比如我想在点击下图中的“关闭”图标后,将这部分内容隐藏。 我刚开始是按照之前jQuery的写法去写的,代码如下:closeInfo=()=>{ $(this).parent().hide();}; 然而却没有达到我想要的效果,$(this)并没有获取到当前dom元素。 后...原创 2020-03-31 08:48:15 · 3351 阅读 · 0 评论 -
初识 react(2)——如何在 React 中使用 font awesome 图标
最近在做react项目,过程中遇到了一些问题。比如: 如何在 react 中使用 font awesome 图标? 平时我们都是在 HTML 中引入<link rel="stylesheet" href="css/font-awesome.min.css" /> 并在项目中引入 fonts 文件,便成功使用 font awesome 图标。 但在react项目中...原创 2020-03-21 19:24:10 · 794 阅读 · 0 评论 -
初识react(1)——使用脚手架创建项目
最近在学react,看了些基本知识的视频,奈何下手做项目时多遇坎坷,故记录这一路的学习。全局下载create-react-appnpm install -g create-react-app创建项目create-react-app 项目名例如:create-react-app demo下载成功后打开项目,项目目录如下:...原创 2020-03-20 09:43:02 · 252 阅读 · 0 评论