react基本使用-小案例

1.首先需要引入三个js文件，如下

以下是本地下载的，链接: https://pan.baidu.com/s/1VzSnCr-vkXyYEDn0iSQJJQ 提取码: hwqs

<script src="../js/react.development.js"></script> #react
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>

在线引入三个js文件如下

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

2.接下来在html里的body先写个div盒子

<div id="test"></div>

3.常见javascript格式必须如下

  <script type="text/babel"></script>

为什么type是text/babel呢，因为react是只支持jsx的jsx必须得以babel形式引入，因为可以解析成浏览器所认识的形式

4.定义好变量

 const myId="hello"
 const myData="Hello,React"
 const age=20
 var title="title"
 var r1="r1"
 var arr=["vue","recat","angular"]
 var num=0

5.定义方法

function aa(a){
    if (a>20){
            return "aa"
        }else{
            return "bb"
        }
    }

6.定义虚拟dom

const vdom=(
            <div >
                <h1 className={ age>21?title:r1  } id={myId}>
                    <span>{myData}</span>
                </h1>    
                <h3>
                    <ul>
                        {arr.map((item,index)=>{
                            return <li key={num++}>{item}{index}</li>
                        })}
                    </ul>
                </h3>
                <h1>
                   { aa(age)}
                </h1>
                
            </div>
        )
        

7.最后把数据渲染到页面

ReactDOM.render(vdom,document.getElementById("test"))