React之基础项目搭建

前言

React的生态系统非常庞大,拥有大量的第三方库和工具,如React Native(用于构建原生移动应用)、Next.js(用于构建服务器渲染应用)、Create React App(用于快速搭建React应用的脚手架)

一.Node环境搭建

参考文章Vue路由与node.js环境搭建-CSDN博客

已经搭建过Node环境的同学可以跳过这步

查看Node版本

node -v

二.React项目搭建

1.脚手架安装

首先,确保你已经安装了Node.js和npm,然后执行以下命令安装脚手架

npm install -g create-react-app

 查看脚手架是否安装完成

create-react-app -v

2.创建React应用

npx create-react-app my-react-app

 当项目名出现大写时..........

创建中.................需要等待2-5分钟左右,因设备而异

当出现Success时表示创建成功

3.项目启动

首先要进入到你的项目中再运行以下命令

例:cd reactyu(我的项目名)

npm start 

npm run start

 出现以下界面说明启动成功

报错解决

小结:没有进入到项目中启动,找不到启动文件,cd 项目名,再运行命令

三. React项目结构及文件说明

1.构建React项目应用基本包(React和Dom包)

npm install react react-dom

2.基本项目结构介绍

  1. README.md 项目的说明文档,通常包含有关项目的简介、安装说明、使用说明等信息。

  2. node_modules/ 存放项目依赖的所有第三方npm包。

  3. package.json 包含项目的元数据和依赖信息,如项目名称、版本号、作者信息、依赖列表等。你也可以在这里定义自定义的脚本命令,如启动开发服务器、构建应用程序等。

  4. public/ 包含静态资源文件,这些文件会直接复制到构建输出目录中。主要包含以下文件:

    • index.html 应用的HTML模板文件,包含一个根元素,React应用将会挂载到这个根元素下。

    • favicon.ico 应用的图标文件。

  5. src/ 包含项目的源代码文件。这是你主要工作的目录。在这里,你会找到以下文件:

    • App.css App组件的样式文件。通常用于定义该组件的样式。

    • App.js 项目的主要组件文件。这是React应用的根组件,通常包含整个应用的结构和逻辑。

    • App.test.js 用于测试App组件的测试文件。

    • index.css 全局的样式文件,会被引入到入口文件中。

    • index.js 应用的入口文件,负责将根组件渲染到DOM中。

    • logo.svg Create React App生成的默认logo图片。

四.小结及推荐

小结

优点:

  1. 组件化开发: React鼓励将用户界面拆分为独立的组件,使得代码更易于理解、维护和复用。

  2. 虚拟DOM: React使用虚拟DOM来提高性能,通过巧妙地比较虚拟DOM树的变化,最小化了对实际DOM的操作,从而提高了页面渲染的效率。

  3. 单向数据流: React采用了单向数据流的思想,简化了数据流动的逻辑,使得应用程序更易于调试和维护。

  4. 声明式设计: React的声明式设计让开发者可以专注于描述界面应该如何呈现,而不必关心底层实现细节,提高了开发效率和代码质量。

  5. 强大的生态系统: React拥有庞大的社区和丰富的生态系统,提供了大量的第三方库和工具,使得开发过程更加高效。

缺点:

  1. 学习曲线: 对于初学者来说,React的学习曲线可能较陡峭,特别是对于理解虚拟DOM、组件生命周期等概念。

  2. 灵活性带来的复杂性: 虽然React的灵活性是其优点之一,但也可能导致开发过程中出现复杂的组件结构和逻辑,增加了代码的复杂性和维护成本。

  3. 状态管理的挑战: 在构建大型应用程序时,有效地管理组件状态可能会成为一个挑战,需要借助状态管理库(如Redux)来解决。

  4. SEO友好性: 虽然React可以通过服务器端渲染(SSR)来提高搜索引擎优化(SEO)的友好性,但相比传统的服务器端渲染框架,它的SEO支持仍然有限。

 总得来说react的难度还是比较大的,对于初学者理解需要花费很多时间,不过React的组件及功能还是非常强大,第三方库和工具都相对比较齐全完善。

学习React推荐

官方中文文档React 官方中文文档 (docschina.org)

Ant Design组件库组件总览 - Ant Design (gitee.io)

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

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

相关文章

【Linux】网络编程套接字二

网络编程套接字二 1.TCP网络编程1.1TCP Server服务端1.2 TCP Client客户端 2.Server 多进程版本2.1普通版2.2 信号版 3.Server 多线程版4.Server 线程池版5.日志函数重新设计6.守护进程7.TCP协议通讯流程8.TCP和UDP 对比 喜欢的点赞,收藏,关注一下把&…

蓝桥杯真题Day48 倒计时5天 练了几道真题小程序+回溯剪枝应用一个小程序

[蓝桥杯 2023 省 A] 更小的数 题目描述 小蓝有一个长度均为 n 且仅由数字字符 0∼9 组成的字符串,下标从0到 n−1,你可以将其视作是一个具有n位的十进制数字num,小蓝可以从num 中选出一段连续的子串并将子串进行反转,最多反转一次…

C#基础--之数据类型

C#基础–之数据类型 在第一章我们了解了C#的输入、输出语句后,我这一节主要是介绍C#的基础知识,本节的内容也是后续章节的基础,好的开端等于成功的一半。在你阅读完本章后,你就有足够的C#知识编写简单的程序了。但还不能使用封装、…

基于PyAutoGUI图片定位的自动化截图工具--jmeter部分(2)

1、计划 压测完成后需要编写性能测试报告,报告中所需数据截图较多,使用自动化操作方便快捷,就编写一个界面工具以便后续复用。 基于PyAutoGUI图片定位的自动化截图工具–jmeter部分   使用pyautogui 库操作鼠标键盘,按钮根据截取…

