React-router的创建和第一个组件

需要先学react框架

首先:找到一个文件夹,在文件夹出打开cmd窗口,输入如下图的口令

npx create-react-app demo

然后等待安装

安装完成

接下来进入创建的demo实例

cd demo

然后可以用如下方式打开vscode

code .

注意:不要忽略点号与空格

信任之后打开界面如下:
 

Package.json是比较关键的点,用来存储包,项目的信息。

package-lock.json用来索引到本机上的一些包,一般来讲可有可无。

正常开发react都需要用到git

Public 是一些静态的资源

“root”根标签,打包的所有内容都被注入到该标签中。

运行:终端输入npm run start

npm run start

run可有可无,带上还是好

下一步:可以选择删除src中的文件,对我们无大的帮助

cd进入

rm通配符(remove)

cd src
rm *

删除完成。

此时会报错,因为删光了,必要的东西都被删了。所以我们接下来来补充这一部分:
 

很简单

只需在src目录下新建一个“index.js”文件即可,它是我们的入口文件。

文件内需要一些内容

如下图 :

显然上图中第一个参数不适合大长代码的使用,所以下面来写第一个组件。(第一个参数为什么能用HTML的标签,因为这是jsx的语法)

依然是src目录中写,惯例,最大的写App.js

(这儿的后缀名可以.js 也可以.jsx 推荐只写js的地方用前一个,写组件的地方用后一个)

下面的图需要认真记,认真研究


 

 注意:

Render class import compoment ReactDom export default 这些东西需要学习!

运行截图:

回忆;小圆括号是在js代码中返回html

Render 指我要渲染 ,渲染的内容就是我返回的这一套html

建议加要求:组件名必须大写(App)

不然报错

如果想在html中想写js这时用 {}

export default可以写到class前面(少写一行)

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

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

相关文章

【重温设计模式】享元模式及其Java示例

享元模式的介绍 在编程世界中,我们常常面临着如何有效管理系统资源的挑战。这就好比我们在生活中,面对有限的物质资源,如何做到既满足需求又节约使用,是一门艺术。在设计模式中,有一种模式,恰如其分地解决…

VR转接器:破解虚拟与现实边界的革命性设备

VR转接器,这一革命性的设备,为虚拟现实体验带来了前所未有的自由度。它巧妙地连接了虚拟与现实,使得用户在享受VR眼镜带来的奇幻世界的同时,也能自由地在现实世界中活动。这一设计的诞生,不仅解决了VR眼镜续航的瓶颈问…

MySQL进阶之(三)InnoDB数据存储结构之数据页结构

三、InnoDB数据存储结构之数据页结构 3.1 数据库的存储结构3.1.1 MySQL 数据存储目录3.1.2 页的引入3.1.3 页的概述3.1.4 页的上层结构 3.2 数据页结构3.2.1 文件头和文件尾01、File Header(文件头部)02、File Trailer(文件尾部) …

比小鹏、问界都贵,谁给了理想MEGA勇气?

“规模小的时候,一号位善于解题。规模大的时候,一号位要善于出题。” 前不久,理想汽车CEO李想在微博上如此评价一家公司中,老板应该怎么做。 现在,成立近9年的理想汽车做出了一个“违背祖宗”的决定——大举进军纯电…

陶瓷工业5G智能制造工厂数字孪生可视化平台,推进行业数字化转型

陶瓷工业5G智能制造工厂数字孪生可视化平台,推进行业数字化转型。在陶瓷工业领域,5G智能制造工厂数字孪生可视化平台的应用正在改变着行业的传统生产模式,推动着数字化转型的进程。本文将围绕这一主题展开探讨,分析数字孪生可视化…

挑战30天学完Python:Day25 pandas

🎉 本系列为Python基础学习,原稿来源于 30-Days-Of-Python 英文项目,大奇主要是对其本地化翻译、逐条验证和补充,想通过30天完成正儿八经的系统化实践。此系列适合零基础同学,或仅了解Python一点知识,但又没…

智能家居控制系统(51单片机)

smart_home_control_system 51单片机课设,智能家居控制系统 使用及转载请标明出处(最好点个赞及star哈哈) Github地址,带有PPT及流程图 Gitee码云地址,带有PPT及流程图 ​ 以STC89C52为主控芯片,以矩阵键…

KubeSphere平台安装系列之二【Linux单节点部署KubeSphere】(2/3)

**《KubeSphere平台安装系列》** 【Kubernetes上安装KubeSphere(亲测–实操完整版)】(1/3) 【Linux单节点部署KubeSphere】(2/3) 【Linux多节点部署KubeSphere】(3/3) **《KubeS…

