React教程(一)

React:

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

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

 

使用CDN的方式

  • demo1: 最简单的Hello World
    <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交互的方式
    <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: 生命周期
    <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: 组件传参
    <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渲染函数
    <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 @ 2020-05-26 09:08  独角兕大王  阅读(304)  评论(0编辑  收藏  举报