react的基本使用1.什么是react react用于构建用户界面的 JavaScript 库 2.为什么要使用rea

1.什么是react

react用于构建用户界面的 JavaScript 库在这里插入图片描述

2.为什么要使用react

在这里插入图片描述

3.react的特点

在这里插入图片描述

4.react高效的原因

使用虚拟DOM，不总是直接操作页面真实DOM。
DOM Diffing 算法，最小化页面重绘。

5.react的基本使用

1.需要引入的文件

babel.min.js

ES6 => ES5
jsx => js

react.development.js

react核心库

react-dom.development.js

react扩展库
扩展react操作dom功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!-- 引入react核心库 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!-- 引入react-dom用于支持react操作DOM -->
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 引入babel用于ES6转ES5，jsx 转 js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<body>
    <!--准备一个容器-->
    <div id="test"></div>

</body>
<!-- 注意这里一定要添加babel，表示这里写的是jsx，用babel翻译为js-->
<script type="text/babel">
    // 1.创建虚拟DOM
    // 这里不要用引号，因为他不是字符串
    const VDOM = <h1>Hello,React</h1>
    // 2.渲染虚拟DOM到页面
    //             虚拟DOM，容器
    ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</html>

2.为什么要使用jsx

为了解决js中写虚拟DOM麻烦的问题

3.虚拟DOM和真实DOM

虚拟DOM本质是js中的一个Object类型的对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!-- 引入react核心库 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!-- 引入react-dom用于支持react操作DOM -->
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 引入babel用于ES6转ES5，jsx 转 js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<body>
    <!--准备一个容器-->
    <div id="test"></div>
    <div id="real"></div>
</body>
<!-- 注意这里一定要添加babel，表示这里写的是jsx，用babel翻译为js-->
<script type="text/babel">
    // 1.创建虚拟DOM
    // 这里不要用引号，因为他不是字符串
    const VDOM = (<h1>Hello,React</h1>)
    // 2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM,document.getElementById('test'))
    const TDOM = document.getElementById('real')
    console.log('真实DOM',TDOM)
    console.log('虚拟DOM',VDOM)
    debugger
    /*
        关于虚拟DOM:
            1.本质是Object类型的对象
            2.虚拟DOM比较轻，真实DOM比较重，因为虚拟DOM是React内部在用，无需真实DOM上那么多属性
            3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上
    */
</script>
</html>

4.jsx语法

jsx语法规则:

1.定义虚拟DOM时，不要写引号
2.标签中混入JS表达式时要用{}
3.样式的类名指定不要用class,要用className
4.内联样式要用style={{key:value,key:value}}的形式去写，如果变量时多个单词使用驼峰命名法例如fontSize
5.虚拟DOM中只能有一个根标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        .title{
            background-color: antiquewhite;
        }
    </style>
</head>
<!-- 引入react核心库 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!-- 引入react-dom用于支持react操作DOM -->
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 引入babel用于ES6转ES5，jsx 转 js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<body>
    <!--准备一个容器-->
    <div id="test"></div>
</body>
<!-- 注意这里一定要添加babel，表示这里写的是jsx，用babel翻译为js-->
<script type="text/babel">
    const myId = 'atu'
    const myData = 'hello,atus'
    // 1.创建虚拟DOM
    const VDOM = (
        <div>
            <h2 className="title" id="{myId}">
                <span style={{color:'red',fontSize:'30px'}}>{myData}</span>    
            </h2>
            <input/>
        </div>
    )
    // 2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM,document.getElementById('test'))

    /*
        jsx语法规则:
            1.定义虚拟DOM时，不要写引号
            2.标签中混入JS表达式时要用{}
            3.样式的类名指定不要用class,要用className
            4.内联样式要用style={{key:value,key:value}}的形式去写，如果变量时多个单词使用驼峰命名法例如fontSize
            5.虚拟DOM中只能有一个根标签
    */
</script>
</html>

列表数据的渲染

只能使用数组类型的，不能用对象的
每个标签一定要有一个唯一key

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        .title{
            background-color: antiquewhite;
        }
    </style>
</head>
<!-- 引入react核心库 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!-- 引入react-dom用于支持react操作DOM -->
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 引入babel用于ES6转ES5，jsx 转 js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<body>
    <!--准备一个容器-->
    <div id="test"></div>
</body>
<!-- 注意这里一定要添加babel，表示这里写的是jsx，用babel翻译为js-->
<script type="text/babel">
    // 模拟列表数据
    const data  = ['vue','react','angular']

    // 1.创建虚拟DOM
    const VDOM = (
        <div>
            <h1>
                前端框架    
            </h1>
            <ul>
                {
                    data.map((item,index)=>{
                        return <li key={index}>{item}</li>
                    })
                }
            </ul>
        </div>
    )
    // 2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</html>

5.模块与组件

模块
- 向外提供特定功能的js程序，一般为一个js文件
- 随着业务逻辑增加，代码越来越杂，因而要拆分为模块
- 作用就是复用js,简化js的编写，提高js运行效率
组件
- 用来实现局部功能效果的代码和资源的集合，html,css，js,image等
- 界面的功能更复杂
- 可以更高复用
模块化
- 当应用的js都以模块来编写，应用就是模块化的应用
组件化
- 当应用是以多组件的方式实现，这个应用就是一个组件化的应用

6.开发工具的安装

在chrome安装react开发者调试工具在这里插入图片描述