react
文章平均质量分 93
Felix_XY
腹有雅量气自华
展开
-
(一)React初步
目录--Reach的介绍:--搭建React开发环境之前的准备工作--搭建React开发环境的第一种方法--搭建React开发环境的第二种方法–Reach的介绍:–React来自于Facebook公司的开源项目–React可以开发单页面应用 (spa单页面应用)–react 组件化模块化 开发模式–React通过对DOM的模拟(虚拟DOM),最大限度的减少与DOM的交互(数据绑...原创 2019-09-26 16:17:01 · 270 阅读 · 0 评论 -
(十五)Ant DesignUI使用
1.antd官网:[antd官网](https://ant.design/docs/react/introduce-cn)2、React中使用Antd1、安装antd npm install antd --save / yarn add antd / cnpm install antd --save3、在您的react项目的css文件中引入 Antd的css@...原创 2019-09-26 17:02:21 · 834 阅读 · 0 评论 -
(十四)React路由react-router4.x的动态路由以及get传值
–动态路由实现页面跳转//首先在根组件引入router配置return( <Router> <div> <header className="title"> <Link to='/'>首页</> <Link to='/news'>新闻&...原创 2019-09-26 16:49:19 · 374 阅读 · 0 评论 -
(十三)React路由react-router4.x的基本配置
–react-router可以让跟组件动态的挂载其他的不同组件–根据用户访问的地址动态的加载不同的组件步骤:–1 安转模块cnpm install react-router-dom --save–2 引入模块//先引入需要路由的组件import Home from './component/Home';import New from './component/News';imp...原创 2019-09-26 16:47:46 · 277 阅读 · 0 评论 -
(十二)React生命周期函数
在使用React的时候, 我们的DOM节点大多都是通过动态的渲染来实现的,所以很关键的一部分便是他的一个生命周期函数的使用, 将方法或者代码写到合适的生命周期函数中, 可以很大程度提高我们的页面的性能.–React生命周期函数:–组件加载之前,组件加载王城,以及组件更新数据, 组件销毁触发一些列的方法,这就是组件的生命周期函数–组件加载完成的时候触发的函数:–construct...原创 2019-09-26 16:45:57 · 200 阅读 · 0 评论 -
(十一)React获取数据axios插件fetch-jsonp插件使用
目录--react获取服务器API接口的数据:axios使用`--安装axios:``--引入axios``--使用axios`jsonp方式`--安装fetch-jsonp``--引入模块``--使用`–react获取服务器API接口的数据:react中没有提供专门的请求数据的模块,但是我们可以使用第三方请求数据模块实现请求数据–1 axios https://github....原创 2019-09-26 16:42:07 · 524 阅读 · 0 评论 -
(十)React propTypes defaultProps
–父组件给子组件传值:–defaultProps: 父子组件传值中,如果父组件调用子组件的时候不给子组件传值,则可以在子组件中使用defaultProps定义的默认值–propTypes: 验证父组件传值类型合法性–上面两个属性都是定义在子组件中–1 defaultProps,默认属性,也就是在父组件调用子组件的时候没有传递属性值给子组件,然后需要显示子组件的默认值,//具体...原创 2019-09-26 16:35:44 · 244 阅读 · 0 评论 -
(九)React父子组件之间传值
–简介:–React中的组件: 解决html标签构建应用的不足–使用组件的好处: 把公共的功能单独抽离成一个文件作为一个组件,哪里使用哪里引入.–父子组件: 组件的相互调用中,我们把调用者成为父组件,被调用者成为子组件–父子组件传值(react 父子组件通信) :父组件给子组件传值–1. 在调用子组件的时候定义个属性,–2 子组件里面this.props.msg说明: 父组件不...原创 2019-09-26 16:33:42 · 247 阅读 · 0 评论 -
(八)React实现数据持久化
–首先封装一个数据持久化的组件var storage={ set(key, value){//增加 localStorage.setItem(key, JSON.stringify()); }, get(key){//获取 return JSON.parse(localStorage.getItem(key)); }, r...原创 2019-09-26 16:32:22 · 2352 阅读 · 1 评论 -
(七)React实现ToDoList
import React,{Component} from 'react';import '../assets/css/index.css';class Todolist extends Component { constructor(props) { super(props); this.state = { list:[...原创 2019-09-26 16:30:43 · 267 阅读 · 0 评论 -
(六)React表单详解
–首先介绍几个概念–非约束性组件:(只需要获取model中的值)<input type="text" defaultValue="a" />这个defaultValue其实就是原生DOM中的value属性这个value值就是用户输入的内容,React完全不管理输入的过程–约束性组件:(需要实现MVVM)<input type="text" value={th...原创 2019-09-26 16:29:54 · 278 阅读 · 0 评论 -
(五)React双向数据绑定
import React,{Component} from 'react';class Todolist extends Component { constructor(props) { super(props); this.state = { username:"111" }; } inpu...原创 2019-09-26 16:27:45 · 241 阅读 · 0 评论 -
(四)React表单初步
import React from 'react';class List extends React.Component { constructor(props) { super(props); this.state = { username:'' }; } inputChange=()=&g...原创 2019-09-26 16:26:54 · 230 阅读 · 0 评论 -
(三)React事件方法
import React, { Component } from 'react';class Demo2 extends React.Component{ constructor(props){ super(props); this.state={ msg:'我是一个Demo组件', msg1:'我是一个D...原创 2019-09-26 16:26:02 · 252 阅读 · 0 评论 -
(二)React目录结构分析、创建组件、JSX语法、绑定数据
目录--目录结构分析--创建第一个组件--绑定属性--引入本地图片--引入远程图片–目录结构分析当我们按照第一篇文章的任意一种方式初始化了一个React项目之后,便可以看到以下的一个目录结构(在vscode编辑器中打开的样式):--node_modules 模块安装后的文件--public 公共目录,脚手架自动生成,一般无需关心 -index.html 主页 -ani...原创 2019-09-26 16:24:42 · 297 阅读 · 0 评论 -
(十六) React整合SpringBoot
目录背景正文build 前端build 后端build完后前后端目录结构疑惑消除完善功能总结背景之前所做的一个项目是一个完全的前后端分离的项目, 所采用技术或者组件分别如下:前端: React路由以及数据请求: Nginx后端: SpringBoot正常情况的开发一般是一个这样的流程:前端通过npm进行依赖的管理, 代码编写完之后直接进行前端打包后端通过maven进行管理,......原创 2019-09-26 18:43:19 · 4398 阅读 · 3 评论