react jsx语法基础使用

1. JSX必须有一个根节点，如果没有根节点，可以使用<>（幽灵节点）替代
2. 所有标签必须形成闭合，成对闭合或者自闭合都可以
   1.JSX列表渲染

// 来个列表
const lists= [
  { id: 1, name: '周姐林' },
  { id: 2, name: '邓紫棋' },
  { id: 3, name: '魏净重' }
]

function App() {
  return (
    <div className="App">
      <ul>
        {
          lists.map(item => <li>{item.name}</li>)
        }
      </ul>
    </div>
  )
}

export default App

2.JSX条件渲染

const flag = true
function App() {
  return (
    <div className="App">
      {/* 条件渲染字符串 */}
      {flag ? '你好' : '你不好'}
      {/* 条件渲染标签/组件 */}
      {flag ? <span>我是杰伦</span> : null}
    </div>
  )
}
export default App

3.JSX样式处理
行内样式 - style

function App() {
  return (
    <div className="App">
      <div style={{ color: 'red' }}>我是周揭露</div>
    </div>
  )
}
export default App

行内样式 - style - 更优写法

const styleObj = {
    color:red
}
function App() {
  return (
    <div className="App">
      <div style={ styleObj }>我是揭露</div>
    </div>
  )
}
export default App

类名 - className

app.css文件
.title {
  font-size: 30px;
  color: blue;
}

import './app.css'
const showTitle = true
function App() {
  return (
    <div className="App">
      <div className={ showTitle ? 'title' : ''}>this is a div</div>
    </div>
  )
}
export default App