react--学习笔记1（react简介和简单的hello world）

爱被打了一巴掌 2023-03-01 14:55 18阅读 0赞

# 一、react简介： #

*  用于构建用户界面的JavaScript库，（JavaScript是一个函数库，react只关注view）。
 *  react是由facebook开源的。

### react特点：  ###

1.  Declarative(声明式编码) ;    eg:命令式：model open（）；声明式：< Model open=\{true\}>不用操作dom，只操作数据。
2.  Component-Based(组件化编码)；
3.  Learn Once, Write Anywhere(支持客户端与服务器渲染)；
4.  高效----因为操作的是虚拟的dom，DOM Diff算法，最小化页面重绘。
5.  单向数据流

### react的基本使用：  ###

** 首先了解：**

1.  react.js: React的核心库
2.  react-dom.js: 提供操作DOM的react扩展库
3.  babel.min.js: 解析JSX语法代码转为纯JS语法代码的库

** 简单代码测试：**

在HBuilder中：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>react</title>
    		<script type="text/javascript" src="js/react.development.js"></script>
    		<script type="text/javascript" src="js/react-dom.development.js"></script>
    		<script type="text/javascript" src="js/babel.min.js"></script>
    	</head>
    	<body>
            <div id="test"></div>
            <script type="text/babel">
                //1.创建虚拟DOM元素对象
    			var vDom = <h1>hello react!</h1>
                //2.将虚拟DOM渲染到页面真实DOM容器中
    			ReactDOM.render(vDom, document.getElementById('test'))
    		</script>
         </body>
    </html>

![20200727154400465.png][]

在vscode中编写：

编写子组件：test1.js

import React from 'react'
    
    export default class Testone extends React.Component{
        render(){
            return(
                <div>
                    <h1>hello world</h1>
                </div>
            )
        }
    }

引入到父组件中App.js

//1.先引用文件位置
    import Testone from './demo/test1'
    //2.在引用组件
    < Testone />

![20200727155554585.png][]

这里下载React开发者工具调试，方便以后使用。

我下载的是谷歌浏览器的扩展文件，

![2020072716002963.png][]

[20200727154400465.png]: /images/20230208/23f68528c0cc4ac49a29f6cc5d6046fd.png
[20200727155554585.png]: https://img-blog.csdnimg.cn/20200727155554585.png
[2020072716002963.png]: https://img-blog.csdnimg.cn/2020072716002963.png