React——react 的基本使用

前提:安装全局的脚手架,通过create-creat-app 项目名,我们创建好一个新项目,cd进去,通过npm start去运行该项目
在这里插入图片描述
在这里插入图片描述

注意:简单看下demo的配置,在根目录我们可以看到,没有任何webpack的配置文件,我们可以通过eject命令去自动生成相关的配置(react基于webpack搭建),但是不推荐使用,eject是不可逆的,生成的文件不是全部都需要,会导致项目很混乱。

index.js文件内容,web页面开发

  1. 导入reactreact-dom (脚手架已配置好)
  2. react创建react元素(虚拟DOM),reactDom渲染react元素到页面
    在这里插入图片描述
    在这里插入图片描述

在这里插入图片描述

index.js文件内容,APP页面开发

  1. 导入reactreact-native(react-native需要自己再下载依赖)

  2. react创建react元素(虚拟DOM),reactDom渲染react元素到APP

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/457791.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【b站咸虾米】2 Vue基础(下) 2021最新Vue从基础到实例高级_vue2_vuecli脚手架博客案例

课程地址:【2021最新Vue从基础到实例高级_vue2_vuecli脚手架博客案例】 https://www.bilibili.com/video/BV1pz4y1S7bC/?share_sourcecopy_web&vd_sourceb1cb921b73fe3808550eaf2224d1c155 目录 2 Vue基础 下 2.8 计算属性 2.8.1 计算属性使用 2.8.2 计算…

整型变量的原子操作

什么是原子操作 原子操作(Atomic Operation)是指不可中断的操作,即在多线程环境下,当一个线程在执行原子操作时,不会被其他线程的调度和中断所影响。这种操作在多线程编程中尤为重要,因为它能保证操作的原…

Git如何清除账户凭证

场景:一般发生在Git用户变更的情况 1.git base 操作 Git会使用凭证助手 credential.helper来储存账户凭证,通过以下命令移除: git config --system --unset credential.helper 除了system系统级外,还有 global、local范围。 查…

直方图均衡化原理和实现

