React教程(一)

React:

官网:进入官网后,最先引入眼帘的是这样一段描述:“用于构建用户界面的 JavaScript 库”,非常的霸气侧漏,这也是我决定学习它的原因。

特点: 声明式(交互容易)、组件化(大型项目)、一次学习,随处编写(支持手机、浏览器等)

 

使用CDN的方式

  • demo1: 最简单的Hello World
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>React Dome</title>
        <!-- CDN方式引入 -->
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <!-- 也可以i使用npm add react react-dom --save 安装一个node-moudle包都有js,可以引用 -->
    </head>
    <body>
        <div id="app">
     
        </div>
        <script type="text/babel">
            // 生成一个DOM,如果生成的dom过多时会使用虚拟dom来插入到真实的DOM中
            var hello = React.createElement('h1',{
                className:'red'// 添加属性
                name:'jack'
            },"Hello React!")
            ReactDOM.render(hello,document.getElementById('app'))
        </script>
    </body>
    </html>

      

  • demo2: jsx,一种js和html+xml交互的方式
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>React Dome</title>
        <!-- CDN方式引入 -->
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <!-- 也可以i使用npm add react react-dom --save 安装一个node-moudle包都有js,可以引用 -->
        <!-- 引入babel可以进行jsx的语法解析 -->
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
        <style>
            .blue{
                color:blue;
            }
        </style>
    </head>
    <body>
        <div id="app"></div>
        <div id="app1"></div>
        <script type="text/babel">
            // js中插入html代码,其实框架中帮我们创建
            ReactDOM.render(
                // jsx是完成我们可以在js中完成html代码的编写,同时可以html中可以嵌套js代码,属于语法糖
                <h1 className="blue" name="wang">Hello Jsx</h1>
                //  注意这里不能是class因为它是js的关键字
                ,document.getElementById('app'))
     
            // 使用js中嵌套html
            var name = "wangl"
            var ele = <h1>Hello : {name}</h1>  // html中插入js变量
            ReactDOM.render(
                ele,
                document.getElementById('app1')
            )
        </script>
    </body>
    </html>

      

  • demo3: 生命周期
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>React Dome</title>
        <!-- CDN方式引入 -->
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <!-- 也可以i使用npm add react react-dom --save 安装一个node-moudle包都有js,可以引用 -->
        <!-- 引入babel可以进行jsx的语法解析 -->
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
        <style>
            .blue{
                color:blue;
            }
        </style>
    </head>
    <body>
        <div id="app3"></div>
        <script type="text/babel">
            // 生命周期函数演示
            // 标准组件,带生命周期(带状态),查创建一个class对象继承Component
            class HelloJack extends React.Component {
                constructor (props) {  // 构造函数
                    console.log("初始化阶段")
                    // 初始化props,组件上的属性
                    super(props);
                    // 初始化状态
                    this.state = {
                        name:"Xing",
                        age:30
                    }
                }
                componentWillMount(){
                    // 常用于发送ajax请求
                    console.log("组件加载之前")
                }
                componmentDidMount(){
                    console.log("组件加载后")
                }
                updateUser = ()=>{  // => 函数
                    this.setState({  // this是指向上下文的button,自动触发更新,并render
                        name:"666",
                        age:30
                    })
                }
                shouldComponentUpdate(){   // 返回true更新
                    console.log("数据是否更新?")
                    // 逻辑判断...
                    return true; // 默认为true,不用实现
                }
                componentWillUpdate(){
                    console.log("数据将要更新")
                }
                componentDidUpdate(){
                    console.log("数据已经更新")
                }
                render(){
                    console.log('组件加载中或者数据更新')
                    return <div>
                        <h1>Hello: {this.props.name}, 默认值:{this.state.name}</h1> 
                        <p>年纪: {this.props.age}</p>
                        <button onClick={this.updateUser}>更新数据</button>
                    </div>   // 带参数的传递使用this
                }
            }
            ReactDOM.render(
                <HelloJack name="xxx" age="25"/>,
                document.getElementById('app3')
            )
        </script>
    </body>
    </html>

      

  • demo4: 组件传参
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>React Dome</title>
        <!-- CDN方式引入 -->
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <!-- 也可以i使用npm add react react-dom --save 安装一个node-moudle包都有js,可以引用 -->
        <!-- 引入babel可以进行jsx的语法解析 -->
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
        <style>
            .blue{
                color:blue;
            }
        </style>
    </head>
    <body>
        <div id="app"></div>
        <div id="app1"></div>
        <div id="app3"></div>
        <script type="text/babel">
            // 组件化开发:函数组件(无状态)、标准组件(有状态,可以使用this代表class的实例)
            // 创建函数返回一个jsx,函数组件
            function Hello() {
                return <h1> Hello, Jack</h1>
            }
            ReactDOM.render(
                <Hello/>,    // 这里直接调用函数名加<>,就成为了组件了
                document.getElementById('app')
            )
     
            function Hello_plus(props){
                return <div>
                    <h1>Hello: {props.name}</h1>
                    <p>年纪: {props.age}</p>
                </div>
            }
            ReactDOM.render(
                <Hello_plus name="Li" age="23"/>,
                document.getElementById('app1')
            )
     
            // 标准组件,带生命周期(带状态),查创建一个class对象继承Component
            class HelloJack extends React.Component {
     
                // render() {  // 渲染
                //     return <h1> Hello JackLove </h1>
                // }
     
                render(){
                    return <div>
                        <h1>Hello: {this.props.name}</h1> 
                        <p>年纪: {this.props.age}</p>
                    </div>   // 带参数的传递使用this
                }
            }
            ReactDOM.render(
                <HelloJack name="xxx" age="25"/>,
                document.getElementById('app3')
            )
        </script>
    </body>
    </html>

      

  • demo5: render渲染函数
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>React Dome</title>
        <!-- CDN方式引入 -->
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <!-- 也可以i使用npm add react react-dom --save 安装一个node-moudle包都有js,可以引用 -->
        <!-- 引入babel可以进行jsx的语法解析 -->
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
        <style>
            .blue{
                color:blue;
            }
        </style>
    </head>
    <body>
        <div id="app"></div>
        <div id="app1"></div>
        <script type="text/babel">
            // 元素的实时渲染
            function tick() {
                // 使用js中嵌套html,react 是单向数据流
                var time = new Date().toLocaleTimeString();
                var ele = <div> 
                    <h1>Hello : Wang </h1>
                    <h1>{time}</h1>
                </div>                // 当要渲染的标签是多个时必须要又一个父标签,类似与vue中的template下必须要有一div
                ReactDOM.render(
                    ele,
                    document.getElementById('app1')
                )
            }
            setInterval(tick,1000)
        </script>
    </body>
    </html>

        

  相对而言,React的学习成本可以相对低,网上有很多教程,如果可以我们可以通过网上更好的学习,这里推荐去官网学习,已经很详细了(基础),对于更加深入的学习,我们会使用react来创建一个比较复杂的应用。

 

posted @   独角兕大王  阅读(304)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示