最容易被收录的网站,网络推广平台公司,网站建设丿金手指下拉,五金配件网站建设报价React介绍
React.js是前端三大新框架#xff1a;Angular.js、React.js、Vue.js之一#xff0c;这三大新框架的很多理念是相同的#xff0c;但是也有各自的特点。
React起源于Facebook的内部项目#xff0c;因为该公司对市场上所有 JavaScript MVC 框架#xff0c;都不满…React介绍
React.js是前端三大新框架Angular.js、React.js、Vue.js之一这三大新框架的很多理念是相同的但是也有各自的特点。
React起源于Facebook的内部项目因为该公司对市场上所有 JavaScript MVC 框架都不满意就决定自己写一套用来架设Instagram 的网站。做出来以后发现这套东西很好用就在2013年5月开源了。
React可以作为一个js库来使用我们在页面上引用相关的js文件就可以使用它来做一些页面效果。
React也可以将界面拆分成一个个的组件通过组件来构建界面然后用自动化工具来生成单页面(SPA - single page application)应用系统。 —脚手架
快速开始
首先通过将React作为一个js库来使用来学习React的一些基本概念在页面上引入已经下载好的三个js文件就可以使用React了。
script srcjs/react.development.js/script
script srcjs/react-dom.development.js/script
script srcjs/babel.min.js/script其中前两个js文件是React的核心文件第三个js文件是一个转换编译器它能将ES6语法及jsx语法转换成可以在浏览器中运行的代码。
编写hello world程序
div idroot/div
script typetext/babel ReactDOM.render(h1Hello world!/h1,document.getElementById(root))
/script上面编写的不是真正的JavaScript代码因为上面是JavaScript代码和html的混合所以它的类型需要写成“text/babel”最终通过编译器编译成浏览器可以执行的js。
示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srcjs/react.development.js/scriptscript srcjs/react-dom.development.js/script!-- 以下js库负责编译es6语法和jsx语法编译成浏览器可以识别的语法 --script srcjs/babel.min.js/script
/head
body!-- react把生成的效果全部放到div里面 --!-- 标签和js写一块 --div idroot/divscript typetext/babel// 第一个参数jsx的对象 第二个参数是对象ReactDOM.render(h1hello world!/h1,document.getElementById(root))/script
/body
/htmlJSX语法
jsx语法是一种类似于html标签的语法它的作用相当于是让我们在JavaScript代码中直接写html代码但是jsx不完全是html它是 JavaScrip 的一种扩展语法它具有 JavaScript 的全部能力我们还可在jsx代码中插入变量或者表达式用jsx语法写出来的语句是一个对象我们可以将它存为一个变量这个变量作为ReactDOM对象的render方法的第一个参数。
let el h1Hello world!/h1;
ReactDOM.render(el,document.getElementById(root)
)jsx的结构还可以写得更复杂可以是嵌套结构如果是嵌套结构需要有唯一的一个外层标签。标签中如果是单个的标签在结尾要加“/”,在jsx中可以通过“{}”插入变量表达式或者函数调用。
script typetext/babellet iNum01 10;let sTr abc123456;let ok true;function fnRev(s){return s.split().reverse().join();} let el (divh3jsx语法/h3{/* 插入变量及运算 */}p{ iNum015 }/p{/* 插入表达式 */}p{ sTr.split().reverse().join() }/p{/* 插入函数调用 */}p{ fnRev(sTr) }/p{/* 插入三元运算表达式 */}p{ ok?YES:NO }/p /div);ReactDOM.render(el,document.getElementById(root))/script示例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript srcjs/react.development.js/scriptscript srcjs/react-dom.development.js/script!-- 以下js库负责编译es6语法和jsx语法编译成浏览器可以识别的语法 --script srcjs/babel.min.js/script
/head
bodydiv idroot/divscript typetext/babellet iNum01 10;let sTr abcdefgh123456;let ok false;let url http://www.baidu.com;function fnRev(s){return s.split().reverse().join();}let el (divh2jsx语法/h2{/* 插入变量及运算 */}p{ iNum015 }/p{/*插入字符串*/}p{ sTr }/p{/* 插入表达式 */}p{ sTr.split().reverse().join() }/p{/* 插入函数调用 */}p{ fnRev(sTr) }/p{/* 插入三元运算表达式 */}p{ ok?YES:NO }/p/div);ReactDOM.render(el,document.getElementById(root));/script
/body
/htmljsx中指定标签的属性值建议用双引号不能不用引号属性名建议用驼峰式其中class属性需要写成className属性值如果是可变的也可以写成“{}”的形式里面可以和上面写法一样。 标签如果是单个的在结尾一定要加“/”
{/* 定义class */}
p classNamesty01使用样式/p
{/* 单个标签结尾要加“/” */}
img src{user.avatarUrl} /示例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript srcjs/react.development.js/scriptscript srcjs/react-dom.development.js/script!-- 以下js库负责编译es6语法和jsx语法编译成浏览器可以识别的语法 --script srcjs/babel.min.js/scriptstyle.sty01{font-size: 30px;color: red;}/style
/head
bodydiv idroot/divscript typetext/babellet url http://www.baidu.com;let el (diva href{url} classNamesty01这是一个链接/a/div);ReactDOM.render(el,document.getElementById(root));/script
/body
/html组件和属性(props)
组件可以理解成是一个组成页面的部件或者零件每个部件都有自己完整的结构和功能多个部件拼装在一起就可以组成一个页面从组件的实现来看组件最终是要返回一个jsx对象不过它和jsx对象的区别是它在jsx对象的基础上还带有自己的方法和属性能完成它自己的交互功能。 组件有两种定义方式一种是函数式定义一种是类定义。
函数式定义组件
通过函数来定义一个组件组件名称首字母要大写函数接收一个参数props返回一个jsx对象。其中name属性是在渲染组件时通过定义属性传入进来的。
function Welcome(props) {return h1Hello, {props.name}/h1;
}类方式定义组件
上面的组件可以通过下面ES6的类的方式定义定义的类都要继承于React对象中的Component类这个定义的组件和上面的功能是等效的。
class Welcome extends React.Component {render() {return h1Hello, {this.props.name}/h1;}
}组件渲染
组件渲染和jsx对象一样我们可以通过ReactDOM.render()方法来渲染组件。
function Welcome(props) {return h1Hello, {props.name}/h1;
}
const element Welcome nameSara /;
ReactDOM.render(element,document.getElementById(root)
);组件组合
可以在一个组件内拼装其他的组件从而组合成一个更大的组件
function Welcome(props) {return h1Hello, {props.name}/h1;
}function App() {return (divWelcome nameSara /Welcome nameCahal /Welcome nameEdite //div);
}ReactDOM.render(App /,document.getElementById(root)
);示例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript srcjs/react.development.js/scriptscript srcjs/react-dom.development.js/script!-- 以下js库负责编译es6语法和jsx语法编译成浏览器可以识别的语法 --script srcjs/babel.min.js/script
/head
bodydiv idroot/divscript typetext/babelclass Welcome extends React.Component{render(){return(h1hello, {this.props.name}/h1);}}//定义一个大的组件组合上面的组件class WelcomeAll extends React.Component{render(){return (divWelcome name Sara/Welcome name Tom /Welcome name Rose //div);}}//this.props {name: Sara}》Welcome name Sara/ 渲染小的组件// ReactDOM.render(Welcome name Sara/,document.getElementById(root));//渲染大的组件ReactDOM.render(WelcomeAll /,document.getElementById(root));/script
/body
/html绑定事件
React绑定事件和JavaScript中的行间事件类似事件绑定是写在标签中的但是React事件是在原生事件的基础上做了封装它的事件使用驼峰命名而不是全部小写。事件需要传递一个函数作为事件处理程序这个函数在哪里定义呢我们可以通过类定义组件将这个函数作为一个方法定义在组件中。
定义一个点击能弹出名称的组件
class Helloname extends React.Component {fnHello(){alert(Hello,Tom);}render(){return (input typebutton value打招呼 onClick{this.fnHello} /)}
}
ReactDOM.render(Helloname /, document.getElementById(root));如果想把这个组件定义成可以传递名称参数的可以定义如下
class Helloname extends React.Component {fnHello(){alert(this.props.name);}render(){return (input typebutton value打招呼 onClick{this.fnHello.bind(this)} /)}
}ReactDOM.render(Helloname nameTom /, document.getElementById(root));需要注意的是按钮在调用方法时此时的this默认会指向这个按钮所以在绑定事件时需要绑定this将this指向当前对象。
示例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript srcjs/react.development.js/scriptscript srcjs/react-dom.development.js/script!-- 以下js库负责编译es6语法和jsx语法编译成浏览器可以识别的语法 --script srcjs/babel.min.js/script
/head
bodydiv idroot/divscript typetext/babelclass HelloTom extends React.Component{//定义click事件的处理方式fnHello(){alert(Hello,Tom!);}render(){return(input typebutton value打招呼 onClick{this.fnHello} /)}}//定义有参方法class HelloName extends React.Component{fnHello(){alert(Hello,this.props.name);}render(){return (//在事件调用方法时如果方法里面使用了this在方法中需要绑定thisinput typebutton value打招呼啊 onClick{this.fnHello.bind(this)}/)}}//如果43行显示出来则只会显示44行// ReactDOM.render(HelloTom /, document.getElementById(root));ReactDOM.render(HelloName name Jack/,document.getElementById(root));/script
/body
/html状态
组件如果需要定义默认属性呢而且这个默认属性还是可变的呢这个就是组件的状态属性了状态属性默认名称是state这个属性需要在组件定义时初始化所以我们需要使用类的构造函数来对这个属性进行初始化。
定义一个点击按钮数字递增的
class Increase extends React.Component {constructor(props){super(props);this.state {iNum:10};// 也可以在组件初始化时将方法绑定thisthis.fnAdd this.fnAdd.bind(this);}fnAdd(){// 使用setState来改变state中的值this.setState(prevState({iNum:prevState.iNum1}));}render(){return (divp{ this.state.iNum }/pinput typebutton onClick{this.fnAdd} value递增 //div);}
}ReactDOM.render(Increase /,document.getElementById(root)
);state注意点 1、不能直接修改state的值应该用setState代替
// 下面写法是不会更新组件是错误的
this.state.iNum 11;// 应该写成setState的形式
this.setState({iNum: 11});2、state的值可能是异步的如果需要在state的值的基础上修改得到新的值可以使用函数的形式函数的参数中传递的第一个参数是state上一个状态的值我们可以在这个值基础上修改下面的prevState代表state上一个状态的值。
this.setState(prevState({iNum:prevState.iNum1
}));示例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript srcjs/react.development.js/scriptscript srcjs/react-dom.development.js/script!-- 以下js库负责编译es6语法和jsx语法编译成浏览器可以识别的语法 --script srcjs/babel.min.js/script
/head
bodydiv idroot/divscript typetext/babeldiv idroot/divclass Increase extends React.Component{constructor(props) {super(props);this.state {iNum:10};}// 要通过setState方法来改变state里面的值//setState里面可以传一个对象也可以传一个函数函数需要返回一个对象fnAdd(){//这样写也是可以的// this.state.iNum 1;// this.setState({// iNum:11// })/* this.setState({//虽然可以这样写是可以的但是不建议这样用iNum:this.state.iNum1})*/// prevState 指的是state最新的值// this.setState(function(prevState){// return { iNum:prevState.iNum1}// })//return 字典或者对象需要加()this.setState(prevState({iNum:prevState.iNum1}))}render(){return (divp{this.state.iNum}/pinput typebutton value递增 onClick{this.fnAdd.bind(this)}//div)}}ReactDOM.render(Increase /, document.getElementById(root));/script
/body
/html选项卡案例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestyle.tab_con{width:500px;height:350px;margin:50px auto 0;}.tab_btns{height:50px;}.tab_btns input{width:100px;height:50px;background:#ddd;border:0px;/*去掉行间的高亮*/outline:none;}.tab_btns .active{background:gold;}.tab_cons{height:300px;background:gold;}.tab_cons div{height:300px;line-height:300px;text-align:center;display:none;font-size:30px;}.tab_cons .current{/*以块元素显示出来*/display:block;}/stylescript srcjs/react.development.js/scriptscript srcjs/react-dom.development.js/script!-- 以下js库负责编译es6语法和jsx语法编译成浏览器可以识别的语法 --script srcjs/babel.min.js/script
/headbodydiv idroot/divscript typetext/babelclass Tab extends React.Component{constructor(props) {super(props);this.state {iNow:0}}fnChange(i){this.setState({iNow:i})}// 行内元素放在一行就会去掉间距render(){return (div classNametab_condiv classNametab_btns{/*p{this.state.iNow}/p*/}input typebutton value按钮一 className{(this.state.iNow0)?active:} onClick{this.fnChange.bind(this,0)}/input typebutton value按钮二 className{(this.state.iNow1)?active:} onClick{this.fnChange.bind(this,1)}/input typebutton value按钮三 className{(this.state.iNow2)?active:} onClick{this.fnChange.bind(this,2)} //divdiv classNametab_consdiv className{(this.state.iNow0)?current:}按钮一对应的内容/divdiv className{(this.state.iNow1)?current:}按钮二对应的内容/divdiv className{(this.state.iNow2)?current:}按钮三对应的内容/div/div/div);}}ReactDOM.render(Tab /,document.getElementById(root));/script
/body
/html列表渲染
如何拼装数组中的数据放入页面呢可以将数组中的数据通过数组遍历渲染成一个jsx对象在通过React渲染这个对象就可以了。
let aList [红海,复联3,碟中谍6,熊出没];let el aList.map((item,i)li key{i}{ item }/li
);ReactDOM.render(ul{el}/ul, document.getElementById(root)
);通过map方法遍历数组中的成员map方法的第二个参数是数组中的索引值在循环生成li结构时需要给每个li加上一个key这个key的值可以用数组中的成员索引值。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript srcjs/react.development.js/scriptscript srcjs/react-dom.development.js/script!-- 以下js库负责编译es6语法和jsx语法编译成浏览器可以识别的语法 --script srcjs/babel.min.js/script
/head
bodydiv idroot/divscript typetext/babellet aList [红海,复联三,碟中谍6,熊出没];let el aList.map((item,i)li key{i}{item}/li);//第二种写法// let el aList.map(function (item,i){// return li key{i}{item}/li;// });ReactDOM.render(ul{el}/ul,document.getElementById(root));/script
/body
/html表单数据绑定—双向数据绑定
表单元件对应着数据而且这些数据都是变化的所以我们会将表单元件的数据对应于组件中的state属性值让它们之间的值实现双向数据绑定的效果要实现这个效果需要在表单元件上绑定onchange事件来将state中的值改变为表单元件中的值同时也需要将表单的value属性值设置为等于state中的属性值。
表单数据绑定示例
class Myform extends React.Component {constructor(props){super(props);this.state {uname:};}// ev指的是系统自动产生的事件对象// ev.target指的是发生事件的元素fnNameInput(ev){this.setState({uname:ev.target.value})}render(){return(formp用户的名称是{ this.state.uname }/pinput typetext value{this.state.uname} onChange{this.fnNameInput.bind(this)} / /form);}
}ReactDOM.render(Myform /, document.getElementById(root)
);示例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript srcjs/react.development.js/scriptscript srcjs/react-dom.development.js/scriptscript srcjs/babel.min.js/script
/head
bodydiv idroot/divscript typetext/babelclass Inputxt extends React.Component{constructor(props) {super(props);this.state {iNum:11}}// ev指的是系统自动产生的事件对象// ev.target指的是发生事件的元素fnChange(ev){this.setState({iNum: ev.target.value})}render(){return (divp{ this.state.iNum }/pinput typetext value{ this.state.iNum } onChange{this.fnChange.bind(this)}//div);}}ReactDOM.render(Inputxt /,document.getElementById(root));/script
/body
/htmltodolist(计划列表)—案例
!DOCTYPE html
html langen
headmeta charsetUTF-8titletodolist/titlestyle typetext/css.list_con{width:600px;margin:50px auto 0;}.inputtxt{width:550px;height:30px;border:1px solid #ccc;padding:0px;text-indent:10px;}.inputbtn{width:40px;height:32px;padding:0px;border:1px solid #ccc;}.list{margin:0;padding:0;list-style:none;margin-top:20px;}.list li{height:40px;line-height:40px;border-bottom:1px solid #ccc;}.list li span{float:left;}.list li a{float:right;text-decoration:none;margin:0 10px;}/stylescript srcjs/react.development.js/scriptscript srcjs/react-dom.development.js/scriptscript srcjs/babel.min.js/script
/head
bodydiv idroot/divscript typetext/babelclass Todolist extends React.Component{constructor(props) {super(props);this.state {aList:[学习html,学习css,学习javascript,学习go语言],sTodo:}}//把事件的对象给evfnChange(ev){this.setState({sTodo:ev.target.value})}fnAdd(){// this.setState(function (prevState){// if (prevState.sTodo ){// alert(请输入内容!);// return;// }// })this.setState(prevState {// 判断是否为空if (prevState.sTodo ){alert(请输入内容!);return;}//sTodo 输入框赋值为空return {aList: [...prevState.aList,prevState.sTodo],sTodo:}})}fnDel(i){this.setState(prevState {//复制一份let list [...prevState.aList];list.splice(i,1);return {aList:list};})}fnUp(i){this.setState(prevState {if (i0){alert(到顶了!);return;}//复制一份let list [...prevState.aList];let nowItem list[i];list.splice(i,1); //删除list[i]数据// console.log(list);list.splice(i-1,0,nowItem); //在list[i-1]处添加数据// console.log(list);return {aList:list};})}fnDown(i){this.setState(prevState {if (i prevState.aList.length-1){alert(到底了!);return;}//复制一份let list [...prevState.aList];let nowItem list[i];list.splice(i,1); //删除list[i]数据// console.log(list);list.splice(i1,0,nowItem); //在list[i1]处添加数据// console.log(list);return {aList:list};})}render(){return (div classNamelist_conh2To do list/h2input typetext value{this.state.sTodo} idtxt1 classNameinputtxt onChange{this.fnChange.bind(this)}/input typebutton value增加 idbtn1 classNameinputbtn onClick {this.fnAdd.bind(this)}/ul idlist classNamelist{this.state.aList.map((item,i)li key{i}span{item}/spana hrefjavascript:;classNameup onClick{this.fnUp.bind(this,i)} ↑ /aa hrefjavascript:;classNamedown onClick{this.fnDown.bind(this,i)} ↓ /a a hrefjavascript:;classNamedel onClick{this.fnDel.bind(this,i)}删除/a/li)}/ul/div);}}ReactDOM.render(Todolist /, document.getElementById(root));/script
/body
/html生命周期方法
生命周期方法指的是在组件初始化后以及组件销毁时会自动执行的两个方法我们可以在初始化方法中执行获取数据的操作在组件销毁方法中执行一些清除操作比如清除定时器等操作。这两个方法分别是componentDidMount 和 componentWillUnmount。
使用示例
class Hello extends React.Component{constructor(props){super(props);this.state {}}// 组件初始化时自动执行的方法 componentDidMount() {console.log(componentDidMount);}// 组件销毁时自动执行的方法componentWillUnmount(){console.log(componentWillUnmount); }render(){return (h1Hello world!/h1);}
}ReactDOM.render(Hello /,document.getElementById(root));setTimeout(() {ReactDOM.render(h1切换组件/h1,document.getElementById(root));
}, 2000);示例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript srcjs/react.development.js/scriptscript srcjs/react-dom.development.js/scriptscript srcjs/babel.min.js/script
/head
bodydiv idroot/divscript typetext/babelclass HelloWorld extends React.Component{componentDidMount(){console.log(componentDidMount);}componentWillUnmount(){console.log(componentWillUnmount);}render(){return (h1Hello World!/h1)}}ReactDOM.render(HelloWorld /, document.getElementById(root));//组件销毁setTimeout((){ReactDOM.render(h1Bye Bye!/h1,document.getElementById(root));},3000);/script
/body
/html数据交互
React没有集成ajax功能要使用ajax功能可以使用官方推荐的axios.js库来做ajax的交互。 axios库的下载地址https://github.com/axios/axios/releases
axios使用方法
常用参数 1、url 请求地址 2、method 请求方式默认是’GET’常用的还有’POST’ 3、responsetype 设置返回的数据格式常用的是’json’格式也可以设置为’text’或者’html’ 4、params 设置发送给服务器的数据 5、then 设置请求成功后的回调函数 6、catch 设置请求失败后的回调函数
axios完整写法
axios({url: /user/12345,method: get,responsetype:json,params: {firstName: Fred,lastName: Flintstone}
})
.then(function (response) {console.log(response);
})
.catch(function (error) {console.log(error);
});
axios请求的写法也写成get方式后post方式。执行get请求 // 为给定 ID 的 user 创建请求 // then是请求成功时的响应catch是请求失败时的响应
axios.get(/user?ID12345)
.then(function (response) {console.log(response);
})
.catch(function (error) {console.log(error);
});// 可选地上面的请求可以这样做
axios.get(/user, {params: {ID: 12345}
})
.then(function (response) {console.log(response);
})
.catch(function (error) {console.log(error);
});执行post请求
axios.post(/user, {firstName: Fred,lastName: Flintstone
})
.then(function (response) {console.log(response);
})
.catch(function (error) {console.log(error);
});脚手架开发
脚手架开发指的是react提供了完整的自动化开发工具及规划好了开发一个应用的项目目录这些工具是通过nodejs开发的我们可以通过npm(nodejs包管理命令)来安装这些工具同时可以通过这个工具生成一个应用的项目目录。
安装脚手架工具
脚手架工具是nodejs的一个包安装这个工具之前需要先安装nodejs然后在终端执行以下命令
1、设置npm淘宝景象
npm config set registry https://registry.npm.taobao.org2、安装
npm install -g create-react-app生成应用项目目录
3、生成app
create-react-app my-app4、启动
cd my-app
npm start5、生成上线文件
npm run build项目目录说明 以上是执行生成命令自动生成的项目目录对应的文件夹作用如下 目录一src目录主开发目录里面包含所有项目的组件开发组件都是基于此目录 目录二public目录项目入口文件目录目录中的文件不用动 目录三项目开发依赖包文件目录项目安装的包都会自动安装在这个文件夹中 目录四build目录项目上线时执行npm run build生成的目录这里面是自动化工具生成的上线文件
安装axios模块
1、在终端的项目目录执行如下命令
npm install axios2、在模块文件中引入
import axios from axios;
