JSX 入门

X 表示扩展，所以 JSX 就是 JS 扩展版

使用 JSX

方法一：CDN (不推荐)

• 引入 babel.min.js
• 把 <script> 改成 <script type="text/babel">
• babel 会自动进行转译,这种方式不支持 src

方法二: webpack + babel-loader

方法三: create-react-app

使用 JSX 的注意事项

注意 className

• <div className="red">n</div>
• 被转译为
• React.createElement('div', {className:'red'}, 'n')

插入变量

• 标签里面的所有 JS 代码都要用 {} 包起来
• 如果你需要变量 n , 那么就用 {} 把 n 包起来
• 如果你需要对象, 那么就要用 {} 把对象包起来, 例如 {{name: 'ivan'}}

习惯在 return 后面加 ()

if...else...

条件判断

const Component = () => {
    return n%2===0 ? <div>n是偶数</div> : <span>n是奇数</span>
}
// 如果需要外面加个 div, 可以写成
const Component = () => {
    return (
        <div>
            {n%2===0 ? <div>n是偶数</div> : <span>n是奇数</span>}
        </div>
    )
}

• if...else...

const Component = () => {
    let inner
    if (n%2===0) {
        inner = <div>n是偶数</div>
    } else {
        inner = <span>n是奇数</span>
    }
    const content = (
        <div>
            { inner }
        </div>
    )
    return content
}

• loop

const Component = (props) => {
    return props.num.map((n, index)=>{
        return <div>下标{index}值为{n}</div>
    })
}
// 如果需要外面的 div,可以写成
const Component = (props) => {
    return (<div>
        {props.numbers.map((n, index)=>{
            return <div>下标{index}值为{n}</div>
        })}
    </div>)
}

• for循环

const Component = (props) => {
    const array = []
    for(let i=0;i<props.numbers.length;i++) {
        array.push(<div>下标{i}值为{props.numbers[i]}</div>)
    }
    return <div>{array}</div>
}