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)

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

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

相关文章

OLAP与OLTP介绍

OLAP与OLTP介绍 在讨论OLAP和OLTP之前,我们需要了解它们的基本概念。OLAP(在线分析处理)和OLTP(在线事务处理)是数据处理的两种不同方法。它们针对不同类型的数据库工作负载进行了优化,适用于不同的业务需…

工业数据采集平台:从起源到崛起的辉煌历程

关键词:工业数据采集平台, 工业数据采集, 工业数据采集分析,智能化 在当今数字化的时代,工业领域也在经历着深刻的变革。而工业数据采集平台的发展历程,正是这场变革中的重要篇章。 回首过去,工业数据采集曾是一个繁琐而复杂的过…

整数划分(计数类dp)-java

整数划分我们主要通过两种思路来对这道题就行解决。 文章目录 前言 一、整数划分 二、模拟完全背包 三.代码如下 1.代码如下 2.测试样例 3.代码运行结果 四、计数类dp 4.1算法思路 4.2代码如下 总结 前言 整数划分我们主要通过两种思路来对这道题就行解决。 提示:以…

【数据库(MySQL)基础】以MySQL为例的数据库基础

文章目录 0. 本文用到的emp表,dept表,salgrade表1. MySQL入门2. 简单查询3. 字段计算4. 条件查询4.1 and4.2 null4.3 or4.4 and和or的优先级4.4 in 和 not in4.5 模糊查询 5. 排序5.1 简单排序5.2 两个字段排序5.3 综合排序 6. 一些常用函数6.1 大小写转换6.2 substr子字符串6.…

数据库系统工程师考试大纲

数据库系统工程师考试大纲主要包括以下几个方面的考试要求: 1.掌握计算机体系结构以及各主要部件的性能和基本工作原理。 2.掌握操作系统、程序设计语言的基础知识,了解编译程序的基本概念。 3.熟练掌握常用数据结构和常用算法。 4.熟悉软件工程和软件开…

15. 【Android教程】按钮 Button/ImageButton

在前面两章我们讲了 TextView,它是一个纯输出的控件;而 EditText 在 TextView 基础之上加入了简单的输入功能;今天要讲的 Button 是一个和用户互动感很强的控件,从今往后不再是单纯的文本展示,我们可以通过 TextView、…

蒙德冒险者的游戏

描述 蒙德城的一群冒险者计划进行一场特殊的表演以庆祝风神节。这场表演涉及到一项特别的挑战,即“冒险者塔”——一项测试冒险者们团队协作和个人承受能力的活动。 在“冒险者塔”表演中,参与者需要站在彼此的肩膀上,形成一个人类塔&#…

智能汽车领域检测实验室数智化转型

随着汽车制造行业自主研发能力的提高,当前的汽车企业实验室不仅需要进行种类繁多的试验项目,同时还需要将试验过程中的试验结果、试验过程、报告文档等一系列重要数据进行统一管理。为了提升实验数据的安全性及应用性,青软青之通过软硬件结合…

快速下载huggingface资源 (cli使用)

因为墙的原因,huggingface上的资源难以下载,通过本博客的方法不需翻墙也能快速下载。 本博客主要介绍: 1. 如何离线下载huggingface 资源 2. huggingface cli 的简单使用 安装 pip install -U "huggingface_hub[cli]" 配置 #…

for in 和 for of 的区别

1.for in 和 for of 都可以循环数组&#xff0c;for in 输出的是数组的 index 下标&#xff0c;而 for of 输出的是数组的每一项的值。 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport…

Unity类银河恶魔城学习记录12-7-2 p129 Craft UI - part 2源代码

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释&#xff0c;可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili UI_CraftWindow.cs using UnityEngine.UI; using TMPro; using UnityEngin…

动态规划在电商订单计算的例子

你在网上买了一堆商品,比如说,你买了2件T恤,每件10块,5件袜子,每双5块,还有1个帽子,8块钱。但是呢,商家有个促销活动,买得越多,单价就越便宜。比如,T恤买3件以上,每件就变成9块了。这时候,怎么算出你这一单的最少花费呢? 商品价格可能会因为购买数量的不同而有所…

重看Spring聚焦ApplicationContext分析

一、理解下ApplicationContext的设计 &#xff08;一&#xff09;功能性的理解 ApplicationContext 提供了一个轻量级、灵活、可扩展的容器&#xff0c;能帮助我们更加轻松地构建和管理复杂的应用程序&#xff0c;其通过依赖注入和控制反转等技术&#xff0c;降低了组件之间的…

SpringBoot 多数据源与事务管理:一站式解决方案

大纲 引言 在当今的软件开发中&#xff0c;随着业务的不断扩展和复杂化&#xff0c;许多应用程序都不再局限于单一的数据库&#xff0c;而是需要同时操作多个数据源以满足各种需求。SpringBoot作为一种快速开发框架&#xff0c;在处理单数据源的情况下表现出色&#xff0c;但…

【算法】统计英文字母出现的频率

题目 字母出现频率是指26英文个字母在文章中出现的频率。根据统计&#xff0c;在英语中最常出现的字母是e&#xff0c;大约占12~13%&#xff0c;出现最少的字母是z&#xff0c;不到0.1% &#xff0c;如下图所示&#xff08;统计结果来自wiki百科&#xff09; 字母出现频率的统…

三方库移植之NAPI开发(三)通过IDE开发NAPI工程

在三方库移植之NAPI开发[1]—Hello OpenHarmony NAPI一文中&#xff0c;笔者开发的是一个rom包的napi工程。该工程需要编译烧录固件&#xff0c;C 的动态库会集成到开发板的ROM中。在本篇文章中&#xff0c;笔者使用三方库移植之NAPI开发[1]—Hello OpenHarmony NAPI中一样的he…

VXWorks6.9 + Workbench3.3 开发环境部署

VxWorks系列传送门 一、安装包 有需要的朋友可以私信~ 二、安装 安装挺简单 1、先安装DVD-R147826.1-1-01-vx69.udf.iso 镜像中的Setup.exe程序&#xff0c;记住要使用管理员权限 2、再安装DVD-R147826.1-23-00.iso 镜像中的Setup.exe程序&#xff0c;同样要使用管理员权限 3…

基于大数据的汽车信息可视化分析预测与推荐系统

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长 QQ 名片 :) 1. 项目简介 本项目通过集成网络爬虫技术&#xff0c;实时获取海量汽车数据&#xff1b;运用先进的ARIMA时序建模算法对数据进行深度挖掘和分析&#xff1b;结合flask web系统和echarts可视化工具&#xff0c;…

CF698B Fix a Tree 题解 贪心

Fix a Tree 传送门 A tree is an undirected connected graph without cycles. Let’s consider a rooted undirected tree with n n n vertices, numbered 1 1 1 through n n n . There are many ways to represent such a tree. One way is to create an array with n…

基于GitHub的开源讨论系统,赋予网站交互可能

Giscus&#xff1a;让每一条见解直达GitHub&#xff0c;用Giscus开启网站与社区的无缝对话新纪元&#xff01;- 精选真开源&#xff0c;释放新价值。 概览 纯静态网站或博客&#xff0c;由于没有数据存储功能&#xff0c;经常借助第三方的评论系统以插件的方式集成进来&#x…