React的初识

因为公司iOS项目不明朗，所以有时间开始学学混合app开发，想要学习ReactNative，那就从React框架开始
React的官网（英文）地址

1.JSX简单介绍

const element = <h1>Hello, world!</h1>;

这就是一个JSX的定义一个元素的语法，这一段既不是一个简单的string也不是一串HTML。
这就是JSX,是javastript的语法扩展。
用来描述UI界面的样子，就像一种模板语言一样，同时也有js能力

以上是在官网上翻译过来的，不知道翻译的准不准确。但是基本意思应该在那里。没弄明白不重要，毕竟不是搞前端的。后面将会帮助你读懂React基本语法。

先上一个🌰

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

我们一个部分一个部分来
首先

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

这其实就是定义了一个json数据，
样子很像iOS里面的字典，但是使用方法很想iOS里面的对象，获取值得时候直接用点语法就可以了。
在js中表示一个json对象。用于保存数据。包含两个属性firstName和lastName，

第二部分

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

这一段是定义了一个函数，关键词function,传入一个user参数，就是上面提到的那个json对象。正如上面说的，在这里使用user对象里的属性的时候就是直接点就可以了。如果了解Swift开发就会发现这里的字符串拼接和Swift是一样的。js里面的字符串拼接也是用的+号。

第三部分

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

这里就是定义了一个React元素（Element）,用于渲染到UI界面中。在界面中就是表示一个h1标签。
值得注意的是花括号里面的东西。官网在JSX的介绍中，就有提到过可以在{}中嵌套任何合法的js语句。
这里是在花括号里调用了formatName函数，并且把user对象传入了函数，函数return 一段字符串 就会替换{}的内容。

最后一个部分

ReactDOM.render(
  element,
  document.getElementById('root')
);

ReactDOM 应该是React的单例对象。调用render()函数，用于渲染UI界面。
render函数需要传入两个参数

• 参数1 就是上面第三部分定义的element元素节点
• 参数2 是要将element放在谁上面（element的父节点）

执行了render函数以后就会渲染到UI界面。