[尚硅谷React笔记]——第1章 React简介

阿瞒有我良计152023-09-20 20:16

目录：

第1章 React简介

  • React的基本使用:
  • 虚拟DOM的两种创建方式：
    • 使用jsx创建虚拟DOM
    • 使用js创建虚拟DOM(一般不用)
    • 虚拟DOM与真实DOM:
  • React JSX:
  • JSX练习：
  • 模块与组件、模块化与组件化的理解
    • 模块
    • 组件
    • 模块化
    • 组件化

第1章 React简介

React的基本使用:

代码示例：

bash 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--准备好一个"容器"-->
<div id="test"></div>

<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!--引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!--引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
    //1.创建虚拟DOM
    const VDOM = <h1>Hello,React</h1>
    //2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'))
</script>
</body>
</html>

运行结果：

虚拟DOM的两种创建方式：

  • 使用jsx创建虚拟DOM
bash 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--准备好一个"容器"-->
<div id="test"></div>

<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!--引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!--引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
    //1.创建虚拟DOM
    // const VDOM = <h1 id="title">Hello,React</h1>
    const VDOM = <h1 id="title"><span>Hello,React</span></h1>
    //2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'))
</script>
</body>
</html>
  • 使用js创建虚拟DOM(一般不用)
bash 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--准备好一个"容器"-->
<div id="test"></div>

<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!--引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>

<script type="text/javascript">
    //1.创建虚拟DOM
    // const VDOM = React.createElement('h1', {id: 'title'}, 'Hello,React')
    const VDOM = React.createElement('h1', {id: 'title'}, React.createElement('span', {}, 'Hello,React'))
    //2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'))
</script>
</body>
</html>
  • 虚拟DOM与真实DOM:
bash 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--准备好一个"容器"-->
<div id="test"></div>
<div id="demo"></div>

<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!--引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!--引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
    //1.创建虚拟DOM
    const VDOM = (
        <h1 id="title">
            <span>Hello,React</span>
        </h1>
    )
    //2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'))

    const TDOM = document.getElementById('demo')

    console.log('虚拟DOM', VDOM)
    console.log('真实DOM', TDOM)
    debugger
    // console.log(typeof VDOM)
    // console.log(VDOM instanceof Object)
</script>
</body>
</html>

React JSX:

  • 全称: JavaScript XML
  • react定义的一种类似于XML的JS扩展语法: JS + XML本质是React . createElement ( component , props , ... children **)**方法的语法糖
  • 作用: 用来简化创建虚拟DOM
    • 写法：var ele = <h1> Hello JSX! </h1>
    • 注意1：它不是字符串, 也不是HTML/XML标签
    • 注意2：它最终产生的就是一个JS对象
  • 标签名任意: HTML标签或其它标签
  • 标签属性任意: HTML标签属性或其它
  • 基本语法规则
    • 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
    • 遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含
  • babel.js的作用
    • 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
    • 只要用了JSX，都要加上type="text/babel", 声明需要babel来处理

jsx语法规则：

bash 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .title {
            background-color: orange;
            width: 200px;
        }
    </style>
</head>
<body>
<!--准备好一个"容器"-->
<div id="test"></div>

<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!--引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!--引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
    const myId = 'aTgUiGu'
    const myData = 'HeLlo,rEaCt'

    //1.创建虚拟DOM
    const VDOM = (
        <div>
            <h2 className="title" id={myId.toLowerCase()}>
                <span style={{color: 'white', fontSize: '29px'}}>{myData.toLowerCase()}</span>
            </h2>
            <h2 className="title" id={myId.toUpperCase()}>
                <span style={{color: 'white', fontSize: '29px'}}>{myData.toLowerCase()}</span>
            </h2>
            <input type="text"></input>
        </div>
    )
    //2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'))

    // jsx语法规则:
    // 1.定义虚拟DOM时,不要写引号。
    // 2.标等中混入Js表达式时要用
    // 3.样式的类名指定不要用class，要用className.
    // 4.内联样式，要用style={{key : value}}的形式去写。
    // 5.只有一个根标签
    // 6.标签必须闭合
    // 7.标签首字母
    // (1).若小写字母开头，则将改标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
    // (2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

</script>
</body>
</html>

JSX练习：

bash 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .title {
            background-color: orange;
            width: 200px;
        }
    </style>
</head>
<body>
<!--准备好一个"容器"-->
<div id="test"></div>

<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!--引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!--引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
    const data = ['Angular', 'React', 'Vue']
    //1.创建虚拟DOM
    const VDOM = (
        <div>
            <h1>前端js框架列表</h1>
            <ul>
                {
                    data.map((item, index) => {
                        return <li key={index}>{item}</li>
                    })
                }
            </ul>
        </div>
    )
    //2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'))
</script>
</body>
</html>

运行结果：

模块与组件、模块化与组件化的理解

模块

  1. 理解：向外提供特定功能的js程序, 一般就是一个js文件
  2. 为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂
  3. 作用：复用js, 简化js的编写, 提高js运行效率

组件

  1. 理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
  2. 为什么要用组件： 一个界面的功能更复杂
  3. 作用：复用编码, 简化项目编码, 提高运行效率

模块化

  • 当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

组件化

  • 当应用是以多组件的方式实现, 这个应用就是一个组件化的应用
相关推荐
不会编程的懒洋洋15 分钟前
C# P/Invoke 基础
开发语言·c++·笔记·安全·机器学习·c#·p/invoke
yqcoder24 分钟前
JavaScript 柯里化：把“大餐”拆成“小炒”的艺术
开发语言·javascript·ecmascript
每天吃饭的羊30 分钟前
JSZip的使用
开发语言·javascript
xian_wwq35 分钟前
【学习笔记】网络与数据安全领域强制性标准
笔记·学习
24白菜头40 分钟前
【无标题】
c++·笔记·学习·harmonyos
suirosu1 小时前
痛风高尿酸血症的治疗方法
笔记·其他·微信·新浪微博
前端老石人1 小时前
前端开发中的 URL 完全指南
开发语言·前端·javascript·css·html
余生皆假期-1 小时前
YuanHub 源码分析【一】FlashDB 初始化与项目应用
笔记·单片机·嵌入式硬件
不可能的是2 小时前
从 /simplify 指令深挖 Claude Code 多 Agent 协同机制
javascript
Rkgua2 小时前
事件流模型是什么和DOM事件模型等关系
javascript
热门推荐
01要裂开了！ChatGPT要手机号验证了？注册Codex要求验证电话号码怎么办？2026年登陆Codex要手机号验证的解决办法02GitHub 镜像站点03【AI】2026 年具身智能模型和世界模型总结04裂开！ChatGPT 居然开始要手机号验证，附详细解决方法05Codex 接入 DeepSeek API 完整配置文档062026年AI前瞻：量子AI、具身智能与科学发现的新纪元07零基础教你claude code 接入 deepseek V408实测可用｜小米 MiMo 百万亿 Token 免费领，开发者速冲09在Windows 11上安装Docker的踩坑记录10CC-Switch & Claude 基于 Linux 服务器安装使用指南