【React】react学习笔记01-概念与基本使用
俺为啥要学这玩意:
家里的杂事好不容易处理完了,开始正式静下心来学习~博主是做后端开发的,js基础不深,之前也是用React写过许多东西了,但是基本上都是用的CV大法,别人的组件修修改改拿来就用,总感觉自己在使用上还有很大的欠缺,所以从头开始系统的学习。
而博客是我的笔记,也是自我归纳整理的过程,说不定也能不小心帮助到那个有兴趣的同学,何乐而不为呢?所以把我的学习过程分享出来,作为一个系列,也是我搬来博客园第一篇用心的博文,开始~
适合什么人看:
有点html和js基础吧,react本质上是FB的一个js库,所以欲练此功,必先.......学js。
官网祭天
offical website:https://react.docschina.org/
定义:
用于构建用户界面的 JavaScript 库。
特点:
1、声明式:个人理解,类似声明变量的方式声明dom对象。
2、组件化:通过组件去搭建页面,可重用性很强大。什么是组件呢?一个独立的input标签,一个写好的登录模块,都可以理解成组件。
我们将一些可重用性的标签组抽取出来,就形成了组件库。
3、一次学习,随处编写:这算啥特点?听听就行了,js都是这么用的。
HELLO REACT
下面是我写的一个小demo,如何引入页面进行使用,复制下来直接用。这个是基础中的基础,根据注释看看每部分干什么就行:
如果看不懂也就没必要继续往下看了。
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title>React Tutorial</title> </head>
<body>
<!--react基础库-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
<!--bable转换库,ES语法以及Jax语法的转换-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> <div id="content"></div>
<div id="app1"></div>
<div id="app2"></div>
<div id="app3"></div> <script type="text/babel">
//开启debug
debugger //创建虚拟DOM元素
var dom1 = <a href="#">hello react</a>
var dom2 = <a href="#">HELLO REACT</a>
//React创建虚拟dom对象的API语法,由babel库进行编译。参数1标签名称、参数2属性列表、参数3标签内部的内容。
var dom3 = React.createElement("h1",{id : 'ids'},"内容"); //React追加元素
ReactDOM.render(dom1,document.getElementById("app1"));
ReactDOM.render(dom2,document.getElementById("app2"));
ReactDOM.render(dom3,document.getElementById("app3")); //赋值引用
const baidu = "百度一下,你就中招";
const str1 = 'https://www.baidu.com';
var dom4 = <a href={str1}>{baidu}</a>
ReactDOM.render(dom4,document.getElementById("content")); </script> </body>
</html>
页面效果:
重点概念
1、虚拟DOM:虚拟DOM最终会转换为真实的DOM对象。
上面代码中我添加了debug,大家可以自己看一下React的DOM对象以及网页上原DOM对象的内容,可以看到真实DOM对象很重,而React的虚拟DOM则比较轻量。
2、JAX文件:JavaScript XML,js的标记语言形式,最终会由React中的babel库编译成js。
最新文章
- stm32控制电机
- js修改不了input的值
- php 无法连接mysql
- [DB]MariaDB 与 MySql 数据库
- 【整理】-- C++ 多线程
- [Bhatia.Matrix Analysis.Solutions to Exercises and Problems]Contents
- shell 加法
- Ubuntu启动项设置——之update-rc.d 命令使用
- xampp安装时mysql报错
- 小猪猪C++笔记基础篇(六)参数传递、函数重载、函数指针、调试帮助
- [置顶]
 xamarin android使用gps定位获取经纬度
- JDK 8 函数式编程入门
- Sed工作原理
- Linux 用户管理_015
- PHP CutyCapt生成网页url截图
- 使用STM32的USART的同步模式Synchronous调戏SPI【usart模拟spi理论】
- rails gem更换ruby-china源
- SSH客户端提示 用户密钥未在远程主机上注册
- 洛谷 P3698 [CQOI2017]小Q的棋盘 解题报告
- 50个必备jQuery代码段
热门文章
- 机器学习: Viola-Jones 人脸检测算法解析(二)
- C++ 11开发环境的搭建(Windows Platform)
- 方阵的迹(trace)及其微分(导数)
- 专访Jeffrey Richter:Windows 8是微软的重中之重
- 十个 Web 开发者熟悉的经典开源项目和工具
- 高启全:长江存储自主3D NAND,DRAM研发欢迎美光一起加入(千秋大业,慢慢做)
- Ruby已经慢慢走向衰退了,那些年代久远而且小众的语言没有翻身的可能性
- Delphi结束进程模块
- BI-学习之 商业智能平台的引入(传统关系型数据库的问题)
- 使用PNG实现半透明的窗体(使用GDI+)