汇舟问卷:做调查问卷需要准备什么?

大家好,我是汇舟问卷。海外问卷调查分为很多个种类,接触最多的有站点查、口子查和渠道查,每种调查的方式都是不一样的。 几年前口子查的操作门槛还是很低的,我们只需要在国外的社交网站上搜索调查问卷、调查这些类似的文字就能获…

MongoDB爬虫:(某扑)实战

https://bbs.hupu.com/bxj网页地址: https://bbs.hupu.com/bxj 然后我们在网页上定义帖子名称、帖子链接、创建时间、回复数、最后回复用户...... 除此之外,我们发现虎扑步行街最多显示的页数(20): 、 当我们打开第3页的时候,网页的URL的地址变为了:https://bbs.hupu.…

基于java+springboot+vue实现的西安旅游系统(文末源码+Lw)23-265

摘 要 如今社会上各行各业,都喜欢用自己行业的专属软件工作,互联网发展到这个时候,人们已经发现离不开了互联网。新技术的产生,往往能解决一些老技术的弊端问题。因为传统西安旅游系统信息管理难度大,容错率低&#…

一文看尽西周275年12王历史

周朝是中国历史上继商朝之后的第三个王朝。周王朝一共传国君 32 代 37 王,享国共计 790 年。周朝分为“西周”(前 1046-前 771 年)与“东周”(前 770 年-前 256 年)两个时期。 西周由周武王姬发…

Bug及异常:unity场景角色移动卡墙壁的问题

场景是一个小的杠铃形状封闭空间,美术没有给包围盒,我自己用blender做了一个(属于兴趣爱好),如下: 导入场景中使用meshcollider做成空气墙,发现角色移动到角落继续行走会卡角落处&#x…

TSINGSEE青犀AI智能分析网关V4人员睡岗检测算法介绍及应用

人员睡岗AI算法是一种通过人工智能技术来检测和预警人员是否处于睡眠状态的算法。它主要通过分析人员的行为、姿势和身体特征等信息来判断人员是否已经进入睡眠状态。该算法通过对监控摄像头捕捉的画面进行实时分析,利用卷积神经网络(CNN)对图…

LongVLM:让大模型解读长视频 SOTA 的方法

LongVLM:让大模型解读长视频 SOTA 的方法 使用LongVLM处理长视频的步骤LongVLM 方法3.1 总体架构3.2 局部特征聚合3.3 全局语义整合 效果4.1 实验设置4.2 主要结果4.3 消融研究4.4 定性结果 论文:https://arxiv.org/pdf/2404.03384.pdf 代码&#xff1a…

适配器模式类图与代码

某软件系统中,已设计并实现了用于显示地址信息的类Address,现要求提供基于Dutch语言的地址信息显示接口。为了实现该要求并考虑到以后可能还会出现新的语言的接口,决定采用适配器(Adapter)模式实现该要求,得到如图7.9所示的类图。 【Java代码…

硬件学习件Cadence day16 做个笔记,BOM 位号这个参数输出的两种情况。

1. BOM 中位号有3种情况 1. 一种是位号生成时多行,每行是固定的位数。(如下图所示) 2. 一种是位号生成时只有一行,但是可以使用表格中自动换行功能,给他换行,但是这个位号本质上只有一行,只是因…

可视化后台管理系统-空框架

1.下载element-plus npm install element-plus --save 注意:element-ui不适配vue3,官方已将vue3版本的更新为element-plus 2.main.js配置 // 全局样式 import ./assets/main.cssimport { createApp } from vue import { createPinia } from piniaimpo…

【教学类-52-02】20240412动物数独02(四宫格)黏贴卡片

作品展示 背景需求 制作了动物数独4宫格后,需要再做一些黏贴上去的图片 【教学类-52-01】20240411动物数独(4宫格)-CSDN博客文章浏览阅读53次。【教学类-52-01】20240411动物数独01(4宫格)https://blog.csdn.net/rea…

中科方德服务器操作系统安装zabbix5.0

原文链接:中科方德服务器操作系统安装zabbix5.0 Hello,大家好啊!接着我们上一次的讨论,今天我要为大家介绍如何在已经安装好的中科方德服务器操作系统基础上,安装和配置Zabbix 5.0。Zabbix是一个开源的监控软件工具&am…

C语言 | Leetcode C语言题解之第24题两两交换链表中的节点

题目: 题解: struct ListNode* swapPairs(struct ListNode* head) {struct ListNode dummyHead;dummyHead.next head;struct ListNode* temp &dummyHead;while (temp->next ! NULL && temp->next->next ! NULL) {struct ListNod…

[Python图像识别] 五十二.水书图像识别 (2)基于机器学习的濒危水书古文字识别研究

该系列文章是讲解Python OpenCV图像处理知识,前期主要讲解图像入门、OpenCV基础用法,中期讲解图像处理的各种算法,包括图像锐化算子、图像增强技术、图像分割等,后期结合深度学习研究图像识别、图像分类应用。目前我进入第二阶段Python图像识别,该部分主要以目标检测、图像…

go语言学习--3.常用语句

目录 1.条件语句 1.1 if语句 1.2 if-else语句 1.3 switch语句 1.4 select语句 2.循环语句 2.1循环处理语句 2.2循环控制语句 3.go语言关键字 1.条件语句 和c语言类似,相关的条件语句如下表所示: 1.1 if语句 if 布尔表达式 {/* 在布尔表达式为 t…

前端常见面试题-CSS盒模型

前言: 什么是CSS盒模型?盒模型的构造? 在前端开发中,CSS 盒模型是一种非常基础且核心的概念,它描述了文档中的每个元素被框架处理的方式。 ---- 打开浏览器开发者工具,查看Elements右侧下的Styles底部。 …