【React全家桶】 React入门
React简介
React是什么
React 是一个用于构建用户界面的 JavaScript 库。
- 是一个将数据渲染为 HTML 视图的开源 JS 库
- 它遵循基于组件的方法,有助于构建可重用的 UI 组件
- 它用于开发复杂的交互式的 web 和移动 UI
React官网
1)英文官网:https://reactjs.org
2)中文官网: https://react.docschina.org/
3)中文官网: https://zh-hans.reactjs.org
谁开发的?
由Facebook开发,且开源。
1.起初由 Facebook 的软件工程师 Jordan Walke 创建。
2.于2011年部署于Facebook的newsfeed
3.随后在 2012 年部署于 Instagram
4.2013 年5月宣布开源。
5…
为什么要学?
1.原生JavaScript操作DOM繁琐、效率低(DOM-API 操作 UI)。
2.使用JavaScript直接操作DOM,浏览器会进行大量的重绘重排。
3.原生JavaScript没有组件化编码方案,代码复用率低。
React高效的原因
- 使用虚拟(virtual)DOM不总是直接操作页面真实DOM
- DOM Diffing 算法,最小化页面重绘。
React的特点
1.采用组件化模式、声明式编码,提高开发效率及组件复用率。
2.在React Native中可以使用React语法进行移动端开发。
3.使用虚拟DOM+优秀的Diffing 算法,尽量减少与真实DOM的交互。
React 的一些主要优点?
- 它提高了应用的性能
- 可以方便在客户端和服务器端使用
- 由于使用 JSX,代码的可读性更好
- 使用React,编写 UI 测试用例变得非常容易
学习React之前你要掌握的JavaScript基础知识
- 判断this的指向
- class(类)
- ES6语法规范
- npm包管理器
- 原型、原型链
- 数组常用方法
- 模块化
React的基本使用
相关js库
- react.js: React 核心库。
- react-dom.js:提供操作DOM的react扩展库。
- babel.min.js:解析JSX语法代码转为JS代码的库。
hello,react!
1.先引入react.development.js,后引入react-dom.development.js
react.development.js //React 核心库
react-dom.development.js //操作 DOM 的 react 扩展库
babel.min.js //将 jsx 转为 js 的 babel 库
2.创建一个容器
3.创建虚拟DOM,渲染到容器中
代码示例:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>使用jsx创建虚拟DOM</title><!-- 引入react核心库 --><script type="text/javascript" src="js/react.development.js"></script><!-- 引入react-dom.用于支持react操作DOM --><script type="text/javascript" src="js/react-dom.development.js"></script><!-- 引入babel.用于将jsx转为js --><script type="text/javascript" src="js/babel.min.js"></script></head><body><!-- 准备好一个“容器” --><div id="root"></div><script type="text/babel"> /* 此处一定要写babel *///1.创建虚拟DOM 此处一定不要写引号,因为不是字符串 const VM = <h1>hello,React!</h1>;//2.渲染虚拟DOM到页面 ReactDOM.render(VM,document.getElementById('root')) </script></body>
</html>
创建虚拟DOM的两种方式
1.使用jsx创建虚拟DOM
2.使用js创建虚拟DOM,纯JS方式(一般不用)
JS 创建虚拟 DOM
//1.创建虚拟DOM,创建嵌套格式的dom
const VDOM=React.createElement('h1',{id:'title'},React.createElement('span',{},'hello,React'))
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.querySelector('.test'))
Jsx 创建虚拟DOM
//1.创建虚拟DOMconst VDOM = ( /* 此处一定不要写引号,因为不是字符串 */<h1 id="title"><span>Hello,React</span></h1>)
//2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.querySelector('.test'))
虚拟DOM和真实DOM
关于虚拟DOM:
1,本质是Object类型的对象(一般对象)
2.虚拟DOM比较“轻”,真实DOM比较“重”,因为虚拟DOM是React内部在用,无需真实DOM上那么多的属性。
3.虚拟DOM最终会被React转化为真实DOM,呈现在页面上。
React JSX
jsx 语法
- 全称:JavaScript XML
- react 定义的一种类似于 XML 的JS 扩展语法:JS+XML
- 本质是React.createElement(component, props, …children)方法的语法糖
- 作用:用来简化创建虚拟 DOM
a. 写法:var ele =<h1>Hello JSX!</h1>
b. 注意 1:它不是字符串,也不是 HTML/XML 标签
c. 注意 2: 它最终产生的就是一个 JS 对象 - 标签名任意:HTML标签或其它标签
Jsx语法规则
1.定义虚拟DOM,不能使用“”
引号
2.标签中混入JS表达式的时候使用{}
3.样式的类名指定不要用class.要用className.
4.内联样式,要用style={{key:value}}
的形式去写
5.不能有多个根标签,只能有一个根标签
6.标签必须闭合,自闭合也行
7·标签首字母
(1) 若小写字母开头,则将该标签转为htm1中同名元素,若html中无该标签对应的同名元素,则
(2) 若大写字母开头,react就去渲染对应的组件,若组件没有定义,则报错。
<script type="text/babel">const myId = 'aTgUiGu';const myData = 'HeLlo, rEaCt';//1.创建虚拟DOMconst VDOM = (<div><h2 className="title" id={myId.toLowerCase()}><span style={{color: 'blue', fontSize: '29px' }}>{myData.toLowerCase()}</span></h2><h2 className="title" id={myId.toUpperCase()}><span style={{ color: 'green', fontSize: '29px' }}>{myData.toLowerCase()}</span></h2><input type="text" /><span>123</span></div>);//2,渲染虚拟DOM到页面ReactDOM.render(VDOM, document.getElementById('root'));
</script>
注释
写在花括号里
ReactDOM.render(<div><h1>hello</h1>{/*注释...*/}</div>,document.getElementById('example')
);
数组
JSX 允许在模板中插入数组,数组自动展开全部成员
var arr = [<h1>html</h1>,<h2>css</h2>,
];
ReactDOM.render(<div>{arr}</div>,document.getElementById('example')
);
区分: 【js语句(代码)】与【js表达式】
1.表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方。
下面这些都是表达式:
(1). a(2). a+b(3). demo(1)(4). arr.map()(5). function test () {}
2.语句(代码):
下面这些都是语句(代码):
(1).if(){}(2).for(){}(3).switch(){case:xxxx}
JSX 小练习
根据动态数据生成 li
const data = ['A','B','C']
const VDOM = (<div><ul>{data.map((item,index)=>{return <li key={index}>{item}</li>})}</ul></div>
)
ReactDOM.render(VDOM,document.querySelector('.test'))
模块与组件、模块化与组件化的理解
模块
1)理解: 向外提供特定功能的js程序,一般就是一个js文件
2)为什么要拆成模块:随着业务逻辑增加,代码越来越多且复杂。
3)作用: 复用js,简化js的编写,提高js运行效率
组件
1)理解: 用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
2)为什么: 一个界面的功能更复杂
3)作用: 复用编码,简化项目编码,提高运行效率
模块化
当应用的js都以模块来编写的,这个应用就是一个模块化的应用
组件化
当应用是以多组件的方式实现,这个应用就是一个组件化的应用
【React全家桶】 React入门相关推荐
- 视频教程-React 全家桶从入门到实战到源码-其他
React 全家桶从入门到实战到源码 上市公司前端开发工程师,专注于 React 技术栈,对 React 全家桶从 react-router 路由到 Redux 状态管理工具再到 webpack 打包 ...
- React 全家桶入门教程 01
React 全家桶入门教程 01 前面是基础课程(难度小,略过),后面是案例 目的 巩固react基础知识,查漏补缺(熟悉的部分快进) 学习相关的库的使用 https://study.163.com/ ...
- 从零搭建React全家桶框架教程
从零搭建React全家桶框架教程 源码地址:https://github.com/brickspert/react-family 欢迎star 提问反馈:blog 原文地址:https://githu ...
- 【学习笔记】React+React全家桶学习笔记
文章目录 1 为什么要使用React 2 React的定义 3 React的三大特性 4 React入门 4.1 hello_react 4.2 虚拟DOM的创建 4.3 JSX 4.4 模块与组件, ...
- 技术胖的2019新版React全家桶免费视频(84集)
技术胖 2019年09月18日 阅读 29883 关注 技术胖的2019新版React全家桶免费视频(84集) 一共84集,从5月4日开始录制,到9月18日完成,5个月时间.如果是一个专业讲师,这进度 ...
- 小邵教你玩转Typescript、ts版React全家桶脚手架
前言:大家好,我叫邵威儒,大家都喜欢喊我小邵,学的金融专业却凭借兴趣爱好入了程序猿的坑,从大学买的第一本vb和自学vb,我就与编程结下不解之缘,随后自学易语言写游戏辅助.交易软件,至今进入了前端领域, ...
- react全家桶实战(千峰教育)
说明:本笔记为本人基于千锋教育2022版React全家桶教程_react零基础入门到项目实战完整版的学习笔记,知识点不清或不全,可以到视频教程中学习 文章目录 一.安装create-react-app ...
- react全家桶从0到1(react-router4、redux、redux-saga)
本文从零开始,逐步讲解如何用react全家桶搭建一个完整的react项目.文中针对react.webpack.babel.react-route.redux.redux-saga的核心配置会加以讲解, ...
- 使用react全家桶制作博客后台管理系统
前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统 概述 该项目是基于react全家桶(React.React-r ...
- react全家桶实现招聘app-项目准备(一)
1.1 项目技术 a. 使用react全家桶 + es6 + webpack + antd-mobile b. 采用模块化.组件化.工程化 c. Node + express + mongodb + ...
最新文章
- 六轴机器人 宝元系统_庆云大国重器上线六轴智能焊接机器人,锻造高质量发展硬核...
- .NET 判断进程是否运行 是否未响应
- linux命令:bash脚本选项使用cat EOF使用 getopts选项描述
- 基于POI的读写Excel文件的工具类
- 计算机序号函数,EXCEL函数自动编号/编码单条件和多条件的几种方法
- Java程序猿JavaScript学习笔记(4——关闭/getter/setter)
- java filter过滤器_JavaWeb之 Filter(过滤器)
- 使用 Intel HAXM 为 Android 模拟器加速,媲美真机
- android布局参照示例_约束布局Android示例–第2部分
- 趣味思考--苹果剩余最大量
- Java 程序读取properties文件
- 关于达梦监视器dmmonitor的一些知识
- Excel插件POI-ET扩展(NiceXSSFWorkbook)说明
- vue 项目完美运行在IE或者360浏览器兼容模式下 踩坑笔记
- eclipse php集成包,php-eclipse集成配置(Ecli
- 低成本更清晰,下一代视频编码技术将如何实现这一目标?
- 计算机桌面整理,电脑桌面太乱了怎么整理?
- 互联网寒冬,软件测试尚能饭否?
- 有没有一种文件系统可以支持所有的操作系统(Win+Linux+Mac)而且支持大文件而且不需要辅助软件呢?
- matlab的主要功能与应用领域,MatLab的特点及应用领域?
热门文章
- Acquisition Attempt Failed!!! Clearing pending acquires. While trying to acquire a needed new resour
- java cpu分配_容器中的Java:资源分配准则
- JS 中 apos;helloapos; 和 new String(apos;helloapos;) 引出的问题
- 麋鹿分布图制作(一)——调用百度API查询地名的坐标
- AES AES/GCM/NoPadding 加密解密
- idea提交git报401错误解决办法
- java jen部署_CSS布局:Jen Simmons的网格,区域和@Supports
- 85 数模 电动汽车目标客户销售策略研究(21 华数 C)
- Nachos 3.4入门的两个问题
- 网络状态码302和303的区别究竟是啥?面试官最满意这种回答