![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react全家桶
陌上浮屠
这个作者很懒,什么都没留下…
展开
-
1.3 react组件
1:组件的特点:复用+组合+可维护 2:react组件声明的2种方式:函数声明+类声明;用法跟jsx一样;可以跟jsx混合 3:react如何区分组件跟jsx元素,组件名开头大写 4:可以通过属性给组件传值propsimport React from 'react';import ReactDOM from 'react-dom';import './index.css';//...原创 2018-03-14 21:43:07 · 112 阅读 · 0 评论 -
react路由使用二
项目结构如下: index.js代码吐下:import React from 'react';import ReactDOM from 'react-dom';import App from './App';import registerServiceWorker from './registerServiceWorker';ReactDOM.render(<App ...原创 2018-06-04 22:33:45 · 976 阅读 · 0 评论 -
create-react-app中的注意事项
1:所有组件的中的this指的组件本身;所以window上绑定的所有属性跟方法必须用window方法调用;window方法不能省略原创 2018-06-22 20:57:55 · 1417 阅读 · 0 评论 -
react基础
1:react安装 creat-react-app是开始构建一个全新单页面应用的最好方式 npm install -g create-react-app create-react-app my-app cd my-app npm start2:react初体验 ReactDOM.render( <h1>test&am原创 2018-02-21 12:32:17 · 194 阅读 · 0 评论 -
react全家桶实战
Tab.jsimport React,{Component} from 'react'import {Link,NavLink} from 'react-router-dom'export default class Tab extends Component{ constructor(){ super() } render(){ ...原创 2018-06-17 08:13:44 · 4916 阅读 · 0 评论 -
redux实战
1:action跟reducers是在组建中通过装饰器连接起来的;在这个之前二者没有任何联系;第一部分:action——session.jsimport * as Types from '../action-types'import { toReg } from '../../api/home'let actions={ regiserFun(){ ...原创 2018-07-04 23:36:43 · 297 阅读 · 0 评论 -
react中给函数传递参数
1: <input type="button" value='登 录' className='login-button' onClick={this.loginAjax.bind(this,'01')}/>原创 2018-07-07 16:26:28 · 13672 阅读 · 1 评论 -
react路由使用
1:插件添加 cnpm install react-router-dom -S2:app.js书写import React, { Component } from 'react';//路由的2种形式: hash(HashRouter) , H5的historyApi(BroswerRouter)是路由的容器,是组件,要包在路由的外面import { HashRouter ...原创 2018-06-04 19:08:45 · 8927 阅读 · 0 评论 -
1.1 JSX基础知识
import React from 'react';import ReactDOM from 'react-dom';import './index.css';// import App from './App';import registerServiceWorker from './registerServiceWorker';// ReactDOM.render(&lt;App ...原创 2018-03-13 23:33:44 · 194 阅读 · 0 评论 -
1.2 最简单的renden实现
// 最简单的renden实现function ReactElement(type,props) { this.type=type this.props=props}function createElement(type,props,...children) { if(children.length==1){ children=children[0]...转载 2018-03-12 23:08:22 · 289 阅读 · 0 评论 -
1.4 属性应用
1:属性是由外界传递的,外面不能改属性,只有状态是属于组件自己的 2:声明组件的方式: (1)函数声明方式(名字开头大写),没有生命周期,没有状态,没有this (2)类声明(componentDidMount渲染完成)(componentWillUnmount组件将要卸载)import React,{Component} from 'react'import ReactDOM f...原创 2018-03-14 22:56:51 · 151 阅读 · 0 评论 -
触发事件改变状态
触发事件改变状态import React,{Component} from 'react'import ReactDOM from 'react-dom'import 'bootstrap/dist/css/bootstrap.css'//什么是符合组件:将多个组件进行组合,例如调用2次Counter组件;//结构非常复杂时,可以把组件分离开;//复合组件有 父子关系(父组件数据传递...原创 2018-03-14 23:54:31 · 1379 阅读 · 0 评论 -
1.16 父组件传值给子组件
react中需要将数据一层层向下传递,数据是单向数据流import React,{Component} from 'react'import ReactDOM from 'react-dom'import 'bootstrap/dist/css/bootstrap.css'//什么是符合组件:将多个组件进行组合,例如调用2次Counter组件;//结构非常复杂时,可以把组件分离开;/...原创 2018-03-15 00:12:16 · 380 阅读 · 0 评论 -
1.16 子父组件的通信
子组件改变父组件的状态:通过父亲传递给儿子一个函数,儿子调用父亲的函数讲值传递给父亲,父亲更新值import React,{Component} from 'react'import ReactDOM from 'react-dom'class Panel extends Component{ constructor(){ super() this...原创 2018-03-17 11:18:59 · 160 阅读 · 0 评论 -
1.17 受控组件和非受控组件
1:受状态控制的组件,必须要有onchange方法,否则不能使用 2:受控组件可以赋予默认值(官方推荐使用受控组件)// 实现数据双向绑定import React,{Component} from 'react'import ReactDOM from 'react-dom'class Input extends Component{ constructor(){ ...原创 2018-03-17 13:12:36 · 1544 阅读 · 0 评论 -
1.20 实现百度搜索
1:axios不支持jsonpimport React, {Component} from 'react'import ReactDOM from 'react-dom'// https://github.com/webmodules/jsonp包import oldJSONP from 'jsonp'function jsonp(url, opts = {}) { re...原创 2018-03-17 20:37:11 · 533 阅读 · 1 评论 -
1.18 生命周期
生命周期流程图: import React, {Component} from 'react'import ReactDOM from 'react-dom'//defaultProps->constructor->renderclass Panel extends Component {// class Panel extends React.PureComponen...原创 2018-03-18 11:19:58 · 193 阅读 · 0 评论 -
react组件化
1:什么是react? (1)react是一个用于构建用户界面的JS库 (2)核心专注于视图,目的实现组件化开发 2:组件化概念: 我们可以很直观的将一个复杂的页面分割成若干个独立的组件,每个组件包含自己的逻辑和样式,再将这些独立组件组合成完成一个复杂的页面,这样既减少了逻辑复杂度,有实现了代码的重用; (1)可组合:一个组件可以和其它的组件一起使用,或者可以直接嵌套再另外一个组件内部 ...原创 2018-03-12 17:40:51 · 931 阅读 · 0 评论 -
switch开关
1:我们将字符串进行封装:字符串不能绑定事件 2:将字符串变换成DOM元素 3:提取公用的类,如果想渲染DOM,可以通过setState 4:模拟实现了一个渲染的方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>原创 2018-03-12 21:17:18 · 2757 阅读 · 0 评论 -
create-react-app安装出错问题解决
直接上图 解决方法://换源npm config set registry https://registry.npm.taobao.org//配置后通过以下方法验证是否成功npm config get registry设置成功后,再次执行create-react-app,当然成功啦。 ...原创 2018-07-30 09:06:42 · 7090 阅读 · 0 评论