React安装脚手架

article/2025/11/8 19:05:47

create-react-app

脚手架:用一行命令,帮助开发者,自动创建项目工程,创建目录,创建文件,编写起始代码
如果没有脚手架我们需要自己一个文件一个目录的创建。

使用脚手架步骤

  • 1:安装脚手架
  • 2:查看脚手架版本,测试是否安装成功
  • 3:使用脚手架生成建议模板
  • 4:看脚手架官方文档,还有哪些使用内容。
1 npm i create-react-app -D  局部安装,在某一个文件目录下安装的。
2:npx create-react-app --version  查看局部命令
3:npx create-react-app <项目名字自定义> 创建一个  react工程化项目
3:看 create-react-app 官方文档 

在这里插入图片描述

  • 中文文档
  • 英文文档

目录

  |-- node_modules             当前工程中安装所有依赖(package包)|-- public                   当前工程的静态资源目录|-- favicon.ico              网站tab栏的图表|-- index.html               运行时候浏览器加载的页面,|-- logo192.png              图片|-- manifest.json            当前端页面,想要运行在安卓或者ios|-- robots.txt               爬虫协议,你违背我的协议,我告死你|-- src                      开发编写的代码,浏览器不运行,如果需要运行,需要通过 react-script处理,处理后的文件不在src下,但是浏览器可以运行。|-- App.js                   根组件|-- App.css                  根组件样式|-- App.test.js              根组件测试用例|-- index.css                项目贡公共样式文件|-- index.js                 工程化入口文件,告诉react-script,开发者代码在哪里,请你把他变为浏览器可以读懂的代码。|-- logo.svg                 App.js中引入的logo,矢量图            |-- setupTests.js            测试|-- reportWebVitals.js       日志管理等..|-- .gitignore               告诉git哪些文件不能进行版本管理|-- package.json             npm的配置文件,运行npm命令先执行package.json文件|-- README.md                说明文件

src 不运行,学习,我要写什么样的页面,想要完成这个页面我应该,在src下写什么代码?
src 下写什么代码? 怎么写是我们要学习的内容

默认工程支持哪些模块

不同的文件后缀,一个文件一个模块

  • .js
  • .css
  • .svg

public/index.html

注:下图为安装完运行效果图。

安装后运行效果


http://chatgpt.dhexx.cn/article/quDWFLIg.shtml

相关文章

React脚手架的安装

React脚手架是基于webpak基础&#xff0c;所以前提条件是安装好npm或者yarn版本管理器。 目录 yarn基于npm安装 安装React脚手架步骤 React脚手架项目结构 当运行React项目卡住 yarn基于npm安装 //全局安装&#xff1a;npm install -g yarn //查看版本&#xff1a;yarn -…

React应用(基于React脚手架)

目录 前言&#xff1a;一、使用create-react-app创建react应用1、什么是 react 脚手架&#xff1f;2. 创建 cli 脚手架方式13. 创建 cli 脚手架方式24. npx:5. react脚手架项目结构6. 功能界面的组件化编码流程&#xff08;通用&#xff09;7. 如何更改脚手架版本 二、React 组…

React-(1)React工程搭建(脚手架)

React工程搭建 简而言之&#xff0c;脚手架是一个CLI工具。可以帮我们创建已经配置好打包工具和项目目录结构的工程化项目模板。脚手架让项目从搭建到开发&#xff0c;再到部署&#xff0c;整个流程变得快速和便捷 1.安装react脚手架 npm i -g create-react-app2.创建react工程…

如何安装React的第一个脚手架

前言 学习React和Vue其实很多都是想通的&#xff0c;Vue中学到过一般我们都是通过脚手架来完成项目的开发&#xff0c;那么React也同样是有脚手架进行开发的&#xff0c;这样可以为我们省去很多的时间提高的我们的开发效率。那么接下来就是如何完成第一个脚手架的开发。 操作…

搭建react脚手架初识react

一、环境准备&项目搭建 &#xff08;1&#xff09;安装最新node.js 中文官网&#xff1a;https://nodejs.org/zh-cn/ 下载msi&#xff0c;直接安装即可&#xff08;安装过程中记得勾选 Add to path&#xff09; 查看node版本 node -v 查看npm&#xff08;nodejs下的包管…

十二、React脚手架

1. 使用create-react-app创建react应用 1.1. react脚手架 xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目 包含了所有需要的配置&#xff08;语法检查、jsx编译、devServer…&#xff09; 下载好了所有相关的依赖 可以直接运行一个简单效果 react提供了一个用于创建…

React-脚手架

系列文章目录 react&#xff0c;react-基本使用&#xff0c;react-脚手架&#xff0c; jsx的使用&#xff0c;条件渲染 文章目录 系列文章目录一、React是什么&#xff1f;二、React-特点三.React-基本使用四. React-脚手架使用react脚手架初始化项目初次安装报错&#xff1a;…

