自存react crash course(1)

1.创建一个react 项目

确保有node.js

创建名为react-task-tracker的react项目

npx create-react-app react-task-tracker

启动项目

npm start

2.项目结构

所有组件都是放在src下面的

3. jsx

 // jsx语法 和html很像,class用的是className来使用css的样式
    <div className="App">
      <header className="App-header">
        {/* 动态的变量 */}
        <img src={logo} className="App-logo" alt="logo" />

a.jsx 只能返回一个元素

b.返回的元素可以是一个空标签

 

c.jsx的变量

 

 d.jsx {}中执行语句

// react的组件可以是一个函数 也可以是一个class

4.快捷插件

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

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

相关文章

vue3 实现关于 el-table 表格组件的封装以及调用

一、示例图&#xff1a; 二、组件 <template><div class"sn-table" :class"props.colorType 1 ? : bg-scroll"><el-table :data"tableData" :row-class-name"tableRowClassName" height"500" style"…

Ubuntu20 编译 Android 12源码

1.安装基础库 推荐使用 Ubuntu 20.04 及以上版本编译&#xff0c;会少不少麻烦&#xff0c;以下是我的虚拟机配置 执行命令安装依赖库 // 第一步执行 update sudo apt-get update//安装相关依赖sudo apt-get install -y libx11-dev:i386 libreadline6-dev:i386 libgl1-mesa-de…

海思SD3403/SS928V100开发(12)OSD显示开发

1.前言 由于需要显示一些硬件状态,暂时还没开发GUI; 所以可以使用海思平台的OSD硬件叠层来做, 下面是做的一些调试记录 2. 翻阅MPP文档 有几个地方需要注意的地方 建议使用OVERLAYER类型,支持模块多很多,还可以直接叠VO模块 3. sample测试 3.1 sample region samp…

阿贝云免费云服务器

最近体验了一下阿贝云的免费云服务器&#xff0c;总体感受是简单易上手。感兴趣的小伙伴们可以赶紧注册体验一下。 阿贝云官网&#xff1a; https://www.abeiyun.com 下图是我亲测的免费云服务器管理界面&#xff0c;免费云服务器的配置信是1核1GB&#xff0c;硬盘10GB&#x…

森林火灾图像数据集

目标是使用该数据集开发一个可以识别火焰图像的模型。收集数据是为了训练模型来区分包含火灾的图像&#xff08;火灾图像&#xff09;和常规图像&#xff08;非火灾图像&#xff09;&#xff0c;因此整个问题是二元分类。数据分为2个文件夹&#xff0c;fire_images文件夹包含75…

DASS最新论文整理@2023.12

CVPR 2023 论文来源&#xff1a;https://openaccess.thecvf.com/CVPR2023?dayall 1 Planning-oriented Autonomous Driving 面向规划的自动驾驶 (Best papper) 项目地址&#xff1a;https://opendrivelab.github.io/UniAD/ 现代自动驾驶系统的特点是按顺序执行模块化任务…

如何培养用户思维

产品开发是根据用户要求建造出系统的过程&#xff0c;产品开发是一项包括需求捕捉、需求分析、设计、实现和测试的系统工程&#xff0c;一般通过某种程序设计语言来实现。然而用户思维能够帮助企业更好地理解市场需求&#xff0c;进行产品的开发和完善&#xff0c;用户是企业产…

【项目实战】Cadence工具的使用1

需要 Candece Jasper文档的朋友可以和我联系@tommi.wei@qq.com Vmanager 自动化仿真管理工具 对于这款工具,笔者用到最多的地方就是写testplan! 没错,根据设计文档(Target Specication),细分feature list. 对于验证工程师要做的事情,就是验证设计功能的完备性,需要逐一…

LLM对齐方案再升级

Microsoft&#xff1a;WizardLM WizardLM: Empowering Large Language Models to Follow Complex Instructions GitHub - nlpxucan/WizardLM: LLMs build upon Evol Insturct: WizardLM, WizardCoder, WizardMath 要点&#xff1a;使用prompt对种子指令样本进行多样化&#x…

vue无法获取dom

