JSX

What is JSX?

JSX stands for JavaScript XML.

JSX allows us to write HTML in React.

JSX makes it easier to write and add HTML in React.

JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement()and/or appendChild() methods.

---

JSX produces React elements.

ReactDOM.render(jsx,where to render)

Here are two examples. The first uses JSX and the second does not:

As you can see in the first example, JSX allows us to write HTML directly within the JavaScript code.

JSX is an extension of the JavaScript language based on ES6, and is translated into regular JavaScript at runtime.

---

Each JSX element is just syntactic sugar for calling React.createElement(). You will not typically invoke the following methods directly if you are using JSX.

createElement()

createFactory()

jsx原理：表达式会在render被调用的时候执行并返回一个element

jsx语法转换成一个React.createElement的方法调用，createElement生成element。element在React里是组成虚拟Dom树的节点。它有三个参数:

type -> 标签

attributes -> 标签属性，若无则为null

children -> 标签的子节点

element的结构(不一定是Object类型)

---

Element如何生成真实节点

初始化element规则如下: 

how JSX is converted to JavaScript:

https://babeljs.io/repl/#?browsers=defaults%2C%20not%20ie%2011%2C%20not%20ie_mob%2011&build=&builtIns=false&corejs=3.6&spec=false&loose=false&code_lz=GYVwdgxgLglg9mABACwKYBt1wBQEpEDeAUIogE6pQhlIA8AJjAG4B8AEhlogO5xnr0AhLQD0jVgG4iAXyJA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=react&prettier=false&targets=&version=7.15.5&externalPlugins=&assumptions=%7B%7D

---

camelCase:

className

htmlFor