React学习之JSX语法讲解(一)

介绍JSX

什么是JSX？

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

右边这种在javascript中出现的HTML语句就是JSX语法，JSX可以提供给你一个模板语言，快速开发前端UI组件，是javascript前端框架中的利器之一。

React通过JSX可以快速的渲染出DOM节点，现在我开始说说JSX语法必备的一些基础知识。

这里重重声明，所谓的JSX一定是以标签为开端，以标签为终结的语句即为JSX，在React编译这段JSX时，会将它处理为一个javascript对象。同时React的语法基本是基于ES6的，所以希望读者可以执行学习ES6的基础知识

1.在JSX中可以掺杂表达式

如何插入呢，我们需要将任何插入JSX语句中的表达式都用一个大括号包括起来。

而所谓的表达式即javascript中的表达式，比如:1+1,user.id,和func(a,b)等，综合为如下：

1. 变量名
2. JSX语句表达式(也就是说JSX其实也是一种表达式)
3. 自执行函数表达式(如果只是单纯的函数定义表达式也可以，只是没有运行结果)
4. 函数调用表达式
5. 属性访问表达式
6. 算法，关系，逻辑,字符串表达式
7. 三元运算表达式

实例如下:

const use = "abc";
const user = {
  firstName: 'tm7',
  lastName: 'jxy'
};
function formatName(user) {
   
  return user.firstName + ' ' + user.lastName;
}
const t1 = 1, t2 = 2;

const a = <div>{
  'abc'}</div>;
const a = <div>{
  use}</div>;
const b = <div>{user.firstName}</div>;
const c = <div>{formatName(user)}</div>;
const d = <div