js 创建 React 项目

起因(目的):

js 很久没写了。
react js 之前粗略看过, 最近又需要用到, 继续学习, 记录 + 积累。

1. 新建 React 项目 的几种方法。

  1. 官方建议使用 next 来创建 React 项目, 但是我觉得太复杂了。以后再看看.

npx create-next-app@latest # !!! 不建议使用:

  1. 我之前用的是,

npx create-react-app small_react_app # app 名称不要包含大写字母

  1. 刚刚看可一个教程,vite 很火,也很快。!!! 推荐这个 !!!

npm create vite@latest 或
npm create vite@4.1.0
根据提示,逐步操作
npm install 或 npm i # 安装必要的包。
npm run dev # 运行默认的示例代码

2. 安装 bootstrap, 一个经典的 css 框架

目的是使用 css , 美化页面

npm i bootstrap@5.2.3 # 读法是: boot-strap,就是 鞋带 的意思!

3. 其他临时笔记

  • node -v # 版本最好大于 19
  • .tsx 文件, 是 react 的组件的文件!
  • export default App; // 导出,可以用在别处!
  • hmr: hot module replacement 热加载
  • React 组件必须以大写字母开头
  • 可以使用 <Fragment> 标签来替换 div, 或是直接使用 <> </>
  • markdown 里面, 如果遇到一些特殊的标点符号,需要用 \ 来转义!

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

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

相关文章

算法练习题14——leetcode84柱形图中最大的矩形(单调栈)

题目描述&#xff1a; 解题思路&#xff1a; 要解决这个问题&#xff0c;我们需要找到每个柱子可以扩展的最大左右边界&#xff0c;然后计算以每个柱子为高度的最大矩形面积。 具体步骤如下&#xff1a; 计算每个柱子左侧最近的比当前柱子矮的位置&#xff1a; 使用一个单调…

java后端保存的本地图片通过ip+端口直接访问

直接上代码吧 package com.ydx.emms.datapro.controller;import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry; import org.springframework.web.servlet.config.annotation.…

Qt中Q_PROPERTY的作用,以及必要性和使用场景

作为一个跨平台框架&#xff0c;Qt没有依赖那些非标准的编译器特性&#xff0c;比如&#xff1a;__property或者[property]。Qt的解决方案适用于Qt支持平台下的任何标准C编译器。它基于元对象系统&#xff08;Meta Object Sytstem&#xff09;&#xff0c;该系统还提供了信号槽…

linux curl命令介绍以及使用

文章目录 curl 简介curl 的安装基本用法发送GET请求将响应内容保存到文件显示请求的头部信息发送POST请求上传文件携带请求头处理重定向通过代理发送请求下载文件指定请求的超时时间 高级用法模拟浏览器行为保持会话&#xff08;Cookie&#xff09;验证HTTPS请求总结 在Linux中…

函数式接口实现策略模式

函数式接口实现策略模式 1.案例背景 我们在日常开发中&#xff0c;大多会写if、else if、else 这样的代码&#xff0c;但条件太多时&#xff0c;往往嵌套无数层if else,阅读性很差&#xff0c;比如如下案例&#xff0c;统计学生的数学课程的成绩&#xff1a; 90-100分&#…

idea添加本地环境执行模版

用Flink的环境执行时&#xff0c;因为最后会打包放服务器&#xff0c;所以有些jar包将不会打包上传&#xff0c;这些jar包用<scope>provided</scope>标记 所以这些jar包在本地运行时也会不提供&#xff0c;为了程序在本地能跑&#xff0c;我们每次执行是需手动添加…

使用matlab的热门问题

MATLAB广泛应用于科学计算、数据分析、信号处理、图像处理、机器学习等多个领域&#xff0c;因此热门问题也涵盖了这些方面。以下是一些可能被认为当前最热门的MATLAB问题&#xff1a; 深度学习与神经网络&#xff1a; 如何使用MATLAB的深度学习工具箱&#xff08;Deep Learni…

vue3 el-menu 菜单Maximum recursive updates exceeded 报错

vue3 用el-menu实现管理后台左侧菜单&#xff0c;报Uncaught (in promise) Maximum recursive updates exceeded in component <ElMenu>. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possib…

Monorepo学习笔记

Monorepo学习笔记 使用 pnpm 配置 monorepo 1、创建项目 mkdir stars-ui && cd stars-ui && pnpm init mkdir packages docs2、.gitignore # Logs logs *.log npm-debug.log* yarn-debug.log* yarn-error.log* pnpm-debug.log* lerna-debug.log*node_modules…

