JavaEE在职加薪课好客租房项目实战视频教程课程介绍:       本课程采用SOA架构思想进行设计,基于目前主流后端技术框架SpringBoot.SpringMVC.Mybaits.Dubbo等来实现一个完整的租房项目--好客租房.好客租房是一个无中介化房屋租赁平台.包含房源智能推荐.地图找房.行情查询.电子合同.限时秒杀等功能.通过本课程的学习,可以完成前端+后端+小程序全终端应用项目.主讲内容:章节一:ES6新特性以及ReactJS章节二:Ant Design以及Ant Design P…

children属性 表示组件标签的子节点 当组件标签有子节点是 props就会有该属性 props中的组件可以是任意属性 都是可以渲染的 //导入react     import React from 'react'     import ReactDOM from 'react-dom'           //导入组件     // 约定1:类组件必须以大写字母开头     // 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性     // 约定3:…

对于组件来说 props是外来的 无法保证使用者传入什么格式的数据 传入的数据格式不对 可能会导致组件内部报错 关键问题:不知道报错的具体原因 1安装包props-types 2导入props-types 3组件名.propTypes={}添加规则 //导入react     import React from 'react'     import ReactDOM from 'react-dom'     import PropTypes from "prop-types"    …

1常见类型:Array,bool,func,number,object,string 2React:element 3必填项:isRequred 4特定结构的想:shape({}) //导入react     import React from 'react'     import ReactDOM from 'react-dom'     import PropTypes from "prop-types"     //导入组件     // 约定1:类组件必须以大写字母开头    …

1给props设置默认值 //导入react     import React from 'react'     import ReactDOM from 'react-dom'     import PropTypes from 'prop-types'     //导入组件     // 约定1:类组件必须以大写字母开头     // 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性     // 约定3:组件必须提供render方法     // 约定…

app组件要传递给child组件 该如何处理 更好的姿势 跨组件传递数据 Provider 用来提供数据 Consumer用来消费数据 1调用React.createContext() 创建provider和comsumer消费两个组件 const {Provider,Consumer}=React.createContext() 2使用Provider <Provider> <div> <child1/> </div> </Provider>…

组件是封闭的 要接受外部数据应该通过props来实现 props的作用:接受传递给组件的数据 传递数据:给组件标签添加属性 接收数据:函数组件通过参数props接收数据 类组件通过this.props接受数据 函数组件 //导入react import React from 'react' import ReactDOM from 'react-dom'   //导入组件 // 约定1:类组件必须以大写字母开头 // 约定2:类组件应该继承react.component父类 从中可以使用父类的方…

特点 1可以给组件传递任意类型的数据 2props是只读的对象 只能读取属性的值 无法修改对象 3注意:使用类组件时 如果写了构造函数 应该将props传递给super() 否则 无法在构造函数 中获取到props //导入react import React from 'react' import ReactDOM from 'react-dom'   //导入组件 // 约定1:类组件必须以大写字母开头 // 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和…

获取评论信息 1使用受控组件方式创建表单 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1:类组件必须以大写字母开头 // 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性 // 约定3:组件必须提供render方法 // 约定4:render方法必须有返回值   class HelloWorld extends React.Component…

发表评论 1给按钮绑定点击事件 2在事件处理程序中 通过state获取评论信息 3将评论信息添加到state中 并调用setState()方法更新数据 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1:类组件必须以大写字母开头 // 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性 // 约定3:组件必须提供render方法 // 约定4:re…

边界问题 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1:类组件必须以大写字母开头 // 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性 // 约定3:组件必须提供render方法 // 约定4:render方法必须有返回值   class HelloWorld extends React.Component {     //初始化状态  …

1react组件介绍 组件是react中的一等公民 组件表示页面中的部分功能 组合多个组件实现完整的页面功能 特点 可复用性 独立 可组合…

class实例方法 利用箭头函数的class实例方法 //导入react import React from 'react'   import ReactDOM from 'react-dom' //导入组件   // 约定1:类组件必须以大写字母开头   // 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性   // 约定3:组件必须提供render方法   // 约定4:render方法必须有返回值   class HelloWorld extends…

1推荐使用class的实例方法 //导入react import React from 'react'   import ReactDOM from 'react-dom' //导入组件   // 约定1:类组件必须以大写字母开头   // 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性   // 约定3:组件必须提供render方法   // 约定4:render方法必须有返回值   class HelloWorld extends React.Comp…

实现 案例的数据 渲染评论列表 有评论 没有评论 暂无评论 获取评论信息 包括评论人和受控组件 发表评论 更新评论 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1:类组件必须以大写字母开头 // 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性 // 约定3:组件必须提供render方法 // 约定4:render方法必须有返回值   cla…

