React入门（一）

一、介绍React
- 1.1、简介
- 1.2、特点
- 1.3、与其他框架对比
二、搭建环境
- 2.1、通过引入文件的方式
- 2.2、通过官方脚手架的方式
- 2.3、第三方脚手架
三、JSX
- 3.1、ReactDOM.render()函数
- 3.2、JSX介绍
- 3.3、JSX特点
- 3.4、JSX的语法
- - 3.4.1、XML基本语法
  - 3.4.2、元素类型
  - 3.4.3、元素属性
  - 3.4.4、javascript表达式
四、条件渲染
五、列表渲染
- 5.1、渲染数组
- 5.2、map()或者普通for循环
六、组件
- 6.1、函数组件
- 6.2、类组件
- 6.3、ES5的写法（React16后，已经废弃）
- 6.4、多组件
七、props
- 7.1、外部传值
- 7.2、组件内部使用
- - 7.2.1、函数组件内部使用
  - 7.2.2、类组件内部使用
  - 7.2.3、props传入对象
  - 7.2.4、props的默认值
  - 7.2.5、类型检查
八、state状态机
- 8.1、定义并初始值
- 8.2、读取状态
- 8.3、修改状态

vue和react作为当下前端最主流的两大框架，当然需要学习啦！
还没有学过vue的可以去我之前的博客vue入门系列！！

一、介绍React

1.1、简介

React 是一个用于构建用户界面的 JAVASCRIPT 库。
React主要用于构建UI。
React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
React 拥有较高的性能，代码逻辑非常简单。

1.2、特点

简单概述下：

1）高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
2）灵活 −React可以与已知的库或框架很好地配合。
3） JSX − JSX 是 JavaScript 语法的扩展。
4）组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，也正因此，它比传统数据绑定更简单。

1.3、与其他框架对比

	angularJs	reactJs	vueJs
控制器	√	-	-
过滤器	√	-	√
指令	√	-	√
模板语法	√	-	√
服务	√	-	-
组件	-	√	√
jsx	-	√	2.0之后加入

相同点是：都采用虚拟dom，和数据驱动

二、搭建环境

2.1、通过引入文件的方式

<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/babel.min.js"></script>
<script type="text/babel">//第一个react程序ReactDOM.render(<p>第一个react程序</p>,document.getElementsByClassName('box')[0])</script>

引入的三个js文件：

1、React.js：

React的核心库，解析组件,识别jsx
https://cdn.staticfile.org/react/16.4.0/umd/react.development.js
2、reactDom.js：

处理与dom相关的操作

https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js
3、Babel.js

Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平

https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js

2.2、通过官方脚手架的方式

安装create-react-app

npm install create-react-app -g

创建 react项目

create-react-app 目录 | npm init react-app 目录
npm start   开发
npm run build    打包
//调试 需要安装给chrome浏览器一个插件 react-dev-tools

环境解析

react: 核心包，解析组件,识别jsx
react-dom: 编译 -> 浏览器
react-scrpts: react的项目环境配置
manifest.json 生成一个网页的桌面快捷方式时，会以这个文件中的内容作为图标和文字的显示内容
registerServiceWorker.js支持离线访问，所以用起来和原生app的体验很接近,只有打包生成线上版本的react项目时，registerServiceWorker.js才会有效。服务器必须采用https协议
对Internet Explorer 9,10和11的支持需要polyfill。

2.3、第三方脚手架

yeomen/dva/umi

三、JSX

首先，我们开始编写第一个react程序：（前面其实展示过）

<body><div class="box"></div>
</body>

<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/babel.min.js"></script>
<script type="text/babel">//第一个react程序ReactDOM.render(<p>第一个react程序</p>,document.getElementsByClassName('box')[0])</script>

注意：script标签的type取值为：text/babel

页面显示效果：

3.1、ReactDOM.render()函数

在程序中，我们可以看到通过 ReactDOM.render（）函数，将p标签渲染到了类名为box的标签中。

那么，ReactDOM.render()函数是什么？？

ReactDOM.render 是 React 的最基本方法。用于将JSX写的模板（经过模板渲染（把javascript的结果替换单花括号里的内容））转为 HTML 语言，并渲染到指定的HTML标签里。

基本格式：

 ReactDOM.render( JSX写的html模板，dom容器对象);

