react的环境搭建（2018/12/5）

一、react的环境搭建
操作步骤：
①新建一个文件夹，在目标路径下打开CMD   安装react  cnpm i  react react-dom  //react-dom用于操作jsx的语法，操作虚拟dom
②安装babel（用于将es6格式转为es5  识别script中的标签）   cnpm i    babel-standalone   --save 
③新建一个js文件夹
④在node_modules中的react/umd/react.development.js------->复制文件到js文件夹中
                                      react-dom/umd/react-dom.development.js------->复制到js文件夹中
                                      babel-standalone/babel.js------>复制到js文件夹中   
⑤将以上三个文件引入新建的hello.html文件中  顺序不能错  
⑥在script中 写<script  type="type/babel">
hello.html
<!DOCTYPE html>
<html>
     <head>
          <meta charset="UTF-8">
          <title></title>
          <script src="js/react.development.js"></script>   //引入js文件 但是顺序一定不能错
          <script  src="js/react-dom.development.js"></script>
          <script src="js/babel.js"></script>
     </head>
     <body>
          <div id="box"></div>
          
          <script type="text/babel">
                    //这种写法是jsx  javascript + xml   语法糖   就是将js和html写在一起
              ReactDOM.render(<h1>helloword</h1>,      //ReactDOM.render是渲染dom元素
              document.getElementById("box"))
          </script>
     </body>
</html>
 
 
二、jsx的基本用法
<!DOCTYPE html>
<html>
     <head>
          <meta charset="UTF-8">
          <title></title>
          <script src="js/react.development.js"></script>
          <script  src="js/react-dom.development.js"></script>
          <script src="js/babel.js"></script>
          
          <style type="text/css">
              .bg{
                   background:blue
              }
          </style>
     </head>
     <body>
          <div id="box"></div>
          
          <script type="text/babel">
              
              var msg = "react"  //字符串
               var a = 123;       //数据型
              var flag=true;     //布尔型
              var obj={          //对象数据类型，但是不能直接显示，需要 obj.a访问其中的值
                   a:1,
                   b:2
              }
              var arr = ["ff","dd","ss"]  //数组
             
              var content=<div>     //将其他变量中的内容以{差值表达式}的方法添加到这个变量中
              在这里面通过变量添加内容
              {msg.toUpperCase()}
              {a}
              {flag?"yes":"no"}
              <p className="bg">{arr[0]}</p>   /*因为class是js中的关键字 所以需要变成className*/
              <span style={{color:'pink'}}>{obj.a}</span>  //style定义属性时候需要用{{}}，外面的{}是差值表达式，里面的{}是对象的表示方法
              </div>
              
              
              ReactDOM.render(content, //content变量中包含了其他的变量中的值
              document.getElementById("box"))
          </script>
     </body>
</html>
 
三、遍历数组   显示列表
用map遍历数组
<body>
          <div id="box"></div>
          <script type="text/babel">
              var arr = ["aa","bb","cc"]
              ReactDOM.render(<div>
                   <ul>
                   {   //差值表达式
                        arr.map((item,index)=>{
                             return <li key={index}  style={{color:index===0?"red":''}}>{item}</li>  /*item和index用{}括起来使他们变成了变量可以进行遍历*/
                        })
                   }
                   </ul>
                   
              </div>,
              document.getElementById("box"))
          </script>
     </body>
 
用forEach循环遍历
var arr=["ff","gg","hh"]
              var showList=(arr)=>{
                   var newarr=[];
                   arr.forEach((item,index)=>{
                        newarr.push(<p  key={index}>{item}</p>) //数组或迭代器中的每一个子项都需要有唯一的key对应的index
                   })
                   return newarr;
              }
              ReactDOM.render(<div>
                   {
                        showList(arr)
                   }
                   
              </div>,
              document.getElementById("box"))
 
 
四、遍历对象 
Object.keys(对象的变量名)    遍历对象的所有键（key），形成一个数组。     //数组中的内容就是键的名称 注意Object大小写
<body>
          <div id="box"></div>
          <script type="text/babel">
              var obj = {
                   "a1":"aaaaaaaaaaaaaa",
                   "b1":"bbbbbbbbbbbbbb",
                   "c1":{
                        "c2":"1111111111111",
                        "c3":"2222222222222"
                   },
                   "d1":"ddddddddddddddddd"
              }
              console.log(Object.keys(obj))   //["a1","b1","c1","d1"]
          ReactDOM.render(<div>
              {
                   Object.keys(obj).map((item)=>{
                        return <div key={item}>  //将item作为index值，因为item也是唯一的    item值为 a1,b1,c1,d1
                                      {item!=="c1"?obj[item]:<ul>   //如果item不等于c1 那么就取obj中的值  obj[item]表示的是这个键对应的值  
                                           {
                                                Object.keys(obj[item]).map((t)=>{  // t代表的是c1中所有的键 c2 c3    Object.keys(obj[item])代表的是["c2","c3"]
                                                     return <li key={t}><img src={obj[item][t]}/></li>  //这里的obj[item]是c1中的键和值    object[item][t]是c2或c3的值
                                                })
                                           }
                                           </ul>
                                      }
                                  </div>
                   })
              }
          </div>,
              
          document.getElementById("box"))
             
          </script>
     </body>
 
 
 
 
posted @ 2019-09-12 10:50  zsrTaki  阅读(266)  评论(0)  编辑  收藏  举报