1渲染列表 在state定义数据 进行数据渲染 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1:类组件必须以大写字母开头 // 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性 // 约定3:组件必须提供render方法 // 约定4:render方法必须有返回值   class HelloWorld extends React.Compon…

1.1什么是react React是一个用于构建用户界面的javascript库 用户界面:HTML页面 React主要用来HTML 或者沟通构建web应用 如果从MVC的角度来看 react仅仅是从视图层 也就是只负责试图的渲染 而并非提供了完整的M和C的功能 React起源于FaceBook的内部项目 后有用来假设Instagram的网站 并与2013年开源 1.2React的特点 1声明式 你只需要描述UI看起来是什么样,就和写HTML一样 React负责渲染UI Bing在数据变化时候更…

学习目标 能够说出React是什么 掌握react的特点 掌握react的基本使用 能够使用react脚手架 学习目录 react概述 react基本使用 react脚手架…

渲染列表评论 1判断列表数据的长度是否为0 2如果为0 则渲染暂无评论 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1:类组件必须以大写字母开头 // 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性 // 约定3:组件必须提供render方法 // 约定4:render方法必须有返回值   class HelloWorld extends…

嵌入js表达式 数据存储在js中 语法{javascript表达式} 注意语法中是单大括号 不是双大括号 //导入react     import React from "react"           import ReactDOM from "react-dom"           //第一步创建jsx创建react元素     const name="geyao"     const title = <p className={{…

注意点 单大括号中可以使用任意的表达式 jsx自身也是js表达式 注意:js中的对是一个例外 写在style样式中 //导入react     import React from "react"           import ReactDOM from "react-dom"           //第一步创建jsx创建react元素     const fangfang=<p>我是方方</p>     const name="…

jsx中的条件渲染 场景:loding效果 条件渲染:根据条件渲染特定的jsx结构 可以使用if/else或者三元运算符和逻辑和运算符实现 //导入react import React from "react"   import ReactDOM from "react-dom"   //第一步创建jsx创建react元素   // const fangfang=<p>我是方方</p> // const name="geyao&qu…

如果要渲染一组数组 应该使用数组的map方法 注意:渲染列表时候添加key属性 key属性的值要保持唯一 原则:map()遍历谁 就给谁添加key属性 尽量避免索引号作为key //导入react import React from "react" import ReactDOM from "react-dom" //第一步创建jsx创建react元素 // const fangfang=<p>我是方方</p> // const name=&…

1行内样式-style <h1 style={{color:"red",backgroundColor:"skyblue"}}> jsx的样式处理 </h1> 2类名----className(推荐) <h1 className="title"></h1> //导入react import React from "react" import ReactDOM from "…

JSX 1jsx是react的核心内容 2jsx是在js代码中写HTML结构,是react中声明式的提现 3使用jsx配合嵌入的js表达式,条件渲染,列表渲染,可以描述任意ui结构 4推荐使用calssName的方式给jsx添加样式 5react完全利用js自身能力编写ui 而不是造轮子增强HTML功能…

1能够使用函数创建组件 2能够使用class创建组件 3能够给react元素绑定事件 4能够使用state和setstate 5能够处理事件中的this指向问题 6能够使用受控组件处理表单…

1使用函数创建组件 函数组件:使用js的函数或者箭头函数创建的组件 约定1:函数组件名称必须以 开头 约定2:函数组件必须有返回值 表示该组件的结构 如果返回值为null 表示不渲染任何内容 2.1使用函数创建组件 1渲染函数组件:用函数名作为组件标签名 2组件标签可以是单标签也可以是多标签 //导入react     import React from "react"           import ReactDOM from "react-dom"      …

2.2使用类创建组件 类组件:使用ES6的class创建的组件 约定1:类组件必须以大写字母开头 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性 约定3:组件必须提供render方法 约定4:render方法必须有返回值 //导入react     import React from "react"           import ReactDOM from "react-dom"           // 约定1:类组件必…

2.3抽离为单独组件 组件作为一个单独的个体,一般把每个组件放在单独的js中文件中 1创建hello.js 2在hello.js中导入React 3创建组件(函数或者类) hello.js子组件 //导入react     import React from "react"     //创建组件     class Hello extends React.Component{         render(){             return(                 &…

3.1事件绑定 React事件绑定语法和DOM事件语法相似 语法:on+事件名称={事件处理程序} 比如οnclick={()=>{}} //导入react     import React from 'react'           import ReactDOM from 'react-dom'     //导入组件     import Hello from './Hello'     // 约定1:类组件必须以大写字母开头           // 约定2:类组件应该继承react.c…