【React】第一部分 React 基本使用-CSDN博客

本文链接：https://blog.csdn.net/Trees__/article/details/126157259

【React】第一部分 React 基本使用

文章目录

【React】第一部分 React 基本使用
1. React 基本使用
总结

1. React 基本使用

1.1 官方文档

中文文档

英文文档

1.2 JSX

1.2.1 先说一下什么是虚拟DOM?

它本质上是一个Object类型的对象
虚拟DOM较比真实DOM相比更轻,因为虚拟DOM是React内部在用,不需要真实DOM上那么多的属性
虚拟DOM最终最后都会被转化为真实DOM,呈现在页面上

1.2.2 什么是JSX?

react定义的一种类似于XML的JS扩展语法: JS + XML本质是

React.createElement(component,props,...children)方法的语法糖

作用: 用来简化创建虚拟DOM

// 创建一个新的虚拟DOM
const element = <h1>大家好!我是React!</h1>
// 渲染虚拟DOM到页面上
ReactDOM.render(element,document.getElementById('root'))

需要注意:
1. 在定义虚拟DOM,书写的时候不要加''
2. 它不是字符串也不是HTML/XML标签
3. 它最终生成的就是一个js对象

1.2.3 jsx语法规则

在定义虚拟DOM时,不要写引号
标签中混入JS表达式的时候要用{}
样式的类名指定的时候不要使用class,要用className
内联样式,要用style={{key:value}}的形式去写,第一个{}表示里面内容为js表达式,第二个{}表示的是对象
只能有一个根标签
标签必须要闭合
标签首字母

(1) 如果以小写字母开头,则会将标签转化为html同名元素,如果没有找到那么就报错

(2) 如果以大写字母开头,react就会去渲染对应的组件,如果没有定义组件,那么也会报错(后面会说怎么定义组件)

1.2.4 jsx小练习

通过练习来熟悉jsx语法规则

babel.min.js

prop-types.js

react.development.js

react-dom.development.js
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <!-- 准备好一个容器 -->
        <div id="box"></div>

        <!-- 下面需要按顺序进行引入 -->
        <!-- 引入React核心库 -->
        <script src="./react.development.js" type="text/javascript"></script>
        <!-- 引入react-dom, 用来支持react去操作dom -->
        <script src="./react-dom.development.js" type="text/javascript"></script>
        <!-- 引入babel, 用来将jsx转化为js -->
        <script src="./babel.min.js" type="text/javascript"></script>
        <!-- 这里需要注意将type写成 text/babel-->
        <script type="text/babel" >
            // 创建一个数据，用来模拟后端传入的数据
            let data = ['html','css','js','promise','axios','webpack','等等']

            // 创建虚拟dom
            const element = (
                // 只能有一个根节点
               <div>
                    <h1 className="title">前端需要学什么?</h1>
                    <ul>
                        {
                            /*
                                在这里我们需要去遍历data中的数据，并且给li
                                根据jsx的语法规则，{}里只能写js表达式
                            */
                            data.map((item,index)=>{
                                // 这里要记得写{},否则返回的都是item,而不是里面所对应的值
                                // 需要写key,key必须是唯一的值
                                return <li key={index}>{item}</li>
                            })
                        }
                    </ul>
               </div>
            )

            // 将虚拟DOM渲染到页面上
            ReactDOM.render(element,document.getElementById('box'))
            
        </script>
    </body>
</html>