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.rhkb.cn/news/268250.html

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

相关文章

vue2+elementui上传照片(el-upload 超简单)

文章目录 element上传附件(el-upload 超详细)代码展示html代码data中methods中接口写法 总结 element上传附件(el-upload 超详细) 这个功能其实比较常见的功能,后台管理系统基本上都有,这就离不开element的…

多层感知机 + 代码实现 - 动手学深度学习v2 | 李沐动手学深度学习课程笔记

感知机 感知机≈二分类问题 感知机和其他问题的对比 训练感知机 如果小于等于零,说明预测错啦 ,其实就是同号为正,异号为负 举个分类的例子 增加样本,改变分类线 继续分类 感知机的收敛定理 XOR问题 XOR问题其实就是第1、3象限数…

Java 语法糖,提高代码效率神器!

引言:语法糖经常是大厂面试官常问的一个知识点,关于 Java 的语法糖很多人可能只是知道其中的某几个,但却对整体的结构不了解,本文将详细介绍 Java 语法糖的知识。 题目 什么是 Java 语法糖? 推荐解析 什么是语法糖…

数据结构与算法学习【算法思想之二分法基础】

文章目录 数据结构与算法学习【算法思想之二分查找基础】本文学习目标或巩固的知识点 最基础的二分查找🟢通过题目可知题解结果验证 数据结构与算法学习【算法思想之二分查找基础】 本文学习目标或巩固的知识点 学习二分法类题目 巩固基础的二分法 提前说明&#…

机器人持续学习基准LIBERO系列10——文件结构

0.前置 机器人持续学习基准LIBERO系列1——基本介绍与安装测试机器人持续学习基准LIBERO系列2——路径与基准基本信息机器人持续学习基准LIBERO系列3——相机画面可视化及单步移动更新机器人持续学习基准LIBERO系列4——robosuite最基本demo机器人持续学习基准LIBERO系列5——…

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

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

Unity铰链四杆机构设计和运动仿真

一、效果图 设定好各边长度和转速后,点击【设置并启动】,自动生成一个机构模型,并按照原理进行运转 二、铰链四杆机构介绍 机架:A和D是固定位置,叫做机架。 曲柄:B点绕A点旋转,构成曲柄。 连…

vSphere资源管理

一 内存、CPU、资源池和vApp 内存部分: 关联VM内存 我们可以超额的关联内存给VM。例如:ESXI物理主机内存只有8G,但我们可以给三个VM都分配4G内存。 2.ESXI四大高级内存控制技术 a.Page sharing(透明的页面共享) 虚…

青少年CTF擂台挑战赛 2024 #Round 1 Web方向题解 WP 全

EasyMD5 题目描述:php没有难题 考点总结:脑洞题目,不如我出(狗头 只允许两个都上传pdf文件。 文件还不能太大了。burp多次发包发现要求两个pdf内容不一样 不一样时候,提示我们MD5碰撞。 科学计数法绕过 PHP的后门 …

WebServer -- 注册登录

目录 🍉整体内容 🌼流程图 🎂载入数据库表 提取用户名和密码 🚩同步线程登录注册 补充解释 代码 😘页面跳转 补充解释 代码 🍉整体内容 概述 TinyWebServer 中,使用数据库连接池实现…

PDN分析及应用系列二-简单5V电源分配-Altium Designer仿真分析-AD

PDN分析及应用系列二 —— 案例1:简单5V电源分配 预模拟DC网络识别 当最初为PCB设计打开PDN分析仪时,它将尝试根据公共电源网络命名法从设计中识别所有直流电源网络。 正确的DC网络识别对于获得最准确的模拟结果非常重要。 在示例项目中已经识别出主DC网络以简化该过程。 …

CleanMyMac X2024免费Mac电脑清理和优化工具

CleanMyMac X是一款专业的 Mac 清理和优化工具,它具备一系列强大的功能,可以帮助用户轻松管理和维护他们的 Mac 电脑。以下是一些关于 CleanMyMac X 的主要功能和特点: 智能清理:CleanMyMac X 能够智能识别并清理 Mac 上的无用文件…

二十三、剖析 LinkedList

剖析 LinkedList 本文为书籍《Java编程的逻辑》1和《剑指Java:核心原理与应用实践》2阅读笔记 ArrayList随机访问效率很高,但插入和删除性能比较低;LinkedList同样实现了List接口,它的特点与ArrayList几乎正好相反。除了实现了L…

从第一原理看大语言模型

大模型基础框架 大模型幻觉问题 大模型能力 思维链模式 思维链模式激发的是大模型的推理能力 LLM知识能力RAG

leetcode hot100 每日温度

在本题中,我们是通过单调栈来解决的,因为我们采用了栈的数据结构,并且,栈内存储的元素是单调的。 本题我们考虑,将气温数组元素的下标存入栈中,首先初始化要把0放入,0是下标的意思。然后我们拿…

实用工具:实时监控服务器CPU负载状态并邮件通知并启用开机自启

作用:在服务器CPU高负载时发送邮件通知 目录 一、功能代码 二、配置开机自启动该监控脚本 1,配置自启脚本 2,启动 三、功能测试 一、功能代码 功能:在CPU负载超过预设置的90%阈值时就发送邮件通知!邮件内容显示…

【LeetCode:225. 用队列实现栈 + 栈 | 队列】

🚀 算法题 🚀 🌲 算法刷题专栏 | 面试必备算法 | 面试高频算法 🍀 🌲 越难的东西,越要努力坚持,因为它具有很高的价值,算法就是这样✨ 🌲 作者简介:硕风和炜,…

有人吐槽:可视化大屏面向领导的设计,真相是这样吗?

某些老铁的态度很极端,看到可视化大屏页面就一口断定,除了讨好领导之外,屁用没有。真相是这样吗?贝格前端工场尝试给老铁们分析下。 一、可视化大屏确实要面向领导,但不是讨好领导 可视化大屏的设计需要考虑领导和管理…

如何使用grafana 下JSON API访问展示接口数据

一.新增connection 点击左侧菜单栏,选择Add new connection 下载安装即可。 二. 增加对应url和参数 1. 添加新的数据源 2. 配置对应url 3.新建仪表盘和添加接口url和参数等

Vins-Moon配准运行

Vins-Moon运行 求助!!!源码地址电脑配置环境配置编译Kitti数据集制作IMU时间戳问题 适配Kitti数据集运行结果Euroc数据集kitti数据集 evo评估(KITTI数据)输出轨迹(tum格式)结果 求助!!&#xff…