react简介

react是什么？

是一个将数据渲染为HTML视图的开源JS库。

为什么要学react？

原生js操作DOM频繁，效率低（DOM-API操作UI）；

使用js直接操作DOM，浏览器会进行大量的重绘重排；

原生js没有组件化编码方案，代码复用率低；

react特点？

采用组件化模式，声明式编码，提高开发效率和组件复用率；

在React Native中可以使用React语言进行移动端开发；

使用虚拟dom+diffing算法，尽量减少与真实DOM的交互；

hello react小案例

babel.min.js------转译文件

react.development.js-----react核心库

react-dom.development.js-----react扩展库

在非脚手架的情况下引入以上三个文件是有引入顺序的，先引入核心库，在引入扩展库，最后引入

babel

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>hello_react</title>
</head>
<body><!---准备好一个容器--><div id="test"></div><!---引入核心库,必须最先引入--><script src="../js/react.development.js"></script><!---引入react-dom，用于支持react操作dom，其次引入--><script src="../js/react-dom.development.js"></script><!---引入babel，用于将jsx转化为js，最后引入--><script src="../js/babel.min.js"></script><script type="text/babel">// 此处一定要写babel，将jsx转化为js// 1.创建虚拟DOMconst VDOM = <h1>hello,react</h1> // 此处一定不要写引号，因为不是字符串// 2.渲染虚拟DOM到页面// ReactDOM.render(虚拟DOM,容器),因为react没有提供选择器的简写形式，所以写原生的获取ReactDOM.render(VDOM, document.getElementById('test'))</script>
</body>
</html>

虚拟DOM的两种创建方式

1.使用jsx创建虚拟DOM

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1.使用jsx创建虚拟DOM</title>
</head>
<body><!---准备好一个容器--><div id="test"></div><!---引入核心库,必须最先引入--><script src="../js//react.development.js"></script><!---引入react-dom，用于支持react操作dom，其次引入--><script src="../js/react-dom.development.js"></script><!---引入babel，用于将jsx转化为js，最后引入--><script src="../js/babel.min.js"></script><script type="text/babel">// 此处一定要写babel，将jsx转化为js// 1.创建虚拟DOMconst VDOM = ( // 此处一定不要写引号，因为不是字符串<h1><span>hello,react</span></h1>)// 2.渲染虚拟DOM到页面// ReactDOM.render(虚拟DOM,容器),因为react没有提供选择器的简写形式，所以写原生的获取ReactDOM.render(VDOM, document.getElementById('test'))</script>
</body>
</html>

2.使用js创建虚拟DOM

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>2.使用Js创建虚拟DOM</title>
</head>
<body><!---准备好一个容器--><div id="test"></div><!---引入核心库,必须最先引入--><script src="../js//react.development.js"></script><!---引入react-dom，用于支持react操作dom，其次引入--><script src="../js/react-dom.development.js"></script><script type="text/javascript">// 1.创建虚拟DOM,此处react提供了创建节点的方法API，React.creatElement// const VDOM = React.createElement('标签名',标签属性, 标签体内容)const VDOM = React.createElement('h1', {id: 'title'}, React.createElement('span', {}, 'HELLO,REACT'))// 2.渲染虚拟DOM到页面// ReactDOM.render(虚拟DOM,容器),因为react没有提供选择器的简写形式，所以写原生的获取ReactDOM.render(VDOM, document.getElementById('test'))</script>
</body>
</html>

总的来说：jsx是js语法糖，jsx写起来更加的方便；babel在进行编译之后也是把jsx的虚拟DOM转

化为js写法的虚拟DOM，但是程序员在开发中都是使用jsx创建虚拟DOM，毕竟写起来方便

3.关于虚拟DOM的说明

本质是object类型的对象（一般对象）；

虚拟DOM比较轻，真实DOM比较重，因为虚拟DOM是react内部使用，无需真实DOM身上那么多

的属性；

虚拟DOM最终会被react转化为真实DOM呈现在页面上

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1.使用jsx创建虚拟DOM</title>
</head>
<body><!---准备好一个容器--><div id="test"></div><div id="demo"></div><!---引入核心库,必须最先引入--><script src="../js//react.development.js"></script><!---引入react-dom，用于支持react操作dom，其次引入--><script src="../js/react-dom.development.js"></script><!---引入babel，用于将jsx转化为js，最后引入--><script src="../js/babel.min.js"></script><script type="text/babel">// 此处一定要写babel，将jsx转化为js// 1.创建虚拟DOMconst VDOM = ( // 此处一定不要写引号，因为不是字符串<h1><span>hello,react</span></h1>)// 2.渲染虚拟DOM到页面// ReactDOM.render(虚拟DOM,容器),因为react没有提供选择器的简写形式，所以写原生的获取ReactDOM.render(VDOM, document.getElementById('test'))const TDOM =document.getElementById('demo')console.log('虚拟DOM', VDOM)console.log('真实DOM', TDOM)debugger// console.log(typeof VDOM)  // 输出object// console.log(VDOM instanceof Object) // 输出true</script>
</body>
</html>

