React 插值表达式

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!--    相当于react.js  -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!--    相当于react-dom.js  -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.js"></script>
    <!--    相当于JSX  -->

<div id="root"></div>
    <script>
        //各种数据的插值状态 let data = "天气还不错"; //原样输出 //let data = 1; 原样输出 //let data = false;\ 不输出 //let data = undefined; 不输出 //let data = null 不输出 let data = ["内容1","内容2","内容三"]; //去掉，原样输出
    </script>
    <script>
        //对象不能直接添加
        // let data = {
    
    
        //     name:"白鼬鼬",
        //     age:18
        // };
        //需要这样来写
        // {data.name}{data.age}
    </script>
    <script type="text/babel">
        let data = {
    
     name:"白鼬鼬", age:18 }; ReactDOM.render(
        < header>
            < h1> hello {
    
    data.name}{
    
    data.age}
                < /h1>
                    < p> l里用Jsx来渲染
                        < /p>
                            < / header> , document.querySelector("#root"), () => {
    
     console.log("渲染成功") } )
    </script>

React 条件输出

 <!-- //条件输出 -->
    <!-- ? :  类似  if...else
    ||   类似   if(!)   取反
    &&   类似    if() -->
    <script type="text/babel">

        let data = {
    
     name:"白鼬鼬", age:18 }; ReactDOM.render(
        < header>
            < h1> hello {
    
    false ? "成立" : "不成立"}
                < /h1>
                    < p> {
    
    true||l里用Jsx来渲染}
                        < /p>
                            <div>{
    
    true&&"正确"}</div>
                            < / header> , document.querySelector("#root"), () => {
    
    console.log("渲染成功")} )
    </script>

React 列表循环

<!-- v-for -->
    <!-- function taData(){
    
     let arr = []; }   存放内容 -->
    <script type="text/babel">

        let data = ["内容1","内容2","内容三","内容似"]; function taData(){
    
     let arr = []; data.forEach(item=>{
    
     arr.push(
        <li>{
    
    item}</li>) }); return arr; } ReactDOM.render(
        < header>
            {
    
    taData() }
            < / header> , document.querySelector("#root"), () => {
    
    console.log("渲染成功")} )
    </script>