react jsx

jsx的由来

jsx时一种用于描述ui的javascript扩展语法，react使用这种语法描述组件的UI。

长期以来，UI和数据分离一直是前端领域的一个重要关注点。为了解决这个问题，前端领域发明模版，数据逻辑放在js，然后通过模版引擎，根据数据和模版文件渲染出最终的html文件或者代码片单。

react致力于组件的概念，页面进行拆分并实现组件租用。react认为一个组件应该是具备UI描述和UI数据的完整体，不应该将它们分开处理，于是发明了jsx，作为UI描述和UI数据之间的桥梁。

jsx基本语法

dom标签+react组件类型标签+js，dom标签首字母必须小写，react组件类型标签必须大写。

react就是通过首字母的大小写判断渲染师一个dom类型的标签还是react组件类型的标签。

jsx使用的js表达式需要用{}包起来，该表达式的使用场景为：给标签属性赋值和通过表达式定义子组件。jsx只能使用js表达式，而不能是多行的js语句。

const element = <h1>hello, world</h1>; // dom
const element = <HelloWorld />; // react dom
const element = <MyComponent foo={ 1 + 2 } /> //js
const todos = ['item1', 'item2', 'item3']

const element = (
  <div>
    <HelloWorld />
  </div>;
) // dom + react dom

const element = (
  <ul>
    {todos.map(message => <Item key={message} message={message} />)}
  </ul>
)