JSX简单入门

JSX介绍

JSX就是JavaScript XML的缩写，JSX看起来像一种xml格式，其本质是一种JavaScript语言，只不过将JavaScript脚本写为XML样式，

JSX是react框架内置的语法

JSX语法

基础语法

<div id="happy"></div>
    <script type="text/babel">
        var reactDiv=document.getElementById("happy");
        const reactSpan=(
            // JSX语法
            <span>
            <h3>德云it</h3>
            <p>这是第一个react应用</p>
            </span>
        )
        // 完成渲染
        ReactDOM.render(reactSpan,reactDiv)
    </script>

JSX的算数表达式

<div id="happy"></div>
    <script type="text/babel" >
        var reactDiv=document.getElementById("happy");
        const reactSpan=(
            // JSX语法
            <span>
            <h3>jsx语法</h3>
            <p>{5*9}</p>
            </span>
        )
        // 完成渲染
        ReactDOM.render(reactSpan,reactDiv)
    </script>

JSX的条件表达式

<div id="happy"></div>
    <script type="text/babel" >
        var reactDiv=document.getElementById("happy");
        const reactSpan=(
            // JSX语法
            <span>
            <h3>jsx语法</h3>
            <p>测试1{1==1?'true':'false'}</p>
            <p>测试2{1!=1?'true':'false'}</p>
            </span>
        )
        // 完成渲染
        ReactDOM.render(reactSpan,reactDiv)
    </script>

JSX嵌入表达式

<div id="happy"></div>
    <script type="text/babel" >
        var reactDiv=document.getElementById("happy");
        const name='老詹'
        const reactSpan=(
            // JSX语法
            <span>
            <h3>jsx语法</h3>
           <p>姓名：{name}</p>
            </span>
        )
        // 完成渲染
        ReactDOM.render(reactSpan,reactDiv)
    </script>

JSX对象表达式

<div id="happy"></div>
    <script type="text/babel" >
        var reactDiv=document.getElementById("happy");
        const userinfo={
            name:'小张',
            gender:'男',
            age:24
        }
        const reactSpan=(
            // JSX语法
            <span>
            <h3>jsx语法</h3>
           <p>姓名：{userinfo.name}</p>
           <p>性别：{userinfo.gender}</p>
           <p>年龄：{userinfo.age}</p>
            </span>
        )
        // 完成渲染
        ReactDOM.render(reactSpan,reactDiv)
    </script>

JSX函数表达式

<div id="happy"></div>
    <script type="text/babel" >
        var reactDiv=document.getElementById("happy");
        const userinfo={
            name:'小张',
            gender:'男',
            age:24
        }
        function showuser(user){
            return '姓名:'+user.name+'---年龄:'+user.age
        }
        const reactSpan=(
            // JSX语法
            <span>
            <h3>jsx语法</h3>
           <p>{showuser(userinfo)}</p>
            </span>
        )
        // 完成渲染
        ReactDOM.render(reactSpan,reactDiv)
    </script>

JSX增强型函数表达式

<div id="happy"></div>
    <script type="text/babel" >
        var reactDiv=document.getElementById("happy");
        const userinfo={
            name:'小张',
            gender:'男',
            age:24
        }
        function showuser(user){
            return '姓名:'+user.name+'---年龄:'+user.age
        }
        function choose(user)
        {
            if(user){
                return showuser(user)
            }
            else
            {
                return "用户信息为空"
            }
        }
        const reactSpan=(
            // JSX语法
            <span>
            <h3>jsx语法</h3>
            <p>{choose(userinfo)}</p>
            <p>{choose()}</p>
            </span>
        )
        // 完成渲染
        ReactDOM.render(reactSpan,reactDiv)
    </script>