react基础知识（一）

全文链接！！！！！！

jsx

概念：JSX是 JavaScript XML（HTML）的缩写，表示在 JS 代码中书写 HTML 结构

作用：在React中创建HTML结构（页面UI结构）

优势：

1. 采用类似于HTML的语法，降低学习成本，会HTML就会JSX
2. 充分利用JS自身的可编程能力创建HTML结构

1、jsx表达式

const name = 'wfz'
<h1>你好，我叫{name}</h1>

2、jsx列表渲染

// 列表渲染
const songs = [
  { id: 1, name: '演员' },
  { id: 2, name: '消愁' },
]

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

export default App

3、条件渲染，可以使用 三元运算符 或 逻辑与(&&)运算符

const flag =