JSX

JSX的基本使用

//1. 导入react
import React from 'react';
import ReactDOM from 'react-dom';

// 使用JSX创建react元素
const title = <h1>Hello JSX <span>这是span</span> </h1>

// 渲染react元素
ReactDOM.render(title, document.getElementById('root'))

1. React元素的属性名使用驼峰命名法。

2.特殊属性名：class->className 、for->htmlFor、tabindex->tabIndex。

3.没有子节点的React元素可以用/>结束。

4.推荐：使用小括号包裹JSX，从而避免JS中的自动插入分号陷阱。

//1. 导入react
import React from 'react';
import ReactDOM from 'react-dom';

// 使用JSX创建react元素
// const title = <h1 className='title'>Hello JSX <span>这是span</span> </h1>
const title = (
  <h1 className='title'>
    Hello JSX 
    <span /> 
  </h1>
)

// 渲染react元素
ReactDOM.render(title, document.getElementById('root'))

 JSX中使用JavaScript表达式

　　嵌入JS表达式

//1. 导入react
import React from 'react';
import ReactDOM from 'react-dom';

/*
  JSX中使用JavaScript表达式
*/
const name = 'Jack'
const age = 19

const title = (
  <h1 className='title'>
    Hello JSX , {name}, 年龄：{age}
  </h1>
)

// 渲染react元素
ReactDOM.render(title, document.getElementById('root'))