处理过程 watch监听值变化 index.js:33 [Vue warn]: Error in callback for watcher "$store.state.modelsStorageUrl": "TypeError: Cannot set properties of undefined (setting modelScene)"watch: {"$store.state.modelsStorageUrl":{ha…

网页爬虫在数据分析中的作用,代理IP知识科普

在当今信息爆炸的时代&#xff0c;数据分析成为洞察信息和制定决策的不可或缺的工具。而网页爬虫&#xff0c;作为数据收集的得力助手&#xff0c;在数据分析中扮演着举足轻重的角色。今天&#xff0c;我们将一同探讨网页爬虫在数据分析中的作用。 1. 数据收集的先锋 网页爬虫…

Java爬虫之Jsoup

1.Jsoup相关概念 Jsoup很多概念和js类似&#xff0c;可参照对比理解 Document &#xff1a;文档对象。每份HTML页面都是一个文档对象&#xff0c;Document 是 jsoup 体系中最顶层的结构。 Element&#xff1a;元素对象。一个 Document 中可以着包含着多个 Element 对象&#…

微信公众号(小程序)验证URL和事件推送

文章的内容适用小程序和公众号 微信官方示例代码demo下载地址&#xff1a;微信官方demo代码 必须下载&#xff0c;后面要用到 把微信官方示例代码也就是下图中除了 WXBizMsgCryptTest 文件外的所有文件复制到项目中 下面是全部代码&#xff0c;有问题请留言 代码中只提到了…

linux防护与集群——系统安全及应用

一、账号安全控制&#xff1a; 用户账号是计算机使用者的身份凭证或标识&#xff0c;每个要访问系统资源的人&#xff0c;必须凭借其用户账号才能进入计算机。在Linux系统中&#xff0c;提供了多种机制来确保用户账号的正当、安全使用 1.1 基本安全措施&#xff1a; 在Linux…

业务项目中Echarts图表组件的封装实践方案

背景&#xff1a;如果我们的项目是一个可视化类/营销看板类/大屏展示类业务项目&#xff0c;不可避免的会使用到各种图表展示。那在一个项目中如何封装一个图表组件既能够快速复用、UI统一&#xff0c;又可以灵活扩充Echarts的各种复杂配置项配置就变得极为重要。 封装目标 符…

vmware workstation的三种网络模式通俗理解

一、前言 workstations想必很多童鞋都在用&#xff0c;经常会用来在本机创建不同的虚拟机来做各种测试&#xff0c;那么对于它支持的网络模式&#xff0c;在不同的测试场景下应该用哪种网络模式&#xff0c;你需要做下了解&#xff0c;以便可以愉快的继续测&#xff08;搬&…

1.5C语言 双曲正弦函数(*) 优化麦克劳林公式

一.传统算法 #include<stdio.h> #include<math.h> int jc(int x); int main(){double x,eps,y0.0;scanf("%lf%lf",&x,&eps);int de1,i1;double item1.0;while(fabs(item)>eps){itempow(x,i)/jc(de);i2;yitem;}printf("%.6f\n",y); …

H5 - - - - - 获取图片exif相关信息

1. EXIF是什么 【可交换图像文件格式】&#xff1a;&#xff08;英语&#xff1a;Exchangeable image file format&#xff0c;官方简称Exif&#xff09;,是专门为数码相机的照片设定的&#xff0c;可以记录数码照片的属性信息和拍摄数据。 2. EXIF 相关标识 { ApertureValu…

科研上新 | 第6期:优化LLM数学推理;深度学习建模基因表达调控;基于深度学习的近实时海洋碳汇估算

编者按&#xff1a;欢迎阅读“科研上新”栏目&#xff01;“科研上新”汇聚了微软亚洲研究院最新的创新成果与科研动态。在这里&#xff0c;你可以快速浏览研究院的亮点资讯&#xff0c;保持对前沿领域的敏锐嗅觉&#xff0c;同时也能找到先进实用的开源工具。 本期内容速览 …

redisson作为分布式锁的底层实现

1. redisson如何实现尝试获取锁的逻辑 如何实现在一段的时间内不断的尝试获取锁 其实就是搞了个while循环&#xff0c;不断的去尝试获取锁资源。但是因为latch的存在会在给定的时间内处于休眠状态。这个事件&#xff0c;监听的是解锁动作&#xff0c;如果解锁动作发生。会调用…