React入门基础教程
React入门基础教程
React 是什么?
React 是一个声明式,高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面,这些代码片段被称作“组件”
React的特点?
- 虚拟Dom节点
- 单向数据流
- 组件开发思维
React的语法特点
jsx: javascript和xml (htm1)标签混合写法
作用:
- 在javascript中书写html模板
- 有且只有一个根节点
- class要写成className
- 在{}可以写JavaScript
- 数组里面可以直接写html标签
- 注释用{/**/}
React的安装
//在全局安装
npm i -g create-react-app
//创建项目 myreact是你创建的项目名
create-react-app myreact
cd 进入到你的项目
cd myreact
使用npm start打开项目
npm start
当出现这个页面就表示页面创建成功了
React的注意事项
一般采用import的方式引入React,React首字母规定大些,因为jsx会默认使用大写的React
- 会根据尖括号(<)来判断是一个html,根据花括号({)来判断是一个js
- js中的保留字 关键字会进行转化
- class=>className for=>htmlFor react相邻的jsx元素,
- react元素,必须被一个标签包裹 <></>
- style标签 必须是一个对象 style={{}} //{}表示js里面的{}表示是一个对象 注释 要用{}包裹
- dangerouslySetInnerHTML 危险的,解析html用innerHtml的方式把内容塞进元素中
React的模板语法
1.条件渲染
(1)三元运算符
如果isLog为true则显示“欢迎回来”和“红烧肉”如果为假则显示“请登录”
{this.state.isLog?<p>欢迎回来</p>:<p>请登录</p>}{this.state.isLog&&<p>红烧肉</p>}
2.列表渲染
import React, { Component } from 'react'export default class App extends Component {constructor(props){super(props)this.state={list:['vue','react','jquery','js'],}render() {return (<div>{this.state.list.map(item=><p key={item}>{item}</p>)}</div>)}}
浏览器渲染结果为:
3.文本渲染
{2+3}
//浏览器渲染结果:5
//也可以写成:
export default class App extends Component {constructor(props){super(props)this.state={msg:"你好 react",}render() {return (<div>{this.state.msg}</div>)}}
3.事件
和普通js事件一致,需要驼峰式写法
onClick={this.sayHi}
onClick={()=>{this.sayHi(参数)
onClick={this.sayHi.bind(this,参数)
示例:
export default class App extends Component {
sayHi=(msg="china")=>{alert(msg)}
render() {return (<div>//三种不同的写法<button onClick={()=>alert('新年快乐')}>问候</button><button onClick={()=>{this.sayHi('china')}}>传参</button><button onClick={this.sayHi.bind(this,'中国人不骗中国人')}>传参2</button></div>)}}
4.更新状态 setState
- 是父类提供的,用于修改状态,这种更新状态的方式,不会覆盖之前的,只会进行比较把更新的状态进行合并
- this.setState 会刷新页面,如果不用this.setState。直接修改state 会改状态还是页面不会刷新
- 需要改属性的话只能把属性(props)变为状态(state)
this.setState({k:v})
this.setState({k:v},()=>{console.log"执行完毕的回调函数")}
onClick={()=>{this.setState({isLog:!this.state.isLog},()=>{console.log('切换完毕');})}}
代码示例:
export default class App extends Component {
constructor(props){super(props)this.state={isLog:false,}}
render() {return (<div><button onClick={()=>{this.setState({isLog:!this.state.isLog},()=>{console.log('切换完毕');})}}>切换</button></div>)}}
React的组件
函数组件
function App{return(<div></div>)
} export default App
标题函数组件的不足
- 没有状态 新版本有增加
- 没有生命周期的钩子 新版本有增加
- 函数组件中没有this
类组件
- 类组件在渲染时会默认调用render方法
- 类组件内有状态和钩子函数
- 需要继承React.Component
- React.Component 是一个基类,有生命周期,更改状态的方法
- 继承React.Component 之后才算是一个React类。
import React, { Component } from 'react'export default class App2 extends Component {render() {return (<div></div>)}}
React 的数据源(props(外部传入,不可修改) ,state(内部自带,可修改))
- props 会把组件传入的属性or方法放在this上 ---- 取值时:this.props.name
- this.state 状态 ---- 取值时:this.state.name
开发者工具
在 Chrome 或者 Firefox 中安装扩展 React Devtools 可以让你在浏览器开发者工具中查看 React 的组件树。
你还可以在 React DevTools 中检查 React 组件的 state 和 props。
安装 React DevTools 之后,右键点击页面的任何一个元素,然后选择“查看”,这样就能打开浏览器的开发者工具了,并且工具栏最后会多展示一个 React 的选项卡(包含 “⚛️ Components” 和 “⚛️ Profiler”)。你可以使用 “⚛️ Components” 来检查组件树。
React入门基础教程相关推荐
- Hadoop新手篇:hadoop入门基础教程
Hadoop新手篇:hadoop入门基础教程 关于hadoop的分享此前一直都是零零散散的想到什么就写什么,整体写的比较乱吧.最近可能还算好的吧,毕竟花了两周的时间详细的写完的了hadoop从规划到环 ...
- c++语言while循环,c++ c语言while 循环语句入门基础教程
c++ c语言while 循环语句入门基础教程 我们来看While 循环语句,它跟 For 循环区别在于,For 循环一般知道循环次数,在第一行里头就指明了,而while循环一般不知道循环次数,下面我 ...
- python基础教程运行程序_Python入门基础教程:WSGI
原标题:Python入门基础教程:WSGI WSGI 简介 WSGI 是什么 WSGI 是 Python Web Server Gateway Interface 的缩写,是描述 Web 服务器与 P ...
- Hadoop入门基础教程 Hadoop之单词计数
单词计数是最简单也是最能体现MapReduce思想的程序之一,可以称为MapReduce版"Hello World",该程序的完整代码可以在Hadoop安装包的src/exampl ...
- Hadoop入门基础教程 Hadoop之完全分布式环境搭建
上一篇我们完成了Hadoop伪分布式环境的搭建,伪分布式模式也叫单节点集群模式, NameNode.SecondaryNameNode.DataNode.JobTracker.TaskTracker所 ...
- Python学习入门基础教程(learning Python)--5.6 Python读文件操作高级
前文5.2节和5.4节分别就Python下读文件操作做了基础性讲述和提升性介绍,但是仍有些问题,比如在5.4节里涉及到一个多次读文件的问题,实际上我们还没有完全阐述完毕,下面这个图片的问题在哪呢? 问 ...
- python入门基础教程-Python入门基础教程:WSGI
原标题:Python入门基础教程:WSGI WSGI 简介 WSGI 是什么 WSGI 是 Python Web Server Gateway Interface 的缩写,是描述 Web 服务器与 P ...
- 超实用的Django入门基础教程,新手必备!
Django入门基础教程 Django简介 安装Django 虚拟环境的建立和准备工作 一.通过pycharm创建 手动创建app 迁移数据库 二.手动创建 创建一个新的文件夹 创建虚拟环境 激活虚拟 ...
- Timingdesigner入门 基础 教程
Timingdesigner 入门 基础 教程(装载) 原创作者:冰三点水 http://blog.csdn.net/u013608300/article/details/78988523 Timin ...
最新文章
- “云计算”三部曲之二:与“云”共舞——再谈云计算
- 必会系列之 filter 和 interceptor 的区别
- 爬虫实战:过年你被催婚啦吗?爬取相亲网站,看看当下年轻小姐姐的择偶观。
- LiveVideoStack 2021招聘季
- 字符串_月隐学python第7课
- 有1~5000一组乱序数列,请使用伪代码对该数进行排列
- SQL Server 2005新特性之使用with关键字解决递归父子关系
- 用于创建二维数组的语法
- 瀚云平台kafka简单原理
- linux shell中实现字符串反转的几种简单方法
- 自定义类加载器的父类为什么是AppClassLoader?
- 两分钟学会线性同余法产生伪随机数
- ios共享账号公众号_新增iOS应用账号共享09
- 批处理删除文件夹下所有文件和文件夹
- 凝视联通4G和4G+战略落地半年报,从数据亮点中找出路
- SEM和TEM的相同点和不同点
- 【起航计划ObjC 001】印第安老斑鸠ObjC的幻想 ---- Ubuntu下安装并使用Obj-C
- win10网络适配器不见了_Win10网络适配器消失不见了怎么办?,爱纯净官网
- c语言编程实现今日星期几,计算任何一天是星期几的C语言源代码.
- 《华为CC++语言安全规范》笔记