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


    目录:

     第1章 React简介

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

     

     第1章 React简介

    • 中文官网: https://react.docschina.org/

    React的基本使用:

    代码示例:

    1. "en">
    2. <head>
    3. "UTF-8">
    4. Title
    5. id="test">

    运行结果:

    虚拟DOM的两种创建方式:

    • 使用jsx创建虚拟DOM
    1. "en">
    2. <head>
    3. "UTF-8">
    4. Title
    5. id="test">

    • 使用js创建虚拟DOM(一般不用)
    1. "en">
    2. <head>
    3. "UTF-8">
    4. Title
    5. id="test">
    • 虚拟DOM与真实DOM:
    1. "en">
    2. <head>
    3. "UTF-8">
    4. Title
    5. id="test">
    6. id="demo">

    React JSX:

    • 全称:  JavaScript XML
    • react定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(componentprops, ...children)方法的语法糖
    • 作用: 用来简化创建虚拟DOM
      • 写法:var ele = 

        Hello JSX!

      • 注意1:它不是字符串, 也不是HTML/XML标签
      • 注意2:它最终产生的就是一个JS对象
    • 标签名任意: HTML标签或其它标签
    • 标签属性任意: HTML标签属性或其它
    • 基本语法规则
      • 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
      • 遇到以 { 开头的代码,以JS语法解析: 标签中的js表达式必须用{ }包含
    • babel.js的作用
      • 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
      • 只要用了JSX,都要加上type="text/babel", 声明需要babel来处理

    jsx语法规则:

    1. "en">
    2. <head>
    3. "UTF-8">
    4. Title
    5. id="test">

    JSX练习:

    1. "en">
    2. <head>
    3. "UTF-8">
    4. Title
    5. id="test">

    运行结果:

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

    模块

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

    组件

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

    模块化

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

    组件化

    • 当应用是以多组件的方式实现, 这个应用就是一个组件化的应用

  • 相关阅读:
    「C系列」C 数据类型
    element -plus table的二次封装
    统一网关Gateway、路由断言工厂、路由过滤器及跨域问题处理
    forfiles批量处理文件工具,定期清理备份文件
    超 Nice 的表格响应式布局小技巧
    计算机网络第2章-CDN(4)
    ChatGPT Plus遇到订阅被拒原因与解决方案
    【笔记】大话设计模式14-观察者模式
    区块链中的数据可用性层是什么?
    【解惑】孜孜不倦,用足球赛程详解c#中的yield return用法
  • 原文地址:https://blog.csdn.net/qq_56444564/article/details/132942856