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

news2024/11/15 10:38:29

需要先学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.coloradmin.cn/o/1484321.html

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

相关文章

监控与日志

一、监控 1、监控类型 从监控类型上划分,在 K8s 中可以分成四个不同的类型: ① 资源监控:这种监控主要关注于基础资源的使用情况,例如 CPU、内存、网络等。通常使用数值或百分比等单位来统计,可以通过 Zabbix、Tele…

日志到filebeat-->logstash-->elastic-->kibana

1、日志到filebeat。 cat /etc/filebeat/filebeat.yml filebeat.inputs: - type: syslog format: rfc3164 protocol.udp: host: "0.0.0.0:514" output.logstash: hosts: ["localhost:5044"] 验证方式: tcpdump -i 网卡名称 udp port 514 2、…

LeetCode 刷题 [C++] 第55题.跳跃游戏

题目描述 给你一个非负整数数组 nums ,你最初位于数组的 第一个下标 。数组中的每个元素代表你在该位置可以跳跃的最大长度。 判断你是否能够到达最后一个下标,如果可以,返回 true ;否则,返回 false 题目分析 题目中…

电子电器架构 —— DoIP协议相关的介绍

电子电器架构 —— DoIP协议相关的介绍 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 没有人关注你。也无需有人关注你。你必须承认自己的价值,你不能站在他人的角度来反对自己。人生在世,最怕…

【C++精简版回顾】16.虚函数,多态

1.虚函数与多态 以下为AI生成 虚函数是C中实现多态性的一种机制。多态性允许一个类的对象可以以多种不同的方式工作,即同一个函数可以根据对象的不同类型表现出不同的行为。 在C中,通过在基类中声明虚函数,并在派生类中进行重写,可…

外贸福利 PHP源码 WhatsApp 营销 - 批量发件人、聊天、机器人、SaaS 搭建

WhatsApp 营销工具对于外贸人员来说至关重要。随着全球贸易的不断发展,WhatsApp已成为了许多国际贸易商之间沟通的首选工具之一。通过利用WhatsApp营销工具,外贸人员可以轻松地与客户建立联系,传递产品信息,进行价格谈判&#xff…

分销小程序的常见功能

分销小程序是一种非常有前景和潜力的产品形式,可以帮助企业快速拓展销售渠道,增加销售额。下面我将介绍分销小程序的常见功能。 1. **分销商注册与管理**:支持任何用户自动成为分销商,也可以支持有会员等级(或付费或审…

C# OpenVINO Crack Seg 裂缝分割 裂缝检测

目录 效果 模型信息 项目 代码 数据集 下载 C# OpenVINO Crack Seg 裂缝分割 裂缝检测 效果 模型信息 Model Properties ------------------------- date:2024-02-29T16:35:48.364242 author:Ultralytics task:segment version&…

鸿蒙Harmony应用开发—ArkTS声明式开发(通用属性:颜色渐变)

设置组件的颜色渐变效果。 说明: 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 linearGradient linearGradient(value: { angle?: number | string; direction?: GradientDirection; colors: Array; repea…

2024年3月5-7日年生物发酵装备展-环科环保科技

参展企业介绍 山东环科环保科技有限公司,是一家集环保设备的设计、制造、安装、服务及环境治理工程总承包于一体的企业。 公司长期专注于大气、水、危固废三大领域,以科技创造碧水蓝天,为客户提供环保解决方案。 以稳定的产品及服务质量、适用的技术、…

游戏科技:超越娱乐的界限

12月25日,国家新闻出版署在节日前夕推出令业内人士振奋的好消息——本次共有105款国产网络游戏通过审批,获得版号,这不仅数量超过了历史新高,更使业内人士看到政策回暖的希望。 这105款游戏覆盖多家知名游戏企业,其中不…

SketchUp Pro 2023:颠覆传统,重塑设计世界mac/win版

SketchUp Pro 2023是一款强大的三维建模软件,专为设计师、建筑师和创意专业人士打造。这款软件以其直观易用的界面和强大的功能而著称,为用户提供了无限的创意空间。 SketchUp Pro 2023软件获取 SketchUp Pro 2023在用户体验方面进行了全面的优化&#…

ABAP - SALV教程03 - 开篇:打开SALV的三种方式之三

全屏模式生成SALV的方式:http://t.csdnimg.cn/CzNLz可控模式生成SALV的方式:http://t.csdnimg.cn/zB7tuDocking container生成SALV的方式,需要在屏幕的PBO或者屏幕初始化事件里完成。完整代码 TABLES:vbak.CLASS lcl_model DEFINITION.PUBLIC…

取送货问题(Pickup and Delivery Problem)

取送货问题及其变体 广义取送货问题(General Pickup and Delivery Problems,GPDP)可以分为两类: Vehicle Routing Problems with Backhauls,VRPB:从配送中心(depot)取货运输货物到客…

buuctf misc做题笔记

喵喵喵 使用stegsolve.jar,按BGR顺序提取出一个png图片,是一个只显示一半的二维码,修改图片高度显示全部二维码,解析出一个百度网盘地址,https://pan.baidu.com/s/1pLT2J4f 下载得到压缩包flag.rar。解压成功&#xf…

latex小技巧

目录 如何输入"I"、“II”、“III”、“IV”等大小写罗马数字。 注释(单行/多行) 单行注释:直接“%” 多行注释: 在TeXstudio: 如何输入"I"、“II”、“III”、“IV”等大小写罗马数字。 \uppercase\expa…

vscode——本地配置(C和C++环境配置)(2)

vscode——本地配置(2) 配置C语言编译看看.json文件编译多个C文件C/C调试 今天我们继续来看vscode的配置,如果没看过上一次的文章,大家可以点击: https://blog.csdn.net/qq_67693066/article/details/136315696 配置C语…

19.2 DeepMetricFi:基于深度度量学习改进Wi-Fi指纹定位

P. Chen and S. Zhang, "DeepMetricFi: Improving Wi-Fi Fingerprinting Localization by Deep Metric Learning," in IEEE Internet of Things Journal, vol. 11, no. 4, pp. 6961-6971, 15 Feb.15, 2024, doi: 10.1109/JIOT.2023.3315289. 摘要 Wi-Fi RSSI指纹定位…

Docker的基础知识与应用技巧

文章目录 一.docekr简介二.docekr安装三.docker命令 一.docekr简介 Docker是一个开源的应用容器引擎,它可以让开发者打包他们的应用以及依赖包到一个可移植的镜像中,然后发布到任何流行的Linux或Windows操作系统的机器上。Docker基于轻量级虚拟化技术&a…

H3C IS-IS基本配置实验

H3C IS-IS基本配置实验 实验拓扑 ​​ 实验需求 按照图示配置IP地址按照图示分区域配置 IS-IS,完成全网互通,NET 地址如图所示要求 R1 和 R2/R3 只建立 Level-1 邻接关系要求 R2 和 R3 只建立 Level-1 邻接关系按照图示修改各链路 Cost在 R2 和 R3 上…