React
zhaihaohao1
这个作者很懒,什么都没留下…
展开
-
React学习22----React UI框架 Antd (Ant Design)配置react-app-rewired按需加载Antd的css
高级配置:文档(以文档为准)https://ant.design/docs/react/use-with-create-react-app-cn上一篇,我们现在已经把组件成功运行起来了,但是在实际开发中,上面的例子实际上加载了全部的 antd 组件的样式(对前端加载速度有影响)。所以我们要进行高级配置具体配置步骤:1、安装antdcnpm install antd --save2、安...原创 2019-02-27 16:49:13 · 1101 阅读 · 0 评论 -
React学习21----React UI框架Antd(Ant Design)的基本使用
Ant Design 现在支持:react,angular,vue 3个框架官网地址:https://ant.design/index-cn具体使用:1、antd官网:https://ant.design/docs/react/introduce-cn2、React中使用Antd2.1安装antd npm install antd --save / yarn add a...原创 2019-02-27 14:54:33 · 7190 阅读 · 0 评论 -
React学习20----react-router4.x中实现路由模块化,以及嵌套路由父子组件传值
把https://blog.csdn.net/zhaihaohao1/article/details/87966970中的路由封装成模块使用起来更加方便:封装1:把路由定义成一个数组 routes配置的时候循环数组,配置如下:App.jsimport React, { Component } from 'react';import logo from './assets/ima...原创 2019-02-27 10:13:47 · 993 阅读 · 0 评论 -
React学习19----react-router4.x路由的嵌套
路由的嵌套:举例说明:(下面例子)在 App.js 中 配置路由 User ,在User 里面在配置Info组件的路由具体例子如下:效果图:项目结构:最核心的两个类:App.js 中配置 Home.js 和 User.js 的路由:import React, {Component} from 'react';import logo from './asset/images/...原创 2019-02-27 09:57:30 · 485 阅读 · 0 评论 -
React学习18----react-router4.x中使用js跳转路由
在 https://blog.csdn.net/zhaihaohao1/article/details/87911954中必须使用Link(链接)跳转,就是要必须点击,才能跳转。那么,怎样才能实现,自动跳转,比如,登录后成功后跳转页面具体步骤如下:0、安装 cnpm install react-router-dom --save1、要引入Redirectimport {Browser...原创 2019-02-27 09:41:24 · 689 阅读 · 0 评论 -
React学习17_1----package.json文件和node_modules文件夹
package.json 文件 引用模块的名称node_modules 文件夹(包括里面的文件) 模块的实际文件node_modules 手动删除,但是package.json 必须在cd 到项目目录下,执行npm install命令,会根据 package.json 中引用模块的名称重新下载并生成node_modules文件夹在实际开发中,代码在git 或者 svn ...原创 2019-02-26 09:35:43 · 2519 阅读 · 0 评论 -
React学习17----项目练习,外卖详情页,react解析html
除了上面的学的之外react解析html如果接口返回一个html标签例如<p>八宝酱菜</p>这样解析出来:<div className="p_content" dangerouslySetInnerHTML={{__html:<p&原创 2019-02-26 09:32:36 · 463 阅读 · 0 评论 -
React学习16----项目练习,外卖列表页
巩固学过的知识:数据请求:https://blog.csdn.net/zhaihaohao1/article/details/87911524配置路由https://blog.csdn.net/zhaihaohao1/article/details/87911954动态路由传值https://blog.csdn.net/zhaihaohao1/article/details/87912...原创 2019-02-26 09:21:57 · 623 阅读 · 0 评论 -
React学习15----路由react-router4.x使用get传值,动态路由传值
在 https://blog.csdn.net/zhaihaohao1/article/details/87911954 的基础上实现get传值结合下面的例子:1、配置路由 在App.js中 <Route path="/product" component={Product}/> <Route path="/productContent" compon原创 2019-02-25 10:25:39 · 531 阅读 · 0 评论 -
React学习14----路由 react-router4.x的基本配置,根据路由跳转页面
react路由的配置:1、找到官方文档 https://reacttraining.com/react-router/web/example/basic2、安装 cnpm install react-router-dom --save3、找到项目的根组件引入react-router-domimport { BrowserRouter as Router, Route, Link } fr...原创 2019-02-25 10:04:48 · 410 阅读 · 0 评论 -
React学习13----生命周期函数
文档:https://reactjs.org/docs/react-component.htmlReact生命周期函数:组件加载之前,组件加载完成,以及组件更新数据,组件销毁。触发的一系列的方法 ,这就是组件的生命周期函数组件加载的时候触发的函数:constructor 、componentWillMount、 render 、componentDidMount组件数据更新的时候触发的...原创 2019-02-25 09:53:36 · 181 阅读 · 0 评论 -
React学习12----请求接口数据
react获取服务器APi接口的数据:react中没有提供专门的请求数据的模块。但是我们可以使用任何第三方请求数据模块实现请求数据我们使用 axios 插件,来请求接口数据使用如下:查看文档: axios https://www.npmjs.com/package/axios1、安装axios模块npm install axios --save / npm in...原创 2019-02-25 09:43:48 · 5733 阅读 · 0 评论 -
React学习11----父组件给子组件传值时defaultProps和propTypes使用
都是定义在子组件里面defaultProps:父子组件传值中,如果父组件调用子组件的时候不给子组件传值,可以在子组件中使用defaultProps定义的默认值propTypes:验证父组件传值的类型合法性 1、引入import PropTypes from 'prop-types'; 2、类.propTypes = { name: Pr...原创 2019-02-23 10:41:51 · 867 阅读 · 0 评论 -
React学习10----父子组件之间相互传值
React中的组件: 解决html 标签构建应用的不足。使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入。父子组件:组件的相互调用中,我们把调用者称为父组件,被调用者称为子组件项目结构:下面的例子:Father.js 是父组件,Son.js是子组件父组件给子组件传值1.父组件中,在调用子组件的时候定义一个属性title = {this.state.ti...原创 2019-02-23 10:02:52 · 582 阅读 · 0 评论 -
React学习09----localStorage存储数据,封装模块
ocalStorage 是es5提供的:ocalStorage 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去删除。ocalStorage 存储字符串。常见用法:存储数据localStorage.setItem(key,value);拿到数据localStorage.getItem(key);删除数据localStorage.removeItem(key);项目...原创 2019-02-22 15:04:25 · 3134 阅读 · 0 评论 -
React学习08----demo练习2
React学习08----demo练习2继续完成todolist的功能http://www.todolist.cn效果:项目结构:源码:TodoList.jsimport React from 'react';class TodoList extends React.Component{ constructor(props) { super(props)...原创 2019-02-22 14:56:49 · 201 阅读 · 0 评论 -
React学习07----demo练习1
做一个仿 todolist 的功能http://www.todolist.cn效果:项目结构:代码:ToDoList.jsimport React from 'react';class ToDoList extends React.Component { constructor(props) { super(props); this.s...原创 2019-02-22 14:45:56 · 206 阅读 · 0 评论 -
React学习06----约束性和非约束性组件,以及常见标签的使用并获取值
项目结构:约束性和非约束性组件:非约束性组: 这个 defaultValue 其实就是原生DOM中的 value 属性。这样写出的来的组件,其value值就是用户输入的内容,React完全不管理输入的过程。约束性组件:这里,value属性不再是一个写死的值,他是 this.state.username, this.state.username 是由 this.handleChang...原创 2019-02-21 15:49:24 · 369 阅读 · 0 评论 -
React学习05----事件对象event,拿到input输入框的值,类似Vue的双向数据绑定
项目结构:事件对象:在触发DOM上的某个事件时,会产生一个事件对象event。这个对象中包含着所 有与事件有关的信息常用信息有dom节点,dom属性例子:Home.jsimport React from 'react';/** * 事件对象:在触发DOM上的某个事件时,会产生一个事件对象event。这个对象中包含着所有与事件有关的信息 * 常用信息有dom节点,dom属性...原创 2019-02-21 15:39:32 · 1506 阅读 · 0 评论 -
React学习04----点击事件,函数的使用
项目结构:定义一个函数getData() 点击按钮后调用函数Home1.js 代码:import React from 'react';import '../assets/css/index.css';/** * 定义函数 */class Home1 extends React.Component{ // 子类必须在constructor方法中调用super方法,否则...原创 2019-02-21 10:21:11 · 513 阅读 · 0 评论 -
React学习03----绑定属性,显示图片,循环数据
项目结构:1、绑定属性注意:class 要变成 classNamefor 要变成 htmlForstyle属性和以前的写法有些不一样对应的源码:Homes.jsimport React from 'react';//引入index.css文件import '../assets/css/index.css';/*react绑定属性注意: class要换成classN...原创 2019-02-20 17:08:49 · 508 阅读 · 0 评论 -
React学习02----基本使用
项目结构:index.js是入口文件,引入 App.js,App.js是根组件,用来调用别的组件整理一下默认的目录新建一个assets,放静态文件新建一个components,放自己定义的组件基本语法在 components 文件夹下的创建一个组件 Home.js// 引入 Reactimport React, { Component } from 'react';// 注意...原创 2019-02-20 09:53:35 · 282 阅读 · 0 评论 -
React学习01----环境搭建
介绍:React来自于Facebook公司的开源项目React 可以开发单页面应用 spa(单页面应用)react 组件化模块化 开发模式React通过对DOM的模拟(虚拟dom),最大限度地减少与DOM的交互 (数据绑定)react灵活 React可以与已知的库或框架很好地配合。react 基于jsx的语法,JSX是React的核心组成部分,它使用XML标记的方式去...原创 2019-02-20 09:27:43 · 265 阅读 · 0 评论