【React 框架】React 应用:基于 React 脚手架

学习视频&#xff1a;尚硅谷React教程&#xff08;2022加更&#xff0c;B站超火react教程&#xff09;_哔哩哔哩_bilibili 一、创建 react 应用 1、react 脚手架概述 &#xff08;1&#xff09;xxx 脚手架&#xff1a;用来帮助程序员快速创建一个基于 xxx 库的模板项目。 ① …

react脚手架

1.脚手架简介 xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目 包含了所有需要的配置&#xff08;语法检查、jsx编译、devServer…&#xff09;下载好了所有相关的依赖可以直接运行一个简单效果react提供了一个用于创建react项目的脚手架库: create-react-app项目的…

React(二)react脚手架的搭建

目录 一、搭建本地开发环境 二、创建 React 脚手架项目 三、VS Code 启动脚手架项目 React脚手架我们所用的其中一个是Create React App&#xff0c;Create React App 是一个用于学习 React 的舒适环境&#xff0c;也是用 React 创建新的单页应用的最佳方式。它会配置你的开…

React--》超详细教程——React脚手架的搭建与使用

目录 React脚手架的创建 全局安装创建 npx安装创建(官方推荐) 指定React版本安装 脚手架文件介绍 React脚手架是开发现代Web应用的必备&#xff0c;其充分利用Webpack、Babel、ESlint等工具辅助项目的开发&#xff0c;当然这些工具也无需手动配置即可使用&#xff0c;脚手…

金额计算!

一、简介 金额计算是一个计算机开发中经常会用到的一个小方法&#xff0c;在我不懂之前&#xff0c;我一度以为需要自己写很多的代码&#xff0c;自己去编写各种数据的相加、相乘&#xff0c;复杂的不得了&#xff0c;可等我接触后才知道&#xff0c;原来这么简单&#xff0c;今…

Excel房贷计算表(商贷)1/2

Excel房贷计算表&#xff08;商贷&#xff09; 1. 计算月供。2. 计算房屋总价和最低首付。3. 计算实际首付。3.1 等额本息和等额本金的特点3.2 等额本息和等额本金月供计算3.3 计算实际首付 4.计算公共费用4.1契税4.2 物业维修基金4.3 其他费用4.4 公共费用计算 5.预算6.总表 1…

数据表格中金额计算

在layui中&#xff0c;有一个数据表格的功能&#xff0c;对于此&#xff0c;我们可以自定义表头&#xff0c;也可以自定义分页。以下是一张数据表格设置图以及效果图&#xff0c;这个分页有需要就可开启。 在上图中&#xff0c;我有需求&#xff0c;我需要获取数据表格中的所有…

#八、古老的查表计算器--图表

图表&#xff0c;一般称作江恩图表。这是由于江恩在股市的使用&#xff0c;使其受到关注。实际其产生年代应在古希腊或古罗马时期&#xff08;笔者根据数学史的逻辑推理&#xff0c;无考古证据&#xff09;&#xff0c;只是这些图表是当年最高的数学水平的产物之一&#xff0c;…

统计计算

这本书讲不完 统计计算和统计仿真。 85道题做一下。 最后的考试可能都来源于这些习题里面。 在学习通里面点名&#xff0c;算平时成绩。 这个课程是面向计算机的 计算机表示数肯定是有误差的。 第一次课看到15分钟 10月25日&#xff0c;一分钟时间签到作为平时成绩&#xff…

表格金额的计算

因为数据库中的金额字段不适合表格中显示出来的金额值 &#xff0c;所以表格中的金额是需要计算的 &#xff0c;通过单价价格和数量计算出中的金额 &#xff0c;下面是表格的图片 因为是在测试所以其中的数据有点儿不太认真 &#xff0c;下面的是表格生成的js代码 ,具体实现的可…

Power BI 学习四:计算列、计算表、度量值

计算表 借助计算表&#xff0c;可以将新表添加到模型中。 但是&#xff0c;你会创建定义表值的数据分析表达式 (DAX) 公式&#xff0c;而非从数据源中查询值&#xff0c;并将值加载到新表的列中。 在 Power BI Desktop 中&#xff0c;计算表是通过使用报表视图或数据视图中的“…

如何计算算计?

再复杂的问题都不在“复”&#xff0c;而在“杂” ​ 计算以知为主&#xff0c;算计则是用良知&#xff08;德&#xff09;或恶知&#xff08;坏&#xff09;。 机器智能是外在驱动的非实时离线计算学习&#xff0c;人类智能是内在驱动的实时在线算计学习。 “算计”是从0到1&a…