JSX说明

1).全称：JavaScript XML

2).react定义的一种类似于XML的JS扩展语法：JS+XML

3).本质是React.createElement('属性名'，属性，标签体内容)方法的语法糖---也就是js创建虚拟

DOM的写法

4).作用：用来简化创建虚拟DOM---也就是用JSX创建虚拟DOM的写法

5).标签名任意：HTML标签或者是其他标签

JXS语法规则

1.定义虚拟DOM时不要写引号

2.标签中混入JS表达式时用{ }

3.样式的类名指定不要用class,要用className

4.内联样式，要用style = {{key: 'value'}}的形式去写，key如果是多个构成，单词采用小驼峰写法

5.虚拟DOM只有一个根标签

6.标签必须闭合

7.标签首字母：

（1）若小写字母开头，则将改标签转化为html中同名标签，若html中无该标签对应的同名元素，则报错

（2）若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>hello_react</title><style>.title{background-color: aqua;width: 200px;}</style>
</head>
<body><!---准备好一个容器--><div id="test"></div><!---引入核心库,必须最先引入--><script src="../js//react.development.js"></script><!---引入react-dom，用于支持react操作dom，其次引入--><script src="../js/react-dom.development.js"></script><!---引入babel，用于将jsx转化为js，最后引入--><script src="../js/babel.min.js"></script><script type="text/babel">const myId = 'atGUIgU'const myData = 'HEElo, ReacT'// 1.创建虚拟DOMconst VDOM = (<div><h2 className= 'title' id= {myId.toLowerCase()}><span style={{color:'white',fontSize:'25px'}}>{myData.toLowerCase()}</span></h2><h2 className= 'title' id= {myId.toUpperCase()}><span style= {{color:'white', fontSize:'25px'}}>{myData.toLowerCase()}</span></h2><input type= 'text' /></div>)// 2.渲染虚拟DOM到页面// ReactDOM.render(虚拟DOM,容器),因为react没有提供选择器的简写形式，所以写原生的获取ReactDOM.render(VDOM, document.getElementById('test'))</script>
</body>
</html>

注意事项：一定注意区分js表达式和js语句

1.表达式：一个表达式可以返回一个值，可以放在任何一个需要值的地方

例如：a/ a+b/ demo(1)/ arr.map()/ function test() {}

2.语句：

下面这些都是语句（代码）：

if(){} for() {} swtich() {case:xxx}

React学习（入门了解）相关推荐

React学习:入门实例-学习笔记
文章目录 React学习:入门实例-学习笔记 React的核心需要引入三个库什么是JSX react渲染三步骤 React学习:入门实例-学习笔记 React的核心 1.组件化:把整一个网页的拆分 ...
react 学习入门指南
在学习react 之前我们需要知道的JavaScript前置知识变量箭头函数使用拓展运算符处理对象和数组对象和数组的解构模板字符串回调函数 es模块化你不需要成为专家,但是希望您能对以上 ...
react项目中的参数解构_一天入门React学习心得
一天入门React学习心得阅读前必读本文写的仓促,算是一个学习笔记吧,算是一个入门级的学习文章.如果你刚刚入门,那么可能一些入门的视频可能更加适合你.但如果具备一些知识,比如Vue,那么视频就不适 ...
React学习笔记：入门案例
React学习笔记:入门案例 React 起源于 Facebook 内部项目,因为市场上所有 JavaScript MVC 框架都不令人满意,公司就决定自己写一套,用来架设 Instagram 的网站 ...
jsx 调用php,JavaScript_JavaScript的React框架中的JSX语法学习入门教程，什么是JSX？在用React写组件的 - phpStudy...
JavaScript的React框架中的JSX语法学习入门教程什么是JSX? 在用React写组件的时候,通常会用到JSX语法,粗看上去,像是在Javascript代码里直接写起了XML标签,实质上 ...
React.js入门笔记
# React.js入门笔记核心提示这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
React学习途径和资料分享
转自: https://www.jianshu.com/p/de421e0db710 这段时间因为项目的原因,要做web前端,趁此机会调研了一下当前前端的技术,根据调研的结果,React毫无疑问是现 ...
React.js 入门与实战课程思维导图
原文发表于我的技术博客我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,在这里分享了课程中的思维导图,供大家参考. 原文发表于我的技术博客此导图为课程 ...
《React 学习之道》The Road to learn React (简体中文版)
通往 React 实战大师之旅:掌握 React 最简单,且最实用的教程. 前言 <React 学习之道>这本书使用路线图中的精华部分用于传授 React,并将其融入一个独具吸引力的真实世 ...
React学习资料+css进阶资料总结
# Awesome ## 最佳实践 * [React + Redux 最佳实践](https://github.com/sorrycc/blog/issues/1) * [Redux 最佳实践-译]( ...

React学习（入门了解）