手挽手带你学React入门第一期,带你熟习React的语法划定规矩,消弭对JSX的恐惧感,由于如今开辟中都是运用ES6语法开辟React,所以此次也运用ES6的形式举行教授教养,假如人人对ES6不熟习的话,先去看看class相干内容吧,这里我也逐步带人人一步一步学会React。
视频教程
视频教程可移步我的个人博客:http://www.henrongyi.top
什么是React
React是Facebook的一群变态们开辟的一个迥殊牛X的框架。它实际上是一个假造DOM,然后在这个DOM中,要用什么组件就可以飞速加载进来,不要的时刻,立时给删咯(实际上就是个前端框架,都是这么个意义,VUE,NG都是,只不过他们的数据流向差别罢了,React区分就在于,单向数据流。),React 扮演着 MVC 构造中 V 的角色,背面我会用到基于FLUX架构的Redux让我们的悉数项目变成MVC架构。总之,React也是hie牛X的。
React的优点都有啥
React是一款异常牛X的前端框架,它的衍生物React-Native可以让你开辟靠近原生体验的NativeApp,它合适的局限相称普遍,前端,后端,手机端,都有很好的兼容性。总而言之,hie牛X。
React基础入门
如今的开辟中React项目实际上都是运用ES6语法来编写,而且,我们如今有许多成熟的脚手架可以运用(create-react-app,dva等),不过国际惯例,我们要从最基础的用法最先编写。我们采纳ES6写法来举行教授教养,同时运用webpack东西,这里会用到许多相干设置,人人可以在这个过程当中体验ES6的精巧。
最先HelloWord
设置基础webpack环境
这里人人可以不去深切明白,先随着我一步一步设置出来
最先之前,人人可以去官网:https://reactjs.org/ 下载最新的React(当前版本v16.7.0) 中文地点:https://react.docschina.org/
由于我们不运用脚手架,所以我们须要先建立我们本身的webpack包,第一步
mkdir helloReact
cd helloReact
起首人人命令行输入
webpack v
假如平常涌现版本号 而且是 3.6.0版本,那末我们就可以够依据教程继续走下去了
假如没有的话 那末我们就须要命令行继续
cnpm i webpack@3.6.0 -S -g
到这里应该可以平常运用webpack了
接下来 我们命令行输入
npm init -y // 这实际上是 初始化一个项目 而且悉数默许 固然假如你想看看内里有啥的话 就把-y拿掉就好了
npm i //这里是把webpack依靠装置到本包内部
npm i webpack-dev-server@2.11.1 --save-dev //装置当地运转效劳器
npm i webpack-cli --save-dev //依靠脚手架
运转完成今后,我们会获得一个package.json文件 翻开看看
{
"dependencies": {
"webpack": "^3.6.0" //依靠包和版本
},
"name": "helloreact", //项目名
"version": "1.0.0", // 版本号
"main": "index.js", //进口文件
"scripts": { //npm run 加这内里的key就可以够疾速实行命令行
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "", // 作者
"license": "ISC",
"description": "" //简介
}
这内里实际上是我们项目的一些基础信息
我们须要本身设置webpack和babel 这里我们须要建立两个文件
这内里我们要设置进口文件,输出文件,babel,webpackServer等等,这里不做太细致的引见 人人可以直接复制代码,背面可能会开特地的webpack视频课程。
小小的引见一下这些都是干什么用的
babel-core 挪用Babel的API举行转码
babel-loader
babel-preset-es2015 用于剖析 ES6
babel-preset-react 用于剖析 JSX
babel-preset-stage-0 用于剖析 ES7 提案
命令行输入
npm install --save-dev babel-core babel-loader@7.1.5 babel-preset-es2015 babel-preset-react babel-preset-stage-0
接下来我们在helloReact 文件夹中建立 webpack.config.js 文件
// webpack.config.js 直接复制即可
const path = require("path");
module.exports = {
/*进口*/
entry: path.join(__dirname, 'src/index.js'),
/*输出到dist文件夹,输出文件名字为bundle.js*/
output: {
path: path.join(__dirname, './dist'),
filename: 'bundle.js'
},
/*src文件夹下面的以.js末端的文件,要运用babel剖析*/
/*cacheDirectory是用来缓存编译效果,下次编译加快*/
module: {
rules: [{
test: /\.js$/,
use: ['babel-loader?cacheDirectory=true'],
include: path.join(__dirname, 'src')
}]
},
plugins : [],
devServer : {
disableHostCheck: true,
inline: true,
port:9527,
contentBase: path.join(__dirname, "/"),
}
}
接下来我们在helloReact 文件夹中建立 .babelrc 文件
{
"presets": [
"es2015",
"react",
"stage-0"
],
"plugins": []
}
然后我们在package.json文件的script中增添
//package.json
{
"dependencies": {
"webpack": "^3.6.0"
},
"name": "helloreact",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"server": "webpack-dev-server",
"build": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"description": "",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^2.11.1"
}
}
这些设置完了,我们就在helloReact mkdir src 而且在src中建立 index.js文件
在 根途径 helloReact下建立 index.html
由于这里我们要用到 react了 所以须要命令行装置一下 react
cnpm install --save react react-dom
html文件以下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="bundle.js"></script>
</html>
js 文件以下
import React from 'react'; //es6 引入react
import ReactDom from 'react-dom'; //es6 引入reactReacrDom
ReactDom.render( //ReactDom衬着<div>hello React</div> 这个html标签 到 id='app'这个标签下
<div>Hello React!</div>, document.getElementById('app'));
一切都写完了 我们运转效劳 npm run server 来看一眼
假如你看到屏幕显示出 Hello React! 那末祝贺你 环境设置完了 我们可以最先进修 React 了
假如你设置了半天还没设置胜利
到我的github下载代码吧。。。https://github.com/piexlmax/h…
React的Hello World
我们看到上面的代码
import React from 'react'; //es6 引入react
import ReactDom from 'react-dom'; //es6 引入reactReacrDom
ReactDom.render( //ReactDom衬着<div>hello React</div> 这个html标签 到 id='app'这个标签下
<div>Hello React!</div>, document.getElementById('app'));
这是一个简朴的衬着 是否是基础看不到 React的组件化形式呢?
所以这里 我们须要写一个根部组件,今后的组件都放跟组件内里,这个JS就天经地义成了一个进口文件了
这里 我们在 src下面建立一个app.js文件
app.js
import React, {Component} from 'react';
// 这里我们引入 react 和 react的Component
// 建立 Hello 这个class(class属于ES6内容) 然后继续 Component 我们就胜利地建立了一个 react组件
export default class App extends Component {
render() {
return (
<div>
Hello,World!
</div>
)
}
}
index.js 我们须要改写为如许
import React from 'react';
import ReactDom from 'react-dom';
import App from './app.js' //引入我们的根组件App
ReactDom.render( //把App 衬着到 id=app的dom中
<App/>, document.getElementById('app'));
到这里 我们已完成了一个真正意义上的Hello World了!
传说中的jsx
最先玩React了,那就必需要用到jsx语法,什么是jsx呢?
JSX是一种JavaScript的语法扩大。JSX与模板言语类似,但它具有JavaScript的悉数功用。JSX会被编译为React.createElement()要领挪用,将返回名为“React elements”的平常JavaScript对象。
上面代码里我们看到 我们的html实际上是在js中的render函数中誊写的,是一个React扩大,许可我们编写看起来像 HTML的JavaScript 。
牢记 自定义组件一定要大写字母开首 return加括号 而且左括号要和return在统一行 只能return一个标签,其他内容都要在这个标签内部
export default class App extends Component {
render() {
return (
<div>
Hello,World!
</div>
)
}
}
像是如许一段代码,实际上我们真正运用的时刻,已经过了一次编译,编译事后它长如许。
export default class App extends React.Component {
render() {
return (
React.createElement(
'div',
'Hello,World!'
)
);
}
}
下面的这一段代码是否是就不轻易明白了?这实际上是js可以帮我们去誊写dom的代码。
在React中JSX你可以明白为我们可以在js中写HTML代码了 更浅显一点
export default class App extends Component {
// 要领 生命周期 state 等
render() {
return (
// HTML模板
)
}
}
React的基础运用要领
state
我们之前学过VUE,VUE中每一个组件的数据存在本身的data中,那末在React中,数据存在那里呢?没错状况state中。
由于我们这里用的是ES6的class 所以 我们子类constructor中必需先挪用super才援用this。
所以我们这里应该这么写state
export default class App extends Component {
constructor(){
super()
this.state={
hello:"hello World"
}
}
render() {
return (
<div>
{this.state.hello}
</div>
)
}
}
这里我们可以看出,我们想要在render中运用js 就须要用一个{} 这内里的内容一样可以誊写简朴的js表达式。
rander函数中运用state和JS表达式
export default class App extends Component {
constructor(){
super()
this.state={
hello:"hello World"
}
}
render() {
return (
<div>
<ul>
<li>展现state中的数据:{this.state.hello}</li>
<li>三元,短路等,这里用三元示例{this.state.hello?"存在hello":"不存在hello"}</li>
<li>简朴盘算{1+1}</li>
<li>JS表达式{Math.floor(Math.random()*10)}</li>
</ul>
</div>
)
}
}
要领的声明以及修正state
申明要领我们有两种形式,一种是直接誊写 要领名(参数){代码段}形式,如许的形式在挪用的时刻须要手动bind(this)
另有一种就是运用es6的箭头函数,让其this指向本身
修正state数据须要挪用 this.setState()要领 内部吸收一个对象 要修正哪一个key 就在对象内部填写这个key,而且背面的值就是你要修正的内容,假如,key在state中不存在,则会在state中增添这个key
export default class App extends Component {
constructor(){
super()
this.state={
hello:"hello World"
}
}
bye(){
this.setState({
hello:"bye world"
})
}
byebye=()=>{
this.setState({
helloo:"bye world"
})
}
render() {
return (
<div>
<ul>
<li>非箭头函数:{this.state.hello}</li>
<li>箭头函数:{this.state.helloo}</li>
</ul>
<button onClick={this.bye.bind(this)}>无箭头</button>
{/* 这里运用bind来绑定this 假如传参的话this.bye.bind(this,参数1,参数2) */}
<button onClick={()=>{this.byebye()}}>箭头函数</button>
{/* 这里是箭头函数的默许属性来搞定了this题目 假如传参的话()=>{this.byebye(参数1,参数2)*/}}
</div>
)
}
}
这里须要注重,只要触发了state的变化,才会致使组件的从新衬着
轮回语句,前提语句的运用
人人在vue中运用v-for 就可以够完成轮回天生组件如许的操纵了,在react中我们应该怎么做呢?
轮回语句
我们说过 jsx 内里是可以无拘无束地运用js的 平常情况下我们运用map轮回
在轮回的时刻,每一个return出来的标签都须要增添 key={键值} “键值”是建立元素数组时须要包括的特别字符串属性。键值可以协助React辨认哪些元素被变动,增添或删除。因而你应该给数组中的每一个元素给予一个肯定的标识
export default class App extends Component {
constructor(){
super()
this.state={
arr:[{text:"qm"},{text:"奇淼"},{text:"大帅逼"}]
}
}
render() {
return (
<div>
{/* 我们说过 jsx 内里是可以无拘无束地运用js的 这里我们来玩一个轮回天生li */}
<ul>
{this.state.arr.map((item,key)=>{
return(<li key={key}>{item.text}</li>)
})}
</ul>
</div>
)
}
}
推断语句
推断语句我们平常运用短路表达式 三元表达式来展现我们想要展现的内容,然则假如须要庞杂的前提推断,那末我们最好是写一个自实行函数,然后再函数体内你就可以够随心所欲了,记着一定要return你想要获得的dom标签。
export default class App extends Component {
constructor(){
super()
this.state={
arr:[{text:"qm"},{text:"奇淼"},{text:"大帅逼"}]
}
}
render() {
return (
<div>
{/*简朴的三元和短路实例*/}
{this.state.arr.length==3?<div>我是三元推断的三个</div>:<div>我是三元推断的不是三个</div>}
{this.state.arr.length==3&&<div>我是短路推断的三个</div>}
{/* 我们说过 jsx 内部支撑简朴的表达式 假如我们运用 if前提句的话 会致使报错*/}
{/*
if(this.state.arr.length==3){
return(<div>有三个</div>)
}
*/}
{/* 我们说过 jsx 这已是js代码段而不是简朴语句了,我们简朴推断可以运用三元或许短路表达式来举行,然则庞杂一点的,我们可以运用以下要领*/}
{(()=>{
if(this.state.arr.length==3){
return(<div>数组有三个元素</div>)
}else{
return(<div>数组有不是三个元素</div>)
}
})()}
</div>
)
}
}
轮回推断嵌套
有些时刻我们须要依据特定前提去轮回,然后衬着出挑选事后的数据,这时刻就须要轮回和推断嵌套运用了,实在也相称简朴,我们的轮回实际上是一个简朴的js表达式,内部的function中可以随便誊写js,记得return就好了
export default class App extends Component {
constructor(){
super()
this.state={
arr:[{text:"qm"},{text:"奇淼"},{text:"大帅逼"}]
}
}
render() {
return (
<div>
{this.state.arr.map((item,key)=>{
if(key%2==0){
return(<div key={key}>我是可以余2的{item.text}</div>)
}else{
return(<div key={key}>我是不能余2的{item.text}</div>)
}
})}
</div>
)
}
}
猎取DOM(Refs)
有些时刻我们不得不去操纵DOM,那这时刻 我们须要用到 ref 属性
React支撑一个可以附加到任何组件的特别属性ref。ref属性可所以一个字符串或一个回调函数。当ref属性是一个回调函数时,函数吸收底层DOM元素或类实例(取决于元素的范例)作为参数。这使你可以直接接见DOM元素或组件实例。
别的这里应该注重 不要过分运用 Refs。
export default class App extends Component {
constructor(){
super()
this.state={
arr:[{text:"qm"},{text:"奇淼"},{text:"大帅逼"}]
}
}
render() {
return (
<div>
{this.state.arr.map((item,key)=>{
if(key%2==0){
return(<div ref="link" key={key}>我是可以余2的{item.text}</div>)
{/* 如许我们可以经由过程 this.refs.link 猎取到这个dom 而且操纵dom了 */}
}else{
return(<div key={key}>我是不能余2的{item.text}</div>)
}
})}
</div>
)
}
}
总结
到这里我们已学会了React的基础组件内部的操纵了,React相关于Vue来讲越发天真,然则唯一的瑕玷是数据流是单向的,必需经由过程setState来修正,关于处置惩罚表单来讲会有些贫苦,不过有些UI框架,插件帮我们处置惩罚了这些大贫苦。写写玩玩吧React照样比较简朴的。