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.总结