随笔分类 - 前端歌谣歌谣-学习篇React-好客租房笔记
摘要：3.2事件对象 可以通过事件处理程序的参数 React中的事件对象叫做:合成事件(对象) 合成事件:兼容所有浏览器 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 import Hello fro
阅读全文
摘要：函数组件又叫做无状态组件 类组件叫做有状态组件 状态state即数据 函数组件没有自己的状态 值负责数据的展示 类组件有自己的状态 负责更新UI 让页面“”动”起来
阅读全文
摘要：5.1state的基本使用 状态:数据 是组件内部的私有数据 只能再组件内部使用 state的值是对象 表示一个组件中可以有多个数据 获取数据 this.state //导入react import React from 'react' import ReactDOM from 'react-dom
阅读全文
摘要：状态是改变的 语法:this.setstate 千万不要直接改变this.setState setState 修改state 更新ui 数据驱动视图 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件
阅读全文
摘要：从jsx中抽离过多js逻辑代码 会显得非常混乱 推荐:将逻辑抽离到单独的方法中 保证jsx结构清晰 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1：类组件必须以大写字母开头 // 约
阅读全文
摘要：1箭头函数 利用箭头函数自身不绑定this的特点 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1：类组件必须以大写字母开头 // 约定2:类组件应该继承react.component
阅读全文
摘要：事件this指向bind 利用ES5中bind方法 将事件处理程序中的this和组件实例绑定在一起 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1：类组件必须以大写字母开头 // 约
阅读全文
摘要：1能够知道什么是jsx 2能够使用jsx创建react元素 3能够在jsx使用javascript表达式 4能够使用jsx的条件渲染和列表渲染 5能够给jsx添加样式 jsx的基本使用 jsx中使用javascript表达式 jsx的条件渲染 jsx的列表渲染 jsx的样式处理
阅读全文
摘要：1.1createElement()的问题 1繁琐不简洁 2不直观 无法一眼看出所描述的结构 3不优雅 用户体验不爽 React.createElement("div", {classsName:"shopping-list"}, React.createElement("h1",null,"sho
阅读全文
摘要：为什么脚手架中可以使用jsx语法 1jsx不是标准的ECMAScript ，他是ECMAScript的语法扩展 2需要使用babel编译处理后 才能在浏览器环境中使用 3create-react-app脚手架已经有该配置 无需手动配置 4编译jsx包为@babel/preset-react
阅读全文
摘要：3.3在脚手架中使用React //第一步导入react import React from "React" import ReactDOM from "react-dom" //第二步创建react元素 const title = React.createElement('h1',null,"he
阅读全文
摘要：3.2使用react脚手架初始化 npx命令介绍 npm v5.2.0引入的一条命令 目的：提升包内提供的命令行工具的使用体验 原先:先安装脚手架包 再使用这个包中提供的命令 现在无需安装脚手架包 就可以直接使用这个包提供的命令 补充说明 1推荐使用:npx create-react-app my-
阅读全文
摘要：React总结 1react是构建用户组件的javascript库 2使用react是,推荐使用脚手架方式 3初始化项目命令：npx create-react-app my-app 4启动项目命令:yarn start(npm start) 5react.createElement()方法创建rea
阅读全文
摘要：3.1react脚手架意义 1脚手架是开发现代web应用的必备 2充分利用webpack babel eslint等工具进行使用 3零配置 4关注业务即可 3.2使用react脚手架初始化项目 1初始化项目 命令:npx create-react-app my-app 2启动项目 cd my-app
阅读全文
摘要：2.2方法说明 React.createElement //第二步创建react元素 //参数1:元素名称 //参数2:元素属性 //参数3:元素的子节点 //创建一个h1和p const title=React.createElement('h1',null,"Hello geyao", Reac
阅读全文
摘要：2.1React的安装 安装命令:npm i react react-dom react 包是核心,提供创建元素,组件等功能 react-dom包提供DOM相关功能等 2.2React的使用 1引入react和react-dom两个js文件 <!-- 第一步 引入模块 --> <script src
阅读全文
摘要：1.1什么是react React是一个用于构建用户界面的javascript库 用户界面:HTML页面 React主要用来HTML 或者沟通构建web应用 如果从MVC的角度来看 react仅仅是从视图层 也就是只负责试图的渲染 而并非提供了完整的M和C的功能 React起源于FaceBook的内
阅读全文
摘要：学习目标 能够说出React是什么 掌握react的特点 掌握react的基本使用 能够使用react脚手架 学习目录 react概述 react基本使用 react脚手架
阅读全文