云时代【6】—— 镜像 与 容器

云时代【6】—— 镜像 与 容器 四、Docker(三)镜像 与 容器1. 镜像(1)定义(2)相关指令(3)实战演习镜像容器基本操作离线迁移镜像镜像的压缩与共享 2. 容器(1)…

【MATLAB】语音信号识别与处理:SG滤波算法去噪及谱相减算法呈现频谱

1 基本定义 SG 滤波算法(Savitzky - Golay 滤波算法)是一种数字信号处理算法,用于对信号进行平滑处理。该算法利用最小二乘法拟合局部数据段,然后用拟合的函数来估计每个数据点的值,从而实现平滑处理。 SG 滤波算法的…

【MySQL】表的内连和外连(重点)

表的连接分为内连和外连。 一、内连接 内连接实际上就是利用 where 子句对两种表形成的笛卡儿积进行筛选,前面学习的查询都是内连接,也是在开发过程中使用的最多的连接查询。 select 字段 from 表1 inner join 表2 on 连接条件 and 其他条件; 注意&…

计算机毕业设计分享-ssm心理咨询预约管理系统 19086(赠送源码数据库)JAVA、PHP,node.js,C++、python,大屏数据可视化等

本科生毕业设计(论文) 题 目心理咨询预约管理系统的设计与实现 学 院 XXXXX 专业班级 XXXXX 学生姓名 XXXX 指导岗位 XXXX 撰写日期:2023年4月 目 录 摘要 1 绪论 1.1背景及意义 …

输入一个整数,输出其最长连续因子。

输入一个整数&#xff0c;输出其最长连续因子。 例如 输入&#xff1a;60 输出&#xff1a;2 3 4 5 6 注意&#xff1a;1不算因子 输入输出格式 输入描述: 输入一个整数N&#xff0c;N<10000。 输出描述: 输出其最长连续因子&#xff0c;如果有多个最长&#xff0c;输出…

Linux篇: 进程控制

一、进程创建 1.1 fork函数初识 在Linux中&#xff0c;fork函数是非常重要的函数&#xff0c;它从已存在进程中创建一个新进程。新进程为子进程&#xff0c;而原进程为父进程。 返回值&#xff1a; 在子进程中返回0&#xff0c;父进程中返回子进程的PID&#xff0c;子进程创…

#WEB前端

1.实验&#xff1a;vscode安装&#xff0c;及HTML常用文本标签 2.IDE&#xff1a;VSCODE 3.记录&#xff1a; &#xff08;1&#xff09;网页直接搜索安装vscode &#xff08;2&#xff09;打开vscode&#xff0c;在下图分别安装以下插件&#xff1a; Html Css Support …

PowerDesigner中怎么给ER图中字段设置默认值

双击table&#xff0c;进入数据库表详情页 详情页点击【Columns】 双击你要设置默认值得栏目&#xff0c;例如我得删除标记 点击【Standard Checks】&#xff0c;在【Defalut】中录入你想要得默认值&#xff0c;点击【应用即可】

CK98-数学家键盘配置

官方驱动和说明书下载地址 https://www.coolkiller.cn/download/lists_6.html 介绍&#xff1a;https://new.qq.com/rain/a/20221229A09B1M00 官方CK-98数学家驱动版本&#xff08;谨慎更新&#xff09; 如果升级驱动出现问题&#xff0c;重启驱动软件后会默认让你恢复的。 …

【Vue】更换浏览器默认 logo

更换浏览器默认logo为自定义图片 一. 浏览器默认 logo二. 替换为自定义logo三. 步骤3.1 转换大小3.1.1 查看图片尺寸3.1.2 修改尺寸&#xff08;为32px 32px&#xff09; 3.2 替换成功 一. 浏览器默认 logo 二. 替换为自定义logo 三. 步骤 3.1 转换大小 将自定义 logo 转为323…

AcWing 788. 逆序对的数量 解题思路及代码

先贴个题目&#xff1a; 以及原题链接&#xff1a; 788. 逆序对的数量 - AcWing题库https://www.acwing.com/problem/content/790/ 这题也是板子题&#xff0c;就是对归并排序的衍生&#xff0c;我们先分析下如果用归并排序对排序区间进行二分的话&#xff0c;逆序对可能出现的…

[计算机网络]--五种IO模型和select

前言 作者&#xff1a;小蜗牛向前冲 名言&#xff1a;我可以接受失败&#xff0c;但我不能接受放弃 如果觉的博主的文章还不错的话&#xff0c;还请点赞&#xff0c;收藏&#xff0c;关注&#x1f440;支持博主。如果发现有问题的地方欢迎❀大家在评论区指正 目录 一、五种IO…