自然语言处理系列五十》文本分类算法》SVM支持向量机算法原理

注&#xff1a;此文章内容均节选自充电了么创始人&#xff0c;CEO兼CTO陈敬雷老师的新书《自然语言处理原理与实战》&#xff08;人工智能科学与技术丛书&#xff09;【陈敬雷编著】【清华大学出版社】 文章目录 自然语言处理系列五十SVM支持向量机》算法原理SVM支持向量机》代…

javascript利用for循环输出0-100的数

for循环语句是 for(起始数值&#xff1b;循环条件;自增符&#xff09;&#xff5b; 循环体 &#xff5d; 利用for循环输出1-100的数 代码如下 <script> for(var i1;i<100;i) {document.write(这是第${i}个数<br>) } </script> 这段代码。首先在fo…

JAVA-接口(一万四千字讲解)

目录 一、接口的概念 二、语法规则 三、接口使用 四、接口特性 五、实现多个接口 六、接口间的继承 七、接口使用实例 1.Comparable 2.写一个自己的sort 3.Comparator 八、类的克隆Clonable 1.Clonable接口 2.浅拷贝 3.深拷贝 九、抽象类和接口的区别 十、 Obje…

芯片时钟树评估的关键性能参数

前面有很多文章都介绍了PI性能的影响&#xff0c;也介绍了PSIJ对信号或时钟性能的影响&#xff0c;对于SOC设计&#xff0c;为了更好的理解电源完整性在芯片设计中的重要作用&#xff0c;对芯片的时钟树设计需要足够理解才能更好的明白电源完整性的影响。 时钟分布网络设计一直…

最基本的SELECT...FROM结构

第0种&#xff1a;最基本的查询语句 SELECT 字段名&#xff0c;字段名 FROM 表名 SELECT 1&#xff1b; SELECT 11,3*2&#xff1b; FROM SELECT 11,3*2 FROM DUAL&#xff1b;#dual&#xff1a;伪表 我们可以用它来保持一个平衡 这里我们的值不需要在任何一个表里&#xf…

基于Spring的单点登录SSO实现(redis+JWT+SpringSecurity)

本文介绍了基于Spring的单点登录SSO实现&#xff08;redisJWTSpringSecurity&#xff09; 方法。 一、应用场景 平台包含多个系统应用的&#xff0c;实现只要在一个应用登录一次&#xff0c;就可以访问其他相互信任的应用。常用于多应用平台中&#xff0c;此时常常建立门户网站…

JVM中的GC过程

堆内存结构&#xff1a;在详细讨论GC过程之前&#xff0c;需要了解JVM堆内存的结构。JVM堆内存通常被分为新生代&#xff08;Young Generation&#xff09;和老年代&#xff08;Old Generation&#xff09;&#xff0c;其中新生代又进一步细分为Eden区&#xff08;Eden Space&a…

9、类和对象

9.1 封装 9.1.1 封装的例子 class Student { public:string name;int age; public:void setName(string name_) {name name_;} }; int main() {Student s1;s1.setName("zhangsan");return 0; }类中的行为都叫做成员&#xff0c;例如成员属性&#xff0c;成员变量&…

Spring Cloud全解析:负载均衡算法

负载均衡算法 集中式负载均衡 在服务的消费方和提供方之间使用独立的LB设施(可以是硬件&#xff0c;如F5&#xff0c;也可以是软件&#xff0c;如Nginx)&#xff0c;由该设施负责把访问请求通过某种策略转发至服务的提供方 进程内负载均衡 将LB逻辑集成到消费方&#xff0c…

Redis篇 - 深入了解查询缓存与缓存带来的问题

引言 在现代Web应用程序中&#xff0c;为了提高数据访问速度和减轻数据库的压力&#xff0c;缓存技术变得越来越重要。Redis作为一款高性能的键值存储系统&#xff0c;在缓存领域有着广泛的应用。然而&#xff0c;随着缓存的引入&#xff0c;一系列新的挑战也随之而来。本文将…

飞速(FS)S5800-48T4S:如何使用MLAG?

MLAG&#xff08;多机箱链路聚合组&#xff09;可实现无缝故障转移并优化带宽利用率&#xff0c;从而增强网络冗余和提高可扩展性。它允许多台交换机作为一个统一实体运行&#xff0c;从而降低停机风险并确保网络运行不中断。飞速&#xff08;FS&#xff09;S5800-48T4S是一款支…