• 关于React学习的相关案例笔记


    react老版本的一个基础写法:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
        </head>
        <body>
            <div id="app">
                
            </div>
            
        </body>
        <script src="./js/react.js"></script>
        <script src="./js/react-dom.js"></script>
        <script type="text/javascript">
            var mycomponent = React.createClass({
                render:function(){
                    return React.createElement('h1',null,'你好前端3班');
                }
            });
            
            ReactDOM.render(
                React.createElement(mycomponent,null),
                document.getElementById('app')
            );
            
        </script>
    </html>

    新版的写法:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
        </head>
        <body>
            <div id="app">
                
            </div>
            
        </body>
        <script src="./js/react.js"></script>
        <script src="./js/react-dom.js"></script>
        <script src="./js/babel.min.js"></script>
        <script type="text/babel">
            //React中,可以直接渲染HTML标签,也可以渲染成组件(classes)
            //在javascript中包含XML(具体指的是html),成为JSX语言
            var mycomponent = <h1>你好,前端3班</h1>;
            
            ReactDOM.render(
                mycomponent,
                document.getElementById('app')
            );
            
        </script>
    </html>
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
        </head>
        <body>
            <div id="app">
                
            </div>
            
        </body>
        <script src="./js/react.js"></script>
        <script src="./js/react-dom.js"></script>
        <script src="./js/babel.min.js"></script>
        <script type="text/babel">
            //React中,本例子是直接渲染HTML标签
            var mycomponent = 
            <div>
                <h1>你好,前端3班</h1>
                <h2>今天学习JSX</h2>
            </div>
            ;
            
            ReactDOM.render(
                mycomponent,
                document.getElementById('app')
            );
            
        </script>
    </html>
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
        </head>
        <body>
            <div id="app">
                
            </div>
            
        </body>
        <script src="./js/react.js"></script>
        <script src="./js/react-dom.js"></script>
        <script src="./js/babel.min.js"></script>
        <script type="text/babel">
            //React中,本例子是直接渲染成组件(classes)
            //注意:注册本地自定义组件时,第一个字母,大写
            var Mycomponent = React.createClass({
                
                render:function(){
                    return <div>//返回的东西必须与return在同一行
                        <h1>hello wrold</h1>,
                        <h2>666</h2>
                    </div>
                }
                
            }) ;
            
            ReactDOM.render(
                <Mycomponent/>,
                document.getElementById('app') 
            );
            
        </script>
    </html>

    这个是把js写在js文件再引入HTML的写法:

    //Mycomponent.js文件
    var Mycomponent = React.createClass({
        render: function() {
            return <div>
                        <h1>你好,前端3班</h1>
                        <h2>今天学习JSX</h2>
                    </div>;
        }
    });
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
        </head>
        <body>
            <div id="app">
                
            </div>
            
        </body>
        <script src="./js/react.js"></script>
        <script src="./js/react-dom.js"></script>
        <script src="./js/babel.min.js"></script>
        <!--import 一个Mycomponent组件,引入时script标签内的type属性需改为(text/babel)-->
        <script type="text/babel" src="./js/Mycomponent.js"></script>
        <script type="text/babel">
            //React中,本例子是直接渲染成组件(classes)
            //注意:注册本地自定义组件时,第一个字母,大写
            ReactDOM.render(<Mycomponent/>,document.getElementById('app'));
        </script>
    </html>

    一个判断案例写法:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
        </head>
        <body>
            <div id="app">
                
            </div>
            
        </body>
        <script src="./js/react.js"></script>
        <script src="./js/react-dom.js"></script>
        <script src="./js/babel.min.js"></script>
        <script type="text/babel">
            //React中,本例子是直接渲染成组件(classes)
            //注意:注册本地自定义组件时,第一个字母,大写
            //元素的自定义属性,必须使用data-开头
            //JSX是javascript包含html,假如html中想包含javascript,
            //那么可以使用{}来操作
            //可以使用三元表达式
            var i = 10;
            var Mycomponent = React.createClass({
                render:function(){
                    return <div>
                        <h1 data-ttt="123">你好,前端3班</h1>
                        <h2>今天学习JSX</h2>
                        <h1>1+1={1+1}</h1>
                        {i==100? 
                            <h2>成功</h2>
                        :
                            <h2>失败</h2>
                        }
                    </div>;
                }
            });
            
            ReactDOM.render(
                <Mycomponent/>,
                document.getElementById('app')
            );
            
        </script>
    </html>

    输入数组的写法:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
        </head>
        <body>
            <div id="app">
                
            </div>
            
        </body>
        <script src="./js/react.js"></script>
        <script src="./js/react-dom.js"></script>
        <script src="./js/babel.min.js"></script>
        <script type="text/babel">
            //定义数组
            var myarr = [
                <h1>第1个元素</h1>,
                <h2>第2个元素</h2>,
                <h2>第3个元素</h2>
            ];
            var Mycomponent = React.createClass({
                render:function(){
                    return <div>
                        {myarr}
                    </div>;
                }
            });
            
            ReactDOM.render(
                <Mycomponent/>,
                document.getElementById('app')
            );
            
        </script>
    </html>

    css样式的写法引用案例:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
        </head>
        <style>
            .fontcolortest{
                color: red;
            }
            
        </style>
        <body>
            <div id="app">
            </div>
        </body>
        <script src="./js/react.js"></script>
        <script src="./js/react-dom.js"></script>
        <script src="./js/babel.min.js"></script>
        <script type="text/babel">
            var Mycomponent = React.createClass({
                render:function(){
                    return <div>
                        <h1 className="fontcolortest">你好,前端3班</h1> 
                        //class标签的在react中药写为className,其他的就按原来的一样,如;id 还是写ID
                    </div>;
                }
            });
            
            ReactDOM.render(
                <Mycomponent/>,
                document.getElementById('app')
            );
            
        </script>
    </html>

    一天一点。。。。comeon!

  • 相关阅读:
    array_unique() 去重复
    datagrid导出数据
    $this->success传递数据
    二分+暴力状压+桶——cf1288D
    乱搞+虚假莫队?+树状数组——cf1288E
    字符串+置换+莫队离线处理——cf1290B
    扩展域并查集+图论——cf1290C 好题
    换根dp+暴力+预处理+记忆化搜索——cf1292C好题!
    线段树,思维——cf1295E
    暴力,贪心——cf1292B
  • 原文地址:https://www.cnblogs.com/aa1314/p/8143495.html
Copyright © 2020-2023  润新知