react学习（一）

一、React框架

1、简介

    (1)是一个JavaScript库，用于简化用户界面的设计。

    (2)美国的Facebook公司2013年发布
	
	(3)基于jsx(JavaScript XML)语法.使用XML标记将html、JavaScript混写。是React的核心
	
	(4)组件：是数据和逻辑的封装，提高了代码的复用率，便于测试和维护
	
2、应用方式

    (1)传统方式：在页面中引入react库，进行开发
	
	      react.development.js：react的核心库
		
		  react-dom.development.js：是react中与DOM有关的库
		
		  babel.min.js：类似编译器,将ES6代码编译成ES5的
		
	    ReactDOM.render(element,container[,callback])：将element元素渲染到container中
	
	(2)React脚手架方式
	
3、React的虚拟DOM：由ReactDOM.render函数渲染的DOM元素都是虚拟的

二、JSX语法

1、将JavaScript语法写成XML格式：必须使用babel.js对JSX语法进行解析,通常的做法是

    <script type="text/babel"></script>

2、基本语法格式：

    const element = (
	
	   <标签名1></标签名1>
	   <标签名2></标签名2>
	   <标签名3></标签名3>
	);
	
3、JSX的表达式：所有表达式都放在{}中

   (1)算术表达式：{ 表达式 }
   
   (2)条件表达式：不能使用if语句，但是可以使用条件表达式实现if的功能
   
   (3)嵌入表达式：{ 变量 }
   
   (4)对象表达式：{ 对象名.属性名 }
   
   (5)函数表达式：{ 函数名([参数])}
   
   (6)增强型函数表达式：通过传参的方式实现if的选择
   
   (7)数组表达式：{ 数组名 }
   
   (8)样式表达式：<标签名 style={ 样式名 }><标签名/>
   
   (9)注释表达式：{/* 注释内容 */}

三、React的组件

1、类组件：

    (1)创建类组件：

	   class 组件名 extends React.Component{
	   
		  render() {
		  
			  return  (<标签名><标签名/>)
		  }
	   }

    (2)将类组件渲染到实际DOM中：类组件名的首字母必须大写
	
	   ReactDOM.render(<类组件名/>,实际DOM)
    

2、函数组件：函数名就是组件名