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前面(少写一行)

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue--》打造简易直播应用平台项目实战

今天开始使用 vue3 + ts 搭建一个简易直播应用平台项目,因为文章会将项目的每一个地方代码的书写都会讲解到,所以本项目会分成好几篇文章进行讲解,我会在最后一篇文章中会将项目代码开源到我的github上,大家可以自行去进行下载运行,希望本文章对有帮助的朋友们能多多关注本…

支持向量机 SVM | 线性可分:公式推导

目录 一. SVM的优越性二. SVM算法推导小节概念 在开始讲述SVM算法之前,我们先来看一段定义: 支持向量机(Support VecorMachine, SVM)本身是一个二元分类算法,支持线性分类和非线性分类的分类应用,同时通过OvR或者OvO的方式可以应用…

安装Docker及DockerCompose

0.安装Docker Docker 分为 CE 和 EE 两大版本。CE 即社区版(免费,支持周期 7 个月),EE 即企业版,强调安全,付费使用,支持周期 24 个月。 Docker CE 分为 stable test 和 nightly 三个更新频道…

10.轮廓系数-机器学习模型性能的常用的评估指标

轮廓系数(Silhouette Coefficient)是评估聚类算法效果的常用指标之一。它结合了聚类的凝聚度(Cohesion)和分离度(Separation),能够量化聚类结果的紧密度和分离度。 背景 1.聚类分析的背景 在…

CUDA学习笔记01:vs2019环境配置

为了在window11 vs2019下使用CUDA编程,配置了一下环境,但是我电脑一开始自带CUDA,然后再安装的vs2019,这样安装顺序上是不对的,vs2019找不到CUDA配置项,网上找了很多办法貌似都不好使而且很复杂。 那么最快…

c++之拷贝构造和赋值

如果一个构造函数中的第一个参数是类本身的引用,或者是其他的参数都有默认值,则该构造函数为拷贝构造函数。 那么什么是拷贝构造呢?利用同类对象构造一个新对象。 1,函数名和类必须同名。 2,没有返回值。 3&#x…

Linux多线程控制:深入理解与应用(万字详解!)

🎬慕斯主页:修仙—别有洞天 ♈️今日夜电波:どうして (feat. 野田愛実) 0:44━━━━━━️💟──────── 3:01 🔄 ◀️ ⏸ ▶️ …

6.2 指标的应用与设计(12%)

1、指标的作用 用简约的汇总数据量化业务强弱。 2、指标的理解 特点: (1)指标是游离态的,无法单独实现数据统计 eg:总销售额、总销售量 (2)需与统计维度结合,明确统计指标的对…

047 内部类

成员内部类用法 /*** 成员内部类** author Admin*/ public class OuterClass {public void say(){System.out.println("这是类的方法");}class InnerClass{public void say(){System.out.println("这是成员内部类的方法");}}public static void main(Stri…

(二)逻辑回归与交叉熵--九五小庞

什么是逻辑回归 线性回归预测的是一个连续值,逻辑回归给出的“是”和“否”的回答 Singmoid sigmoid函数是一个概率分布函数,给定某个输入,它将输出为一个概率值 逻辑回归损失函数 平方差所惩罚的是与损失为同一数量级的情形&#xff0…

SandBox中的JavaAgent技术

8.1 JavaAgent Java Agent 是一种强大的技术,在运行时动态修改已加载类的字节码,为应用程序注入额外的功能和行为。 JDK 1.5 支持静态 Instrumentation,基本的思路是在 JVM 启动的时候添加一个代理(javaagent)&#…

基于阿里云OSS上传图片实战案例

一、案例描述 基于Springboot框架实现一个上传图片到阿里云服务端保存的小案例。 二、准备工作 基于Springboot免费搭载轻量级阿里云OSS数据存储库(将本地文本、照片、视频、音频等上传云服务保存)-CSDN博客 三、代码 新建这两个类:一个…

LANA: A Language-Capable Navigator for Instruction Following and Generation

摘要 最近,视觉语言导航(VLN)——要求机器人代理遵循导航指令——已经取得了巨大的进步。然而,现有文献最强调将指令解释为行动,只提供“愚蠢”的寻路代理。在本文中,我们设计了 LANA,一种支持…

【LeetCode-1143】最长公共子序列(动归)

目录 题目描述 解法1:动态规划 代码实现 题目链接 题目描述 给定两个字符串 text1 和 text2,返回这两个字符串的最长公共子序列的长度。 一个字符串的 子序列 是指这样一个新的字符串:它是由原字符串在不改变字符的相对顺序的情况下删除…

社区店选址评估:利用大数据选址的技巧与策略

在当今数字化的时代,利用大数据进行社区店选址评估已成为一种高效、科学的方法。作为一名开鲜奶吧5年的创业者,我将分享一些利用大数据选址的技巧与策略,帮助你找到最适合的店铺位置。 1、确定目标商圈 在选址之前,首先要明确自己…

爬虫的一些小技巧总结

一、在爬虫中,爬取的数据类型如下 1.document:返回的是一个HTML文档 2.png:无损的图片,jpg:压缩后的图片,wbep:有损压缩,比png差,比jpg好 3.avgxml图像编码字符串 4.script:脚本文件,依据一定格式编写的可执行的文…

【大厂AI课学习笔记NO.58】(11)混淆矩阵

混淆矩阵(confusion matrix)—— 混淆矩阵(Confusion Matrix)是人工智能领域,特别是在机器学习和深度学习中,用于衡量分类模型性能的重要工具。它通过统计分类模型的真实分类与预测分类之间的结果&#xf…

【python debug】python常见编译问题解决方法_2

序言 记录python使用过程中碰到的一些问题及其解决方法上一篇:python常见编译问题解决方法_1 1. PermissionError: [Errno 13] Permission denied: ‘/lostfound’ 修改前: 修改后(解决): 此外,可能文件夹…

leetcode 热题 100_接雨水

题解一: 按列求:分别考虑每一列的雨水高度,某列的雨水高度只与其左侧最高墙和右侧最高墙有关,一种情况是该列比左右侧的墙都低,则根据木桶效应该列雨水高度为min(左侧墙高,右侧墙高)-列高,而其余…

智能驾驶及相关零部件摄像头毫米波雷达激光雷达和芯片渗透率

一、总体情况 乘联会数据显示,1月1日至1月28日,全国乘用车厂商新能源车批发销量为56.7万辆,同比增长76%,环比下降38%;国内新能源车市场零售销量为59.6万辆,同比增长92%,环比下降24%。 二、销…