React 详解（1）

React 简介

React 基础

JSX的本质

JSX并不是标准的JS语法，它是JS的语法扩展，浏览器本身不能识别，需要通过解析工具做解析之后才能在浏览器中运行。

这里主要依靠BABEL解析工具来解析，下面简单的介绍一下这个解析工具(http://babeljs.io)：

JSX中使用JS表达式

在JSX中可以通过大括号语法 {} 识别 JavaScript中的表达式，比如常见的变量、函数调用、方法调用等等.

使用引号传递字符串

{'this is message'}

使用Javascript变量
{count}
函数调用和方法调用

function get() {
  return 'Hello world!'
}
{get()}

使用javaScript对象

<div style={{color:'red'}}>
this is div.
</div>

JSX中实现列表渲染

<ul>
  <li>湖北省</li>
  <li>湖南省</li>
  <li>河北省</li>
</ul>

语法：在JSX中可以使用原生JS中的map方法遍历渲染列表

JSX实现条件渲染

语法：在React中，可以通过逻辑运算符&&、三元表达式(?:)实现基础的条件渲染

// 定义文章类型
const articleType = 1

function getArticle() {
  if (articleType === 0) {
    return <div>我是无图文章</div>
  } else if(articleType == 1) {
    return <div>我是单图模式</div>
  } else {
    return <div>我是三图模式</div>
  }
}

React中的事件绑定

React基础事件绑定

语法：on + 事件名称 = {事件处理程序}，整体上遵循驼峰命名法

const handleClick = () => {
  console.log('button被点击了')
}
return (
  <div className='App'>
    <button onClick={handleClick}>click me</button>
  </div>
)

使用事件对象参数
语法：在事件回调函数中设置形参e