总结：一个react程序，就是把JSX通过 ReactDOM.render() 函数渲染到网页上。

那么，JSX是什么？

3.2、JSX介绍

JSX就是Javascript和XML结合的一种格式。是 JavaScript 的语法扩展，只要你把HTML代码写在JS里，那就是JSX。

3.3、JSX特点

1） JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
2）它是类型安全的，在编译过程中就能发现错误。
3）使用 JSX 编写模板更加简单快速。

3.4、JSX的语法

所谓语法就是把html代码写在javascript中的要求规范。

3.4.1、XML基本语法

只能有一个根标签，外面加上圆括号。
标签要闭合（单标签要加斜杠）

<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/babel.min.js"></script>
<script type="text/babel">ReactDOM.render(//此处只有一个根标签div,否则会报错，如下图<div><input type="button" value={msg2}/>{/*单标签必须以‘/’结尾*/}</div>,document.getElementsByClassName('box')[0])
</script>

3.4.2、元素类型

小写首字母对应 HTML的标签，组件名首字母大写。
注释使用 / * 内容 */ html标签内注释｛/* 最外层有花括号*/｝

<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/babel.min.js"></script>
<script type="text/babel">ReactDOM.render(<div><p>第一个react程序</p>{/*此处为注释*/}</div>,document.getElementsByClassName('box')[0])
</script>

3.4.3、元素属性

内联样式的style：样式名以驼峰命名法表示, 如font-size需写成fontSize。默认像素单位是 px（px不用写）

<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/babel.min.js"></script>
<script type="text/babel">let sty = {backgroundColor:'red',fontSize:24,width:200,height:100}ReactDOM.render(<div>{/*此处style的值直接用单花括号，不用加引号*/}<p style={sty}>第一个react程序</p>{/*样式style直接用单花括号*/}</div>,document.getElementsByClassName('box')[0])
</script>

外部样式的class：HTML中曾经的 class 属性改为 className（因为class是js的关键字），外部样式时使用

<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/babel.min.js"></script>
<script type="text/babel">ReactDOM.render(<div><div className="box2">{msg}</div>{/*类名class关键字用className代替*/}    </div>,document.getElementsByClassName('box')[0])
</script>

for 属性改为 htmlFor（因为for是js的关键字）。（for属性在html标签中是扩充单选框|复选框的选择范围）
事件名用驼峰命名法。HTML是全小写（onclick），JSX中是驼峰(onClick)

<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/babel.min.js"></script>
<script type="text/babel">function add(){msg2 = '我是按钮2'console.log('msg2:',msg2);}ReactDOM.render(<div>{/*此处onclick写为onClick,驼峰命名法*/}<p onClick={add}>点击我改变按钮的值</p>{/*事件名驼峰命名法*/}</div>,document.getElementsByClassName('box')[0])</script>

3.4.4、javascript表达式

使用单花括号
react里没有vue中的指令，任何地方需要javascript的变量，表达式等等，只需要套上 单花括号就行

const element = <h1>Hello, {120+130}!</h1>
const element = <h1>Hello, {getName("张三疯")}!</h1>

注意：单花括号里只能写表达式，不能写语句（如：if，for）

四、条件渲染

就是普通的js条件判断语句。

<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/babel.min.js"></script>
<script type="text/babel">let num = 23;if(num>=18){var htmlStr = <p>我成年了</p>}else{var htmlStr = <p>我是未成年</p>}ReactDOM.render(<div>{htmlStr}</div>,document.getElementById('box'))</script>

五、列表渲染

5.1、渲染数组

//数组里存放jsx
var arr=[<li>张三疯</li>,<li>张四疯</li>,<li>张五疯</li>
]const show = ()=> (<ul>{arr}</ul>
)
ReactDOM.render(show(),document.getElementById("box"));

5.2、map()或者普通for循环

let arr = ['平凡的世界','麦田里的守望者','最后一滴眼泪','活着']ReactDOM.render(<div>{arr.map(item=>(<p>书名：《{item}》</p>))}</div>,document.getElementById('box')
)

六、组件

react中定义组件有三种写法：函数方式，ES5的写法（很少用了），ES6（类）的写法

6.1、函数组件

函数的返回值是JSX就行。即：如果一个函数的返回值是JSX，那么就可以当标签的方式使用。

//函数组件function Vid(){return <p>我是函数组件</p>}ReactDOM.render(<div>{Vid()}//通过调用函数使用<Vid></Vid>//直接作为标签使用</div>,document.getElementById('box')
)

