react学习笔记【1】helloworld jsx 如何显示值 jsx的语法具体代码条件渲染 helloworld

helloworld

<body>
    <div id="app">

    </div>

    <script type="text/babel">
        // ReactDOM  render(react元素,根节点)  
        ReactDOM.render(<h2>helloworld</h2>,document.getElementById('app'))
    </script>
</body>

jsx

   JSX 全称 JavaScript XML 
   是一种扩展的 JavaScript 语言
   它允许 HTML 语言直接写在 JavaScript 语言中不加任何引号
   它允许 HTML 与 JavaScript 的混写

如何显示值

根元素
<div id="app">
   
</div>
    const title ='第一个react程序'
    const user = {
        name:'jack',
        age:18
    }
    此处写法约等于模板插值，整体类似模板字符串
    const element=(
    
               <div>
                    <h2>{title}</h2> 
                    <p>{user.name}</p>
                     <p>{user.age}</p>
               </div>
               
                   )

jsx的语法

          - 必须只能有一个根节点
          - 多标签换行显示时写到一个小括号中 
          - 单标签不能省略结束标签。/>
          - 遇到 HTML 标签 （以 < 开头） 就用 HTML 规则解析
          - 遇到代码块（以 { 开头），就用 JavaScript 规则解析
          - JSX 允许直接在模板中插入一个 JavaScript 表达式
            React.Fragment表示根元素，渲染后不编译成其它元素

具体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>helloworld</title>
    <!-- 按顺序引入 -->
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.js"></script>
    <style>
        .m-style{
            width: 100px;
            height: 100px;
            background: hotpink;
        }
    </style>
</head>
<body>
    <!-- 根元素 -->
    <div id="app">
       
    </div>
    <!-- 使用babel编译 -->
    <script type="text/babel">
        const title ='第一个react程序'
        const user = {
            name:'jack',
            age:18
        }
        const url = './image/1.png'
        // 约等于模版插值
        const style={
            color:'red',
            // 此处需要驼峰命名法
            fontSize:'40px'
        }
        function bindClick(){
            console.log('触发事件');
        }
        const element=(
            // 约等于模板字符串
                        <React.Fragment>
                            {/*操作内容*/}
                            <h2>{title}</h2> 
                            <p>{user.name}</p>
                            <p>{user.age}</p>
                             {/*操作属性*/}
                            <img src={url} />
                             {/*操作行内样式*/}
                            <h2 style={style}>我是操作行内样式示例</h2>
                            <p style={{color:'pink',fontSize:'20px'}}>我是简写形式</p>
                            {/*操作类样式，操作类样式需要加className*/}
                            <p className="m-style">操作类样式</p>
                            {/*操作事件*/}
                            {/*<button type="button" onClick={bindClick()}>点我</button>此处加了括号函数直接调用*/}
                            <button type="button" onClick={bindClick}>点我</button>
                       </React.Fragment>
                       )
        ReactDOM.render(element,document.getElementById('app'))
    </script>
</body>
</html>

条件渲染

<body>
<!-- 根元素 -->
<div id="app">
   
</div>
<!-- 使用babel编译 -->
<script type="text/babel">
    let age=19
    function getAge(){
        if(age>=18){
            return '成年人'
        }else if(age<18){
            return '未成年人'
        }
    }
    const element=(
                    <div>
                       {age>18?'成年人':'未成年人'} 
                       {age>18?<h2>成年人</h2>:<h2>未成年人</h2>}
                        //逻辑与写法
                        {age>18&&<p>逻辑与条件处理</p>}
                        {getAge()}
                    </div>
                   )
               
    ReactDOM.render(element,document.getElementById('app'))
</script>
</body>