20.react库 入门
vue插件：
使用方式：Vue.use(插件名称);
{}/function
1、对象
export default {
install(Vue,options){
}
}
2、函数
export default (Vue,options) => {
}
插件里面传参数通过 propsData属性进行传递！
exp1:
import Toast from "./toast";
export default {
install(Vue,options){//1
//插件2种形式 1、标签 2、方法
//2、方法
Vue.prototype.$toast = ()=>{
let VueComponent = Vue.extend(Toast);
let oDiv = new VueComponent().$mount().$el;
console.log(111111,oDiv);
//111111 <div class="toast">toast插件-----msg默认值</div>
document.body.appendChild(oDiv);
setTimeout(()=>{
document.body.removeChild(oDiv);
},2000);
}
}
}
show(){
//传参数
this.$toast("自定义提示信息1")
}
res:先出现后消失
exp2:
import Toast from "./toast";
export default {
install(Vue,options){//1
//插件2种形式 1、标签 2、方法
//2、方法
let oDiv = null;
Vue.prototype.$toast = {
open(){
let VueComponent = Vue.extend(Toast);
oDiv = new VueComponent().$mount().$el;
console.log(111111,oDiv);
//111111 <div class="toast">toast插件-----msg默认值</div>
document.body.appendChild(oDiv);
},
close(){
setTimeout(()=>{
document.body.removeChild(oDiv);
},2000);
}
}
}
}
show(){
//传参数
this.$toast.open();
this.$toast.close();
}
res:
先出现后消失
exp3:
import Toast from "./toast";
export default {
install(Vue,options){//1
//插件2种形式 1、标签 2、方法
//2、方法
Vue.prototype.$toast= function(options){//2
console.log("options",options);
let VueComponent = Vue.extend(Toast);
if(typeof options == "string"){
options = {msg:options};
}
//options {msg: "自定义提示信息2"}
console.log("this",this);
//let vm = new Vue();
let vm = new VueComponent({
el:this.$el,
propsData:options //{msg:xxxxx}
});
console.log(this.$el);
/*<div class="home">
home
<input type="button" value="按钮"></div>*/
setTimeout(()=>{
//document.body.removeChild(oDiv);
},2000);
}
}
}
show(){
//传参数
this.$toast({msg:"自定义提示信息1"})
}
res:
react
JSX 语法
javascript xml ---> html
jsx其实就是 在script标签内写js代码
1、引入三个文件
react/react-dom/babel
cnpm react react-dom babel-standalone
2、type="text/babel"
3、ReactDOM.render(oEl,oApp,callback);
exp:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="babel.js"></script>
</head>
<script type="text/babel">
window.onload = function(){
//1获取元素app
let oApp = document.getElementById("app");
//2创建元素
/*let oDiv = document.createElement("div");
oDiv.innerHTML = "hello react!";
*/
//不需要引号 JSX
let oDiv = <div>hello react</div>;
//3插入、渲染
//oApp.appendChild(oDiv);
ReactDOM.render(oDiv,oApp,function(){
alert("页面渲染完成");
});
};
</script>
<body>
<div id="app"></div>
</body>
</html>
jsx:
1、class---> className
for --> htmlFor
2、只能有一个根节点，不能只有兄弟节点
3、单标签必须闭合
exp2:
<script type="text/babel">
//class --> className
//for ---> htmlFor
//必须有一个父节点 不能有兄弟节点
//html5 <input> <input/> 单标签必须闭合
ReactDOM.render(
//<div className="box">hello react</div>,
//<div><span>span1</span><span>span2</span></div>,
<div>
<label htmlFor="user">用户名</label>
<input type="text" id="user" value="" />
<img />
</div>,
document.getElementById("app")
);
</script>
exp2:
<script type="text/babel">
let oDiv = React.createElement("div",{
className:"box",
id:"div1",
//children:"hello react1"
children:["hello"," react"]
});
ReactDOM.render(
oDiv,
document.getElementById("app")
);
</script>
exp4:
<script type="text/babel">
/*
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
*/
ReactDOM.render(
React.createElement("ul",null,[
React.createElement("li",{key:1},"1111"),
React.createElement("li",{key:2},"222"),
React.createElement("li",{key:3},"333"),
]),
document.getElementById("app")
);
</script>
react赋值
1、字符串 "值"
2、变量 {变量} {"值"}
exp1:
<script type="text/babel">
//vue {{xxx}} react {xxx}
//v-bind:tilte="title" title={title}
let msg = "hello React!";
let title = "我是标题1"
ReactDOM.render(
<div title={title}>{msg}</div>,
document.getElementById("app")
);
</script>
exp2:
<script type="text/babel">
let msg = "hello!"
let id = "div1";
ReactDOM.render(
<div>
<div id="div1" >{msg}</div>
<div id={id} >{msg}</div>
<div id={"div1"} >{msg}</div>
</div>,
document.getElementById("app")
);
</script>
exp3:
<script type="text/babel">
let msg = "hello!"
let json = {width:"200px",height:"200px",background:"red"};
ReactDOM.render(
<div>
{ /*xxx <div style="width:200px;height:200px;background:red;">{msg}</div>//错误 */}
<div style={json}>{msg}</div>
<div style={{width:"200px",height:"200px",background:"pink"}}>{msg}</div>
</div>,
document.getElementById("app")
);
</script>
组件
1、组件名必须首字母大写
2、必须继承React.Component
3、必须有render函数并且有返回值
4、使用的时候必须和类目一致
class Test extends React.Component{
contructor(...args){
super(...args);
}
render(){
return <div>内容</div>
}
}
exp:
<script type="text/babel">
//自定义组件
class Test extends React.Component{
render(){
return <div>自定义组件</div>
}
}
ReactDOM.render(
<Test />,
document.getElementById("app")
);
</script>
事件：
1、事件名必须驼峰标识 onClick onMouseOver
2、事件后面必须跟函数 this有问题
解决
1、onClick={this.fn.bind(this)}
2、在构造函数内改变this
this.fn = this.fn.bind(this);
3、用箭头函数包
onClick={()=>{this.fn()}}
exp1:
this.fn.bind(this)
点击显示12.
<script type="text/babel">
//自定义组件
class Test extends React.Component{
constructor(){
super();
this.a = 12;
}
fn(){
console.log(1,this);
alert(this.a);
}
render(){
console.log(2,this);
return <div>
<input onClick={this.fn.bind(this)} type="button" value="按钮"/>
</div>
}
}
ReactDOM.render(
<Test />,
document.getElementById("app")
);
</script>
exp2:
this.fn = this.fn.bind(this);
显示11.
<script type="text/babel">
//自定义组件
class Test extends React.Component{
constructor(){
super();
this.a = 11;
this.fn = this.fn.bind(this);
}
fn(){
console.log(1,this);
alert(this.a);
}
render(){
console.log(2,this);
return <div>
<input onClick={this.fn} type="button" value="按钮"/>
</div>
}
}
ReactDOM.render(
<Test />,
document.getElementById("app")
);
</script>
exp3:
()=>{this.fn()}
显示12
<script type="text/babel">
//自定义组件
class Test extends React.Component{
constructor(){
super();
this.a = 12;
}
fn(){
console.log(1,this);
alert(this.a);
}
render(){
console.log(2,this);
return <div>
<input onClick={()=>{this.fn()}} type="button" value="按钮"/>
</div>
}
}
ReactDOM.render(
<Test />,
document.getElementById("app")
);
</script>
组件内的构造函数
super()必须写在第一位 ———— 自己明确的调用constructor构造函数
exp1:
错误的案例,属性不能直接修改,可以修改状态
<script type="text/babel">
//组件属性、参数
class Test extends React.Component{
constructor(...args){
super(...args);
}
plus(){
this.props.a++;
console.log(this.props.a);
}
render(){
return <div>
<span>{this.props.a}</span>
<input onClick={this.plus.bind(this)} type="button" value="plus" />
</div>
}
}
ReactDOM.render(
<Test a={1} />,
document.getElementById("app")
);
</script>
exp2:
状态 可变 可改 不能直接修改 this.state.xxx
必须通过set方法 this.setState({xxx:vlaue});异步
<script type="text/babel">
//定义状态 必须定义在构造函数内
class Test extends React.Component{
constructor(...args){
super(...args);
this.state = {
a:11,b:1
}
}
plus(){
//this.state.a++;
//异步 渲染需要时间
this.setState({
a:this.state.a+1
});
console.log(this.state.a);
}
render(){
console.log("渲染完成");
return <div>
<span>{this.state.a}-----{this.state.b}</span>
<input onClick={this.plus.bind(this)} type="button" value="plus" />
</div>
}
}
ReactDOM.render(
<Test />,
document.getElementById("app")
);
</script>
改变this
1、call 第二个参数不是数组
2、apply 第二个参数是数组
3、bind 返回一个改变了this指向的函数
属性 和 参数
属性 只读 不能修改
状态 可变 可改 不能直接修改 this.state.xxx
必须通过set方法 this.setState({xxx:vlaue});异步
exp:属性
输出17.
<script type="text/babel">
//组件属性、参数
class Test extends React.Component{
constructor(...args){
super(...args);
console.log(1111,args);
console.log(1111,this.props.a+this.props.b);
}
render(){
return <div>数据{this.props.a}-----{this.props.b}</div>
}
}
ReactDOM.render(
//<Test a="12" b="5"/>,
<Test a={12} b={5}/>,
document.getElementById("app")
);
</script>
style -----> {json}
exp1:
不可直接修改属性
<script type="text/babel">
class Test extends React.Component{
constructor(...args){
super(...args);
this.flag = true;
}
fn(){
this.flag = !this.flag
console.log(1,this.flag);
}
render(){
let json = {background:this.flag?"yellow":"pink"};
console.log(2,this.flag);
return <div>
<input style={json} onClick={this.fn.bind(this)} type="button" value="按钮"/>
</div>
}
}
ReactDOM.render(
<Test />,
document.getElementById("app")
);
</script>
exp2:
修改style状态
<script type="text/babel">
class Test extends React.Component{
constructor(...args){
super(...args);
this.state = {
flag : true
}
}
fn(){
//this.state.flag = !this.state.flag;
this.setState({
flag:!this.state.flag
});
}
render(){
let json = {background:this.state.flag?"yellow":"pink"};
return <div>
<input style={json} onClick={this.fn.bind(this)} type="button" value="按钮"/>
</div>
}
}
ReactDOM.render(
<Test />,
document.getElementById("app")
);
</script>
class ----> []
exp3:
修改class状态
<script type="text/babel">
class Test extends React.Component{
constructor(...args){
super(...args);
this.state = {
flag : true
}
}
fn(){
//this.state.flag = !this.state.flag;
this.setState({
flag:!this.state.flag
});
}
render(){
let arr = null;
if(this.state.flag){
arr = ["box","active"];
} else {
arr = ["box"];
}
return <div>
<input className={arr.join(" ")} onClick={this.fn.bind(this)} type="button" value="按钮"/>
</div>
}
}
ReactDOM.render(
<Test />,
document.getElementById("app")
);
</script>
案例:
轮播图:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{margin:0;padding:0;list-style:none;}
.banner{position:relative;width:520px; height:280px; margin:30px auto;overflow:hidden;}
.banner ul{position:absolute;width:300%; height:100%; transition:1s all ease;}
.banner ul li{float:left;width:520px; height:100%}
.banner ul li img{width:100%; height:100%;}
.banner ol{position:absolute;left:200px;bottom:50px;}
.banner ol li{ text-indent: -999999px;float:left;width:30px; height:30px; border-radius:50%; background: yellow;}
.banner ol li.active{background:pink;}
</style>
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="babel.js"></script>
<script type="text/babel">
let arr = [
"https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg",
"https://img.alicdn.com/tfs/TB1EZDNbzrguuRjy0FeXXXcbFXa-520-280.jpg_q90_.webp",
"https://img.alicdn.com/tps/i4/TB1VVIOIeuSBuNjy1Xcwu3YjFXa.png_q90_.webp"
];
class Banner extends React.Component{
constructor(...args){
super(...args);
this.state = {
iNow:0
}
console.log(this.props.list);
}
fn(index){
//alert(index);
this.setState({
iNow:index
});
}
render(){
let aUli = this.props.list.map((item,index)=><li key={index}><img src={item} /></li>);
let aOli = this.props.list.map((item,index)=><li className={this.state.iNow==index?"active":""} onClick={this.fn.bind(this,index)} key={index}>{index}</li>);
return (<div className="banner">
<ul style={{left:-520*this.state.iNow}}>
{aUli}
</ul>
<ol>
{aOli}
</ol>
</div>);
}
}
ReactDOM.render(
<Banner list={arr}/>,
document.getElementById("app")
);
</script>
<body>
<div id="app">
<!--
<div className="banner">
<ul>
<li><img src="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg"/></li>
<li><img src="https://img.alicdn.com/tfs/TB1EZDNbzrguuRjy0FeXXXcbFXa-520-280.jpg_q90_.webp"/></li>
<li><img src="https://img.alicdn.com/tps/i4/TB1VVIOIeuSBuNjy1Xcwu3YjFXa.png_q90_.webp"/></li>
</ul>
<ol>
<li className="active">1</li>
<li>2</li>
<li>3</li>
</ol>
</div> -->
</div>
</body>
</html>
20.react库 入门的更多相关文章
- React Native 入门基础知识总结
中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看 ...
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
- 基于Nodejs生态圈的TypeScript+React开发入门教程
基于Nodejs生态圈的TypeScript+React开发入门教程 概述 本教程旨在为基于Nodejs npm生态圈的前端程序开发提供入门讲解. Nodejs是什么 Nodejs是一个高性能Ja ...
- 数据分析与展示——NumPy库入门
这是我学习北京理工大学嵩天老师的<Python数据分析与展示>课程的笔记.嵩老师的课程重点突出.层次分明,在这里特别感谢嵩老师的精彩讲解. NumPy库入门 数据的维度 维度是一组数据的组 ...
- 数据分析与展示——Matplotlib库入门
Matplotlib库入门 Matplotlib库介绍 Matliotlib库是Python优秀的数据可视化第三方库. Matliotlib库的效果见:http://matplotlib.org/ga ...
- React Native入门教程 3 -- Flex布局
上一篇文章中介绍了基本组件的使用 React Native入门教程(笔记) 2 – 基本组件使用及样式 本节内容将继续沿用facebook官方例子介绍如何使用Flexbox布局把界面设计的多样化. 转 ...
- React Native入门教程2 -- 基本组件使用及样式
在上一篇文章中,我们学会了如何搭建React Native的环境(React Native入门教程(笔记) 1 – 开发环境搭建),不知道你们是否搭建好了呢,如果还没有,那么快动起小手,来体验RN带给 ...
- React实例入门教程(1)基础API,JSX语法--hello world
前 言 毫无疑问,react是目前最最热门的框架(没有之一),了解并学习使用React,可以说是现在每个前端工程师都需要的. 在前端领域,一个框架为何会如此之火爆,无外乎两个原因:性能优秀,开发 ...
- 【原创】React实例入门教程(1)基础API,JSX语法--hello world
前 言 毫无疑问,react是目前最最热门的框架(没有之一),了解并学习使用React,可以说是现在每个前端工程师都需要的. 在前端领域,一个框架为何会如此之火爆,无外乎两个原因:性能优秀,开发效率 ...
随机推荐
- .Net转Java.08.format
%[index$][标识][最小宽度]转换方式 [index$]可以用于表示对第index个参数进行格式化, // Java代码 String s1=String.format("%3$s, ...
- mysql 函数应用
mod 取余是用函数mod(numer1,number2),其返回的值为其余数值 如:mod(id,2) = 1 返回id号是奇数的id Email后缀提取 emailorg=RIGHT(EMail, ...
- 《分布式任务调度平台XXL-JOB》
一.简介 1.1 概述 XXL-JOB是一个轻量级分布式任务调度框架,其核心设计目标是开发迅速.学习简单.轻量级.易扩展.现已开放源代码并接入多家公司线上产品线,开箱即用. 1.2 特性 1.简单:支 ...
- 对Faster R-CNN的理解(1)
目标检测是一种基于目标几何和统计特征的图像分割,最新的进展一般是通过R-CNN(基于区域的卷积神经网络)来实现的,其中最重要的方法之一是Faster R-CNN. 1. 总体结构 Faster R-C ...
- Community宣言
Community宣言 一个幽灵,共产主义的幽灵,在欧洲游荡.为了对这个幽灵进行神圣的围剿,旧欧洲的一切势力,教皇和沙皇.梅特涅和基佐.法国的激进派和德国的警察,都联合起来了. 有哪一个反对党不被它的 ...
- 城市经纬度 json 理解SignalR Main(string[] args)之args传递的几种方式 串口编程之端口 多线程详细介绍 递归一个List<T>，可自己根据需要改造为通用型。 Sql 优化解决方案
城市经纬度 json https://www.cnblogs.com/innershare/p/10723968.html 理解SignalR ASP .NET SignalR 是一个ASP .NET ...
- 一起来学习linux创建用户useradd命令
linux创建用户useradd命令 原文地址:linux创建用户useradd命令 http://www.xfcodes.com/linuxcmd/user/24308.htm 一,adduser与 ...
- Mac 上安装maven
http://maven.apache.org/download.cgi 官网下载bin.tar 解压后放入某个目录: 配置环境变量: vim .bash_profile M2_HOME=/maven ...
- Atitit 关于处理环保行动联盟和动物解放阵线游击队的任命书 委任状
Atitit 关于处理环保行动联盟和动物解放阵线游击队的任命书 委任状 Uke 集团文化部部长兼emir 大酋长圣旨到!! In god we trust ,Emir Decree大酋长圣旨:: En ...
- MySql 三大知识点——索引、锁、事务
1. 索引 索引,类似书籍的目录,可以根据目录的某个页码立即找到对应的内容. 索引的优点:1. 天生排序.2. 快速查找.索引的缺点:1. 占用空间.2. 降低更新表的速度. 注意点:小表使用全表扫描 ...