React框架简介
React的基本认识
Facebook开源的一个js库，一个用来动态构建用户界面的js库
React的特点
Declarative(声明式编码)，Component-Based(组件化编码)，Learn Once, Write Anywhere(支持客户端与服务器渲染)，高效，单向数据流
声明式编程：只关注做什么, 而不关注怎么做(流程), 类似于填空题，命令式编程：要关注做什么和怎么做(流程), 类似于问答题
React高效的原因
虚拟(virtual)DOM, 不总是直接操作DOM(批量更新, 减少更新的次数)
高效的DOM Diff算法, 最小化页面重绘(减小页面更新的区域)
React的基本使用
需求：在一个div容器内插入一个元素，效果如下：
导入相关js库文件(react.js（核心库）, react-dom.js（提供操作DOM的react扩展库）, babel.min.js（解析JSX语法代码转为纯JS语法代码的库）)
<script type="text/javascript" src="../js/react.development.js"></script> <script type="text/javascript" src="../js/react-dom.development.js"></script> <script type="text/javascript" src="../js/babel.min.js"></script>
具体代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01_HelloWorld</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">/*告诉babel.js解析里面的jsx的代码*/
// 1. 创建虚拟DOM元素对象
var vDom = <h1>Hello React!</h1> // 不是字符串
// 2. 将虚拟DOM渲染到页面真实DOM容器中
ReactDOM.render(vDom, document.getElementById('test'))
</script>
</body>
</html>
安装React Devtools调试工具
下载 chrome react developer tools
安装：打开chrome 浏览器==>更多工具==》扩展程序
将插件拖入 在详细信息中点击启用即可； react developer tools 安装完毕。
虚拟DOM
React提供了一些API来创建一种 `特别` 的一般js对象，纯JS(一般不用)
var element = React.createElement('h1', {id:'myTitle'},'hello')
上面创建的就是一个简单的虚拟DOM对象
虚拟DOM对象最终都会被React转换为真实的DOM
我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>02_JSX_DEMO</title>
</head>
<body>
<h2>前端JS框架列表</h2>
<div id="test1"></div>
<div id="test2"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/javascript">
// 使用React提供了一些API来创建虚拟DOM，没有使用JSX语法的话，可以直接使用type="text/javascript"，不用写成bable
const msg = 'I Like You!'
const myId = 'Atguigu'
// 1.创建虚拟DOM对象
// 第一个参数是标签名，第二个参数是是标签的属性, 第三个参数是标签里的内容
const vDom1 = React.createElement('h1', {id: myId.toLowerCase()}, msg.toUpperCase())
//渲染虚拟DOM
// 第一个参数是虚拟DOM对象， 第二个参数是需要插入的真实DOM元素
ReactDOM.render(vDom1, document.getElementById('test1'))
</script>
</body>
</html>
JSX的理解和使用
全称: JavaScript XML，react定义的一种类似于XML的JS扩展语法: XML+JS，作用:是用来创建react虚拟DOM(元素)对象
标签名任意: HTML标签或其它标签 标签属性任意: HTML标签属性或其它
var ele = <h1>Hello JSX!</h1> //注意1: 它不是字符串, 也不是HTML/XML标签 // 注意2: 它最终产生的就是一个JS对象
JSX基本语法规则
遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
遇到以 { 开头的代码，以JS语法解析: 标签中的js代码必须用{ }包含
渲染虚拟DOM(元素)
语法: ReactDOM.render(virtualDOM, containerDOM)
作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
参数说明 参数一: 纯js或jsx创建的虚拟dom对象，参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)
babel.js的作用
浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
只要用了JSX，都要加上type="text/babel", 声明需要babel来处理
需求是在两个div上插入元素，效果如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>02_JSX_DEMO</title>
</head>
<body>
<div id="test1"></div>
<div id="test2"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
const msg = 'I Like You!'
const myId = 'Atguigu'
// 1.创建虚拟DOM对象
const vDom1 = <h1 id={myId.toLowerCase()}>{msg.toUpperCase()}</h1>
const vDom2 = <h3 id={myId.toUpperCase()}>{msg.toLowerCase()}</h3>
//渲染虚拟DOM
// 第一个参数是虚拟DOM对象， 第二个参数是需要插入的真实DOM元素
ReactDOM.render(vDom1, document.getElementById('test1'))
ReactDOM.render(vDom2, document.getElementById('test2'))
</script>
</body>
</html>
JSX练习，需求: 动态展示列表数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>02_JSX_DEMO</title>
</head>
<body>
<h2>前端JS框架列表</h2>
<div id="example"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
/*功能: 动态展示列表数据*/
const names = ['jquery', 'zepto', 'angular', 'vue', 'react']
// 1.创建虚拟DOM
const vDom1 = (
<ul>
{
names.map((name, index) => <li key={index}>{name}</li>)
}
</ul>
)
// 2.渲染虚拟DOM
ReactDOM.render(vDom1, document.getElementById('example'))
</script>
</body>
</html>
React框架简介的更多相关文章
- 《React Native 精解与实战》书籍连载「React 与 React Native 简介」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- React Native 简介：用 JavaScript 搭建 iOS 应用(2)
[编者按]本篇文章的作者是 Joyce Echessa--渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.本篇文章中,作者介绍通过 React Native 框 ...
- React Native 简介：用 JavaScript 搭建 iOS 应用 (1)
[编者按]本篇文章的作者是 Joyce Echessa--渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.本篇文章中,作者介绍通过 React Native 框 ...
- React框架随笔
React框架随笔 现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了 ...
- Vue框架简介及简单使用
目录 一.前端框架介绍 二.vue框架简介 三.vue使用初体验 1. vue如何在页面中引入 2. 插值表达式 3. 文本指令 4. 方法指令(事件指令) 5. 属性指令 四.js数据类型补充 1. ...
- Spring 系列: Spring 框架简介 -7个部分
Spring 系列: Spring 框架简介 Spring AOP 和 IOC 容器入门 在这由三部分组成的介绍 Spring 框架的系列文章的第一期中,将开始学习如何用 Spring 技术构建轻量级 ...
- 《HiWind企业快速开发框架实战》（0）目录及框架简介
<HiWind企业快速开发框架实战>(0)目录及框架简介 本系列主要介绍一款企业管理系统快速开发框架,该框架旨在快速完成企业管理系统,并实现易维护可移植的目标. 使用逐个系统模块进行编码的 ...
- Yaf零基础学习总结1-Yaf框架简介
从今天开始,给大家讲解下yaf框架,讲解之前肯定要了解下yaf是个什么东西,当然,从标题我们已经知道yaf是个PHP框架了,也许大家对于PHP框架并不陌生,一般PHP程序员用过的框架至少有一两个吧,国 ...
- hdwiki 框架简介
虽然HDwiki是一个开源的wiki系统,并且代码简洁易懂,但如果想在系统上做做进一步开发还需要对框架有一个整体的认识.熟悉了HDwiki的框架以后完全可以独立出来做其他功能的开发,当做一个开源的PH ...
随机推荐
- php扩展编译方法
linux下php已经编译,如何再为php增加新的扩展通过php自带的phpize,如我的phpize在/usr/local/php/bin/phpize1.到软件的官方或pecl.php.net去下 ...
- Animate.css(一款有意思的CSS3动画库)
官网:https://daneden.github.io/animate.css/ animate.css 是一款跨浏览器的动画库. 使用方式: 在页面的 <head>中引入样式文件: & ...
- 如何将自定义的搜索参数便捷的添加到js方式的bootstrap table的参数中
页面: <div> <form id="exp_form"> 查询参数... <button type="button" oncl ...
- R语言实战（四）—— 基本数据管理
一.基础操作 1.根据数据信息,创建数据框 > manager <- c(1,2,3,4,5) > date <- c("10/24/08","1 ...
- .net core Identity集成IdentityServer4 (1)基本操作
一. 新建asp.net core identity项目 新建项目->asp.net core web应用程序-> web应用程序(模型视图控制器)&更改身份验证为个人. 新建一个 ...
- Spring Integration实现分布式锁
学习本篇之前,可以先看下文章 什么是分布式锁,了解下基本概念. 之前都是手写一个分布式锁,其实Spring早就提供了分布式锁的实现.早期,分布式锁的相关代码存在于Spring Cloud的子项目Spr ...
- SSM实现简单后台分页
1.简单思路 这是最常见的分页格式,分析一下我们需要传什么数据给前端吧! 首先是左边下面的总共几条记录,然后是右边的当前页面,然后就是一些你所需要展示的数据.对了每页显示多少条是不也得控制下,下面的显 ...
- 汇编语言--微机CPU的指令系统（五）（数据传送指令）
五.微机CPU的指令系统 1.汇编语言指令格式 汇编语言的指令格式如下: 指令助忆符 [操作数1 [, 操作数2 [, 操作数3]]] [;注释] 指令助忆符体现该指令的功能,它对应一条二进制编码的机 ...
- blfs（systemv版本）学习笔记-制作一个简单的桌面系统
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 大概思路: lfs(系统)+xorg(驱动)+i3-wm(窗口+桌面)+lightdm(显示管理器+登录管理器) 链接: lfs ...
- 【代码笔记】Web-Javascript-JavaScript简介
一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...