基本思想 将原始图像的直方图分布转换为一个均匀分布的直方图,这样原图中的高频率亮度值会被展宽,而低频率亮度值则被压缩,从而达到增强图像对比度的效果。 计算过程 假设我们有一个灰度图像,其像素值范围从0到L-1(…

云计算 3月11号 (NFS远程共享存储及vsftpd配置)

构建NFS远程共享存储 一、NFS介绍 文件系统级别共享(是NAS存储) --------- 已经做好了格式化,可以直接用。 速度慢比如:nfs,sambaNFS NFS:Network File System 网络文件系统,NFS 和其他文件…

关于使用elementUI中select和el-checkbox-group的回显问题

网上看到很关于这个的问题回显,各式各样,没有绝句自己的问题,总重问题出在数据格式上 select和el-checkbox-group el-checkbox 都是字符串数组格式:[12,13,....]; 我写的格式是id是选中的id组成的回显数据格式; 如…

Flutter 多语言自动化本地化生成器

Flutter 多语言自动化本地化生成器 这是一个为Flutter设计的插件,通过从Excel表格提取的CSV文件自动生成Dart本地化文件,以简化应用程序本地化的流程。这个工具通过自动化创建多语言资源文件,简化了开发人员和翻译人员的工作流程。 特点 默…

Android 录屏操作

Android 录屏操作 本文主要介绍android中如何通过MediaRecorder实现录屏操作的. 1: 申请权限 <uses-permission android:name"android.permission.RECORD_AUDIO" /> <uses-permission android:name"android.permission.WRITE_EXTERNAL_STORAGE"…

react native常用插件

react-native-async-storage/async-storage 说明&#xff1a;AsyncStorage 是一个在 react-native 中轻量存储的库&#xff1b;跟 localStorage 类似&#xff0c;API 也几乎一样&#xff1b;存储的时候需要将存储内容转成字符串存储。 react-navigation/material-bottom-tabs …

Python Web开发记录 Day9:Django part3 用户管理

名人说&#xff1a;莫道桑榆晚&#xff0c;为霞尚满天。——刘禹锡&#xff08;刘梦得&#xff0c;诗豪&#xff09; 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 目录 1、数据库准备2、用户列表3、新建用户4、编辑用…

基于YOLOv8深度学习的脑肿瘤智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测、智慧医疗

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推…

发布一个npm包到 Nexus私有仓库

前文&#xff1a;使用nexus3搭建npm私有仓库 1、前置条件 git、 nvm、nrm、monorepo 的概念&#xff0c;以及 lerna 的使用、 yarn 的使用 基于 lerna yarn 的 monorepo 仓库 lerna npm i -g lernamac : zsh: command not found: lerna brew install lerna2、添加nexus权…

IDEA中配置Tomcat

文章目录 一、创建Web项目二、配置tomcat三、启动Tomcat 一、创建Web项目 1.首先我们要用IDEA创建一个普通的java项目。 2.我创建的项目名称为myTomcat&#xff0c;想要开发web程序&#xff0c;我们还要做一下操作。 首先我们先给项目添加框架支持...&#xff0c;我的 idea 版…

ASP.NET

Web控件 Web控件-内部控件 ASP.NET引入一组称为”内部控件”的新控件&#xff0c;它们专门用于ASP.NET 内部控件的使用方法与HTML控件相同&#xff0c;它们映射到HTML元素并通过使用 runat”server”属性在服务器上执行 Web控件-列表控件 这些控件用于在Web页中创建数据列表…

uniapp移动端 IOS系统下无法与webview通信

不知道有没有人遇到过这个问题 我的页面嵌套了一个webview&#xff08;文件位于项目的hybrif/html&#xff09;目录下 使用evalJS与webview进行通信 代码如下 在安卓里运行是没问题的&#xff0c;但在苹果手机上一直无法通信 连接真机&#xff0c;打印evalJS是个方法&#xf…

【matlab】如何将.mat文件与.nii文件互转

【matlab】如何将.mat文件与.nii文件互转 .mat转为.nii文件 有时候代码需要读取的是.nii文件&#xff0c;但是如何现有的数据是.mat格式&#xff0c;需要将.mata转化为.nii文件 1、先加载.mat文件 % 加载.mat文件 load(your_mat_file.mat); % 请将your_mat_file.mat替换为实…

中创ET4410台式电桥固件升级工具(修复了列表扫描的BUG)

中创ET4410台式LCR数字电桥固件升级工具和最新版固件&#xff08;修复了列表扫描的BUG&#xff09; 中创ET4410 台式LCR数字电桥 简单开箱测评&#xff1a;https://blog.zeruns.tech/archives/763.html 之前买的中创ET4410台式LCR数字电桥固件有BUG&#xff08;胜利的VC4090C…

鸿蒙 Harmony 初体验

前言 看现在网上传得沸沸扬扬的鸿蒙&#xff0c;打算弄个 hello world 玩一下, 不然就跟不上时代的发展了 环境安装 我的环境 Windows 11 家庭中文版HarmonyOS SDK (API 9)DevEco Studio (3.1.1 Release)Node.js (16.19.1) 开发IDE下载 官方下载链接 配置 nodejs 这里帮…

command failed: npm install --loglevel error --legacy-peer-deps

在使用vue create xxx创建vue3项目的时候报错。 解决方法&#xff0c;之前使用的https://registry.npm.taobao.org 证书过期更换镜像地址即可 操作如下&#xff1a; 1.cd &#xff5e;2.执行rm .npmrc3. sudo npm install -g cnpm --registryhttp://registry.npmmirror.com…

排查数据库插入慢的问题

文章目录 项目背景问题排查思路排查网络问题检查两台服务器之间的网络是否通畅检查两台服务器之间的网速iperf3 下载地址iperf3 使用方法 排查数据库锁表检查数据库性能 项目背景 我负责的模块是这个应用的一部分&#xff08;在服务器A&#xff09;&#xff0c;但数据库&#…