React-1.实现HelloWorld

初始化

npm init 

简单配置一下package.json;
安装依赖

npm install react react-dom babel-standalone -S
  • react 核心库
  • react-dom 提供与DOM相关的功能
  • babel-standalone 将JSX语法转为JS语法

编写一个helloworld.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HelloWorld</title>
    <script src="../node_modules/react/umd/react.development.js"></script>
    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="../node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
    <div id="helloworld"></div>
    <script type="text/babel">//注意type="text/babel,这样可以识别并编译JSX语法
    //用于将模板转为html语言,并插入指定DOM节点
         ReactDOM.render(
            <ul className="parent">//不能用class,只能用className
                <li >111</li>    
                <li>222</li>    
                <li>333</li>    
            </ul>,    //这里有个逗号
            document.getElementById('helloworld')
        ); 
        //方法二
        /* var child1 = React.createElement("li",{id:'a'},'111'); 
         // null 这个位置可以设置该元素的类名 、id名;是null的话就只是一个普通标签
        var child2 = React.createElement("li",null,'222');
        var par = React.createElement("ul",{className:'parents'},child1,child2);
        ReactDOM.render(
            par,
            document.getElementById('helloworld')
            ) */
    </script>
</body>
</html>

  1. 设置 <script type="text/babel">,用来支持JSX语法
  2. 只能有一个根目录,上述代码不会同时出现两个ul模块,只能显示一个。
var sty = {
          fontSize:"20px",
          color:"red"
      }
      var flag = false;
          ReactDOM.render(
            <ul className="parent">
                <li style={sty}>{flag===true?'111':'123'}</li>    
                <li>222</li>    
                <li>333</li>    
            </ul>,
            document.getElementById('helloworld')
        );  

  1. react不支持if ···else·· 只支持三目运算符

猜你喜欢

转载自blog.csdn.net/weixin_43444623/article/details/84844513