React中JSX的使用

1.使用jsx创建react元素

2.使用ReactDOM.render()方法渲染元素

// 创建react元素
const title = <h1>hello jsx <span>这是span</span> </h1>
// 渲染react元素
ReactDOM.render(title,document.getElementById('root'))

 3.推荐使用()小括号包裹jsx代码

 4.嵌入js表达试  使用单大括号{ }

// 嵌入js表达式
const name = 'jack'
const age =19
const nammes = (
 <h1>hello jsx {name},年龄:{ age }</h1>
)
ReactDOM.render(nammes,document.getElementById('root'))

5.jsx的条件渲染

// jsx的条件渲染
const isloadDate = true
// if-else
// const loadDate = () => {
// 	if (isloadDate) {
// 		return <div>loading..</div>
// 	}
// 		return <div>数据加载完成</div>
// }

// 三元表达式
// const loadDate = () => {
// 	return isloadDate ?(<div>loading...</div>):(<div>数据加载完成</div>)
// }

// 逻辑与运算符
const loadDate = () => {
	return isloadDate && (<div>loading...</div>)
}

const tiaojian = (
	<h1>
		条件渲染
		{loadDate()}
	</h1>
)
ReactDOM.render(tiaojian,document.getElementById('root'))

6.jsx的列表渲染   如果要渲染一组数据,应该使用数组的map()方法  尽量避免使用索引作为key

// jsx的列表渲染
const songs = [
	{id:1,name:'123'},
	{id:2,name:'4566'},
	{id:3,name:'789'}
]
const list = (
	<ul>
		{songs.map(item => <li key={item.id}>{ item.name }</li>)}
	</ul>
)
ReactDOM.render(list,document.getElementById('root'))

7.jsx的样式处理 

1.行内样式   

 

2. className(推荐)

引入css文件夹

 8.总结