• React是什么,怎么用


    一.Recat的来历

    React是一个用于构建用户界面的javaScript库,起源于facebook的内部项目,后续在13年开源了出来

    二.React的特点

    • 声明式

    你只需要描述UI看起来是什么样式,就跟写HTML一样,React负责渲染UI

    • 基于组件

    组件时React最重要的内容,组件表示页面中的部分内容

    • 学习一次,随处使用

    使用React可以开发Web应用,使用React可以开发移动端,可以开发VR应用

    三.React的基本使用

    React的安装

    npm i react react-dom

    • react 包是核心,提供创建元素,组件等功能
    • react-dom 包提供DOM相关功能

    React的使用

    • 引入react和react-dom的两个js文件
    1. <script src="./node_modules/react/umd/react.development.js"></script>
    2. <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
    • 创建React元素
    1. // 创建元素节点
    2. // 1. 元素名称
    3. // 2. 元素属性 传递的是个对象
    4. // 3. 元素内容
    5. let title = React.createElement('li', null, 'hellow react');
    • 渲染到页面
    1. // 渲染到页面
    2. ReactDOM.render(title, root)

    四.React脚手架

    React脚手架意义

    • 脚手架是开发现代Web应用的必备
    • 充分利用 Webpack,Babel,ESLint等工具辅助项目开发
    • 零配置,无需手动配置繁琐的工具即可使用
    • 关注业务,而不是工具配置

    使用React脚手架初始化项目

    • 初始化项目,命令: npx create-react-app my-pro
      • npx 目的:提升包内提供的命令行工具的使用体验
      • 原来:先安装脚手架包,再使用这个包中提供的命令
      • 现在:无需安装脚手架包,就可以直接使用这个包提供的命令
      • create-react-app 这个是脚手架名称 不能随意更改
      • my-pro 自己定义的项目名称
    • 启动项目,在项目根目录执行命令: npm start

    yarn命令简介

    • yarn 是Facebook发布的包管理器,可以看做是npm的替代品,功能与npm相同
    • yarn具有快速,可靠和安全的特点
    • 初始化新项目:yarn init
    • 安装包: yarn add 包名称
    • 安装项目依赖: yarn

    脚手架中使用React

    • 导入react和react-dom两个包
    1. import React from 'react'
    2. import ReactDOM from 'react-dom'
    • 创建元素
    let h1 = React.createElement('h1',null,'我是标题')
    • 渲染到页面
    ReactDOM.render(h1,document.getElementById('root'))

  • 相关阅读:
    【Electron+Vue】Error: error:0308010C:digital envelope routines::unsupported
    小型数据库系统开发作业
    Redis学习
    Tomcat服务器和Web开发介绍
    解决Ubuntu下SSH无法连接的问题
    < Linux > 进程概念(2)
    Running job: job_1709516801756_0003
    最新堆叠查询注入攻击和注入代码分析技术
    mysql 事务隔离级别详述
    C语言——动态内存分配
  • 原文地址:https://blog.csdn.net/weixin_48813932/article/details/125613887