6.2、类组件

定义一个类，继承自 React.Component，在该类里，必须有个render()函数，render函数返回一个JSX代码。

换句话说：一个普通的ES6的类，只要有一个render()函数，并且render()函数返回一个JSX，那么就是组件。

//类组件
class Vid extends React.Component{render(){return <p>我是类组件</p>}
}ReactDOM.render(<div><Vid></Vid>//直接作为标签使用{(new Vid()).render()}//实例对象并调用render方法使用</div>, document.getElementById('box')
)

6.3、ES5的写法（React16后，已经废弃）

React.CreateClass()函数

var MyCom = React.createClass({  render:function(){ //vue中也有render函数，是完成模板的代码return (<div><h1>Hello, world!</h1></div>);}
});

6.4、多组件

// 标题
function MyTitle(){return (<h1>商品列表</h1>)
}
// 详情
function MyDetail(){return (<ul><li>铅笔</li><li>钢笔</li></ul>)
}ReactDOM.render(<div><MyTitle/><MyDetail/></div>,document.getElementById('box')
);

七、props

props 是组件对外的接口。接收外部传入的数据。是组件的属性（等同于html标签的属性）。
注意：Props对于使用它的组件内部来说，是只读的。一旦赋值不能修改。

7.1、外部传值

<组件名 属性名1=值1 属性名2=值2 .. />

ReactDOM.render(<div><Vid msg="我是传过去的props" data="附加信息"></Vid></div>, document.getElementById('box')
)

7.2、组件内部使用

7.2.1、函数组件内部使用

{props.属性名}

//函数组件
function Vid(props){//    let msg = '我是函数组件plus'console.log(props);return <div><p>{props.msg}</p><p>{props.data}</p></div>
}

7.2.2、类组件内部使用

{this.props.属性名}

//类组件
class Vid extends React.Component{constructor(props){super()this.props = props//    console.log('this.props:',this.props);console.log('this.props:',this.props);}render=()=>{//此处要箭头函数，因为内部this指向改变了return (<div><p>姓名：{this.props.name}</p></div>)}}

此处注意：
在类的constructor里直接打印props是undefined

若要获得传入的参数，需要加一句

 this.props = props（props为构造函数的形参）

7.2.3、props传入对象

如果传递数据多的话，可以使用对象，但是必须使用扩展运算符（…）

传对象

let obj = {name:'华为手机',price:'4800元',color:'深空蓝',}ReactDOM.render(<div><Vid {...obj}></Vid></div>,document.getElementById('box')
)

组件内部使用

//类组件
class Vid extends React.Component{constructor(props){super()this.props = props//    console.log('this.props:',this.props);console.log('this.props:',this.props);}render=()=>{//此处要箭头函数，因为内部this指向改变了return (<div><p>名字：{this.props.name}</p><p>价格：{this.props.price}</p><p>颜色：{this.props.color}</p></div>)}}

7.2.4、props的默认值

1）、用 ||

function MyPerson(props){//当没有传sex时值为女let sex1 = props.sex || "女";return (<div><p>性别：{sex1}</p></div>)
}

2）、defaultProps

格式：//1）、函数式组件和类组件都可以：组件名.defaultProps={属性名: 默认值}//2)、若为类组件，可以在类的内部使用static修饰。static defaultProps={属性名: 默认值
}

函数组件使用defaultProps:

function Vid(props){return <div>她叫{props.name},今年{props.age}岁</div>}Vid.defaultProps = {name:'晓晓',age:'23'}ReactDOM.render(<div><Vid age="18"></Vid></div>,document.getElementById('box'))

效果图：

7.2.5、类型检查

注意：react15.5后，React.propTypes已经移入到另外一个库里，请使用prop-types。

//类型约定:
组件名.propTypes={    属性名1:PropTypes.类型名,属性名2:PropTypes.类型名
}//必传参数
propName: PropsTypes.类型名.isRequired

类型名的可以取值为：PropTypes.array,
PropTypes.bool,
PropTypes.func,
PropTypes.number,
PropTypes.object,
PropTypes.string,
PropTypes.symbol,

function MyPerson(props){return (<div><p>年龄：{props.age}</p></div>)
}MyPerson.propTypes={//注意大小写age:PropTypes.number.isRequired
}ReactDOM.render(<MyPerson age={12} />,document.getElementById('box')
);

八、state状态机

state 是状态，状态就是数据，state表示组件的内部数据。而props是外部传入组件的数据，类似vue中的data。

8.1、定义并初始值

//类组件class Vid extends React.Component{constructor(props){super()//构造函数里定义并初始化this.state = {age:13}}render=()=>{//此处要箭头函数，因为内部this指向改变了return (<div>{/*获取state里的age*/}<p>年龄：{this.state.age}</p></div>)}}ReactDOM.render(<div><Vid></Vid></div>,document.getElementById('box'))

8.2、读取状态

this.state.属性名

8.3、修改状态

必须调用setState()函数，不要直接赋值，而且，setState()函数是异步的。

1、修改状态时，必须要调用setState。因为，只要调用了setState函数，那就会调用了render()。如果直接赋值，不会把数据响应式地渲染到DOM上。（即：没有调render()函数）

//类组件
class Vid extends React.Component{constructor(props){super()this.state = {age:13}}render=()=>{//此处要箭头函数，因为内部this指向改变了return (<div>{/*获取state里的age*/}<p>年龄：{this.state.age}</p><input type="button" value="点击年龄加1" onClick={()=>this.change()}/></div>)}change(){//改变state里age的值this.setState({age:18})}}ReactDOM.render(<div><Vid></Vid></div>,document.getElementById('box'))

2、setState()函数是异步的

change() {//改变state里age的值console.log('this.state.age:（前）', this.state.age);this.setState(function (prevState) {console.log('改变状态前干的事');return {age: 18}}, function () {//改变状态后打印值console.log("this.state.age", this.state.age);})console.log('this.state.age:（后）', this.state.age);}

注意：直接修改state属性的值不会重新渲染组件，

补充

给引用类型的某个属性赋值（也就是this.state里的某个属性值是对象）

change(){        this.setState({desc:{...this.state.desc,date:(new Date()).toLocaleString()}});}

今天写了一天的博客！！！

React入门（一）之基本语法（内容较多）相关推荐

jsx 调用php,JavaScript_JavaScript的React框架中的JSX语法学习入门教程，什么是JSX？在用React写组件的 - phpStudy...
JavaScript的React框架中的JSX语法学习入门教程什么是JSX? 在用React写组件的时候,通常会用到JSX语法,粗看上去,像是在Javascript代码里直接写起了XML标签,实质上 ...
react入门代码_如何在React中构建温度控制应用程序-包括提示和入门代码
react入门代码我们正在建立的 (What we're building) In this beginner React project, we're going to learn how to ...
React入门看这篇就够了
2019独角兽企业重金招聘Python工程师标准>>> 摘要: 很多值得了解的细节. 原文:React入门看这篇就够了作者:Random Fundebug经授权转载,版权归原作者所 ...
《慕课React入门》总结
React 入门与实战 react组件虚拟DOM的概念这是React性能高效的核心算法 React为此引入了虚拟DOM(Virtual DOM)的机制.基于React进行开发时所有的DOM构造都是 ...
React入门指引与实战
React是Facebook公司推出的前端组件化解决方案,目的在于解决前端开发中存在的各个痛点.目前,前端框架与库层出不穷,形成了异常繁荣的局面,那么Facebook为何还要重复造轮子呢?究其原因,F ...
React 入门手册
大家好,我是若川.推荐这篇可收藏的React入门手册.也推荐之前一篇类似的文章<如何使用 React 和 React Hooks 创建一个天气应用>. 点击下方卡片关注我.加个星标 Rea ...
React 入门学习笔记2
摘自阮一峰:React入门实例教程,转载请注明出处. 一.获取真实的DOM节点组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM).只有当它 ...
B站尚硅谷React入门教程
视频链接:React全家桶(技术栈) 第1章:React入门 1.1. React简介 1.1.1 官网英文官网: https://reactjs.org/ 中文官网: https://react. ...
视频教程-2019 react入门至高阶实战，含react hooks-ReactJS
2019 react入门至高阶实战,含react hooks 从事前端开发近5年时间,曾任职于丽珠集团等大型企业担任高级前端开发工程师职位,积累了很多大厂的前端开发经验. 目前处于创业期,正在筹备自己 ...

React入门（一）之基本语法（内容较多）