react-总结1-构建项目-react元素-函数式组件-辅助工具-jsx

最新推荐文章于 2023-03-18 22:16:23 发布

站好我去买橘子

最新推荐文章于 2023-03-18 22:16:23 发布

阅读量266

点赞数

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react

本文链接：https://blog.youkuaiyun.com/weixin_45413276/article/details/102566062

react 专栏收录该内容

11 篇文章

订阅专栏

本文介绍React的es6模块化规范，解释为何React不能直接在浏览器中运行及使用CRA（Create React App）进行项目构建的过程。涵盖CRA安装、项目创建、启动与打包流程，以及配置文件抽离等高级操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说明

React中使用的是 es6 模块化规范

React是不能直接在浏览器中运行的，我们必须借助工具才能运行React程序
- 因为React是jsx，它必须经过webpack编译为js才能运行
React的快速构建工具
- CRA [ 大纲要求 - react官方推荐的 ]
- Dva
- Umi
通过CRA来构建项目
构建流程

- 安装CRA [ create-react-app ]
  - 全局安装
    - `$ yarn add create-react-app global`
    - `$ cnpm i create-react-app -g`
  -创建一个项目   
    - `$ create-react-app your-app 注意命名方式`
  - 临时使用 [ npx ]
    - `npx create-react-app 项目名称`
- 启动项目
   - `$ yarn start`
- 打包项目
   - `$ yarn build`
- 配置文件抽离
   - `$ yarn eject` 这个动作不可逆【 不能返回 】

React元素
- React元素就是一个普通的jsx
函数式组件
- 在React中，函数也可以是一个组件，但是记住了，这个函数必须返回一个jsx结构
- 函数式组件由一个参数 props , 这个props可以接收绑定在函数式组价身上的属性
- 好处：
  - js的最大特点：函数式编程
  - react符合函数式编程思想的
  - 函数的好处：复用性高、独立作用域
React第二类组件：类组件
辅助工具
- vs code 插件
  - Simple React Snippets
  - ES7 React/Redux/GraphQL/React-Native snippets
  - React-Native/React/Redux snippets for es6/es7
- chrome浏览器
  - React developer tools

JSX/虚拟DOM对象模型

虚拟DOM

- 假的DOM结构
        - 我们使用一个对象模型模拟DOM结构
        - Vue使用它的好处
            - 优化、高性能
            - 我们用一个案例的形式告诉你
                - 频繁的DOm操作会导致性能的底下，所以我们使用虚拟的数据来代替DOM操作
                - 最终结果是减少了DOM操作
- 在 react中通过React.createElement()讲jsx编译为 js对象模型

jsx提出

  JSX提出
        - 当我们的DOM结构比较复杂时，那么我们的对象模型就会很庞大，复杂了，不利于书写
        - 我们想，我们能在js中书写 html结构就好了  
        - 将  javascript  +  xml  来实现  ， 这就是JSX 语法糖

            - 比如我们这几天在#app里面写的内容就是JSX
            - #app里面的东西都是假的，它是一个模板【 类似于我们学过的ejs/jade 】
            - 也就是说我们要将这个假的模板最终转化为真的DOM,这个转换用的叫做 转换器

    虚拟DOM 
        - 只要数据改变，就会生成