【React】react学习笔记1

　 俺为啥要学这玩意：　　

　　家里的杂事好不容易处理完了，开始正式静下心来学习~博主是做后端开发的，js基础不深，之前也是用React写过许多东西了，但是基本上都是用的CV大法，别人的组

件修修改改拿来就用，总感觉自己在使用上还有很大的欠缺，所以从头开始系统的学习。

而博客是我的笔记，也是自我归纳整理的过程，说不定也能不小心帮助到那个有兴趣的同学，何乐而不为呢？所以把我的学习过程分享出来，作为一个系列，也是我搬来

博客园第一篇用心的博文，开始~

　　适合什么人看：

　　有点html和js基础吧，react本质上是FB的一个js库，所以欲练此功，必先.......学js。

　 官网祭天

offical website：https://react.docschina.org/

　 定义：

　　用于构建用户界面的 JavaScript 库。

　　特点：

　　1、声明式：个人理解，类似声明变量的方式声明dom对象。

　　2、组件化：通过组件去搭建页面，可重用性很强大。什么是组件呢？一个独立的input标签，一个写好的登录模块，都可以理解成组件。

我们将一些可重用性的标签组抽取出来，就形成了组件库。

　　3、一次学习，随处编写：这算啥特点？听听就行了，js都是这么用的。

HELLO REACT

下面是我写的一个小demo，如何引入页面进行使用，复制下来直接用。这个是基础中的基础，根据注释看看每部分干什么就行：

如果看不懂也就没必要继续往下看了。

<!DOCTYPE html><html>
<head>
    <meta charset="utf-8" />
    <title>React Tutorial</title>

</head>
<body>
    <!--react基础库-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
    <!--bable转换库，ES语法以及Jax语法的转换-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

    <div id="content"></div>
    <div id="app1"></div>
    <div id="app2"></div>
    <div id="app3"></div>

    <script type="text/babel">
        //开启debug
        debugger
        //创建虚拟DOM元素
        var dom1 = <a href="#">hello react</a>
        var dom2 = <a href="#">HELLO REACT</a>
        //React创建虚拟dom对象的语法，由babel库进行编译。参数1标签名称、参数2属性列表、参数3标签内部的内容。
        var dom3 = React.createElement("h1",{id : 'ids'},"内容");
        //React追加元素
        ReactDOM.render(dom1,document.getElementById("app1"));
        ReactDOM.render(dom2,document.getElementById("app2"));
        ReactDOM.render(dom3,document.getElementById("app3"));
        //赋值引用
        const baidu = "百度一下,你就中招";
        const str1 = 'https://www.baidu.com';
        var dom4 = <a href={str1}>{baidu}</a>
        ReactDOM.render(dom4,document.getElementById("content"));


    </script>


</body>
</html>

　　重点概念

　　1、虚拟DOM：虚拟DOM最终会转换为真实的DOM对象。

上面代码中我添加了debug，大家可以自己看一下React的DOM对象以及网页上原DOM对象的内容，可以看到真实DOM对象很重，而React的虚拟DOM则比较轻量。

　　2、JAX文件：JavaScript XML，js的标记语言形式，最终会由React中的babel库编译成js。

【React】react学习笔记1

猜你喜欢