入门学习react的demo~

最新推荐文章于 2021-05-26 15:48:54 发布

Mar.三月

最新推荐文章于 2021-05-26 15:48:54 发布

阅读量227

点赞数

分类专栏：前端基础知识

本文链接：https://blog.csdn.net/strivenoend/article/details/90479490

版权

前端基础知识专栏收录该内容

8 篇文章 0 订阅

订阅专栏

声明，保存为.html文件

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <!--react的核心库react.js-->
    <script src="../build/react.js"></script>
    <!--提供dom相关的功能-->
    <script src="../build/react-dom.development.js"></script>
    <script src="../build/react.development.js"></script>
</head>

<body>
    <div id="11"></div>
    <!--使用jsx的地方，需要给script加上type属性为text/babel-->
    <script type="text/babel">
        //render渲染
        //使用react方法渲染dom
        //jsx语法就是将html不加任何引号直接写在脚本中，即jsx=html+js混写
        ReactDOM.render(
            <h1>hi</h1>,
            document.getElementById('11')
            );
        </script>
    <!--jsx语法规则：html用html解析，代码块嵌入html用{}，用js解析-->
    <script type="text/babel">
    var names=['dhy','pxy'];
    ReactDOM.render(
    <div>
        {
        names.map(function(name){
        return <div>{name}</div>
        })
        }
    </div>,
    document.getElementById('11')
    );
</script>
<!--render是用来渲染的，所有的页面想展示的东西都在这里表示，并渲染，render相当于一个模板，里面是jsx语法。。
    render中实现的就是告诉他什么数据渲染到ui的哪个地方-->
    <script type="text/babel">
    var array=[
    <h1>hi</h1>,
    <h2>h2</h2>
    ];
    ReactDOM.render(
        <div>{array}</div>,
        document.getElementById('11');
    )
</script>
<!--react组件，对组件的理解，就是一个自己写的代码实现html的一个小功能，把比如一个日历，组件可以复用，写完可多处复用
    react有一个组件类，React.Componetn,继承这个类就可以创建新的组件类，每个组件类都有一份render方法用于渲染数据-->
    <script type="text/babel">
    //创建自定义组件类
    class MyComponent extends React.Component{
        //类的函数
        render(){
            //this.props.name可以获得组件的属性
            return <h1>{this.props.name}</h1>;
        }
    }
    //在页面中使用自定义组件类，去花页面,定义后的组件类的类名就是新组件的标签
    //定义之后的组件的使用同原生html，组件的属性可以通过this.props.name获取
   ReactDOM.render(
       //组件类的实例
    <MyComponent name="denhguahnyin">,
        document.getElementById('11')
   );
    </script>

</body>

</html>

Mar.三月

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
入门学习react的demo~

声明，保存为.html文件<!DOCTYPE html><html><head> <meta charset="UTF-8" />  <script src="../build/react.js"></script> &lt...
复制链接

扫一扫

专栏目录