首页 > 代码库 > 【React】- 1、React介绍

【React】- 1、React介绍

React的开发背景

构建数据不断变化的大型应用

        大量DOM操作      <----   自动DOM操作

数据变化

        逻辑及其复杂       <----   状态对应内容(自动变化)

 

特点:

  - 简单    上手容易,代码简单

  - 声明式   

React 的核心是组件,组件的设计目的是 提高代码复用率降低测试难度代码复杂度

 

提高代码复用率:组件将 数据和逻辑封装,类似面向对象中的类

降低测试难度:组件 高内聚低耦合,很容易对单个组件进行测试

降低代码复杂度:直观的语法 可以极大提高可读性

 

下载Facebook官方的基础代码

Emmet语法介绍

子代: >    div>ul>li

<div>
	<ul>
		<li></li>
	</ul>
</div>

 

兄弟:+

父代:^    div+div>p>span+em^bq  

<div></div>
<div>
	<p><span></span><em></em></p>
	<blockquote></blockquote>
</div>

 

重复:*      ul>li*5

<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

 

成组:()    (div>dl>(dt+dd)*3)+footer>p

<div>
	<dl>
		<dt></dt>
		<dd></dd>
		<dt></dt>
		<dd></dd>
		<dt></dt>
		<dd></dd>
	</dl>
</div>
<footer>
	<p></p>
</footer>

 ID:#

class:.    div#header+div.page+div#footer.class1.class2.class3

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

 

属性: []    td[title="Hello world!" colspan=3]    

<td title="Hello world!" colspan="3"></td>

 

例子:    (div+p#test>span.test2.test3)*5+p[name="hello"]>div.test4^a*5

<div></div>
<p id="test"><span class="test2 test3"></span></p>
<div></div>
<p id="test"><span class="test2 test3"></span></p>
<div></div>
<p id="test"><span class="test2 test3"></span></p>
<div></div>
<p id="test"><span class="test2 test3"></span></p>
<div></div>
<p id="test"><span class="test2 test3"></span></p>
<p name="hello">
	<div class="test4"></div>
</p>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>

html:5

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

 

React 程序结构介绍

本质上就是一个HTML页面,在HTML页面中可以编写JS代码(JSX代码)和CSS代码

也可以把JS代码和CSS代码分别存储到JS文件中和CSS文件中,最后引入到HTML页面中

 

1

1

 

【React】- 1、React介绍