14. React的脚手架的基本使用

最新推荐文章于 2023-09-01 22:31:23 发布
最新推荐文章于 2023-09-01 22:31:23 发布
阅读量298 收藏
点赞数
分类专栏： React 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq28129019/article/details/115393835
版权

文章目录

1. 搭建脚手架环境

1.1 react的脚手架库 create-react-app

  • 用于创建react项目

1.2 项目的整体技术架构

  • react
  • webpack
  • es6
  • eslint
  • 等等

1.3使用脚手架的优点

  • 模块化
  • 组件化
  • 工程化

1.4 环境搭建步骤

1.4.1 安装npm

  • 安装node，node自带npm
npm 配置淘宝镜像
  • npm查看镜像路径
npm config get registry
  • npm配置淘宝镜像
npm config set registry https://registry.npm.taobao.org

1.4.2 安装 yarn

  • 通过npm安装yarn
  • npm install -g yarn 或者 npm i -g yarn
yarn 配置淘宝镜像
  • yarn 查看镜像路径
yarn config get registry
  • yarn 配置淘宝路径
yarn config set registry https://registry.npm.taobao.org
  • yarn 命令
yarn  add  依赖包  	  ========  npm install  依赖包
yarn remove 依赖包 	  ========  npm uninstall  依赖包
yarn               	  ========  npm  i       // 安装全部依赖包
yarn -y init       	  =======  npm -y init  // 创建package.json文件
yarn add global 依赖包 =======  npm i -g 依赖包  // 全局方式装包

1.4.3 yarn eject(谨慎使用，不可逆操作)

  • 暴露脚手架核心配置
  • 不可以逆操作
  • 暴露出两个文件夹
    • config 支撑脚手架运行的配置
    • scripts

1.4.4 安装 create-react-app

npm install -g create-react-app

或者

npm i -g create-react-app
  • install 或者 i 表示安装的意思
  • -g 表示是全局安装

1.4.5 创建项目

（1）手动创目录A，用于存放不同项目
  • 创建目录A之后，cmd 进入目录A
  • A可以是任何英文名
（2）进入目录A，create-react-app 项目名
create-react-app test01
  • 在目录A中,创建项目，并等待下载安装完成
（3）进入项目根路径，启动项目
  • npm start
  • 或者 yarn start

2. 查看项目

2.1 查看项目结构

public ---- 静态资源文件夹
		favicon.icon ------ 网站页签图标
		index.html -------- 主页面
		logo192.png ------- logo图
		logo512.png ------- logo图
		manifest.json ----- 应用加壳的配置文件
		robots.txt -------- 爬虫协议文件
src ---- 源码文件夹
		App.css -------- App组件的样式
		App.js --------- App组件
		App.test.js ---- 用于给App做测试
		index.css ------ 样式
		index.js ------- 入口文件
		logo.svg ------- logo图
		reportWebVitals.js
			--- 页面性能分析文件(需要web-vitals库的支持)
		setupTests.js
			---- 组件单元测试的文件(需要jest-dom库的支持)

2.2 查看 public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!--public文件夹的路径-->
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <!--开启理想视口，用于移动端的适配-->
    <meta name="viewport"
最低0.47元/天 解锁文章
神奇洋葱头
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
React脚手架，用于快速搭建React项目
06-04
React脚手架是一种工具，它简化了创建新React项目的初始设置过程。React是Facebook开发的JavaScript库，专门用于构建用户界面，尤其是单页应用程序（SPA）。JavaScript则是一种广泛使用的编程语言，是Web开发的核心...
React09——使用脚手架编程
小白的学习路
03-22 522
使用create-react-app创建react应用 react脚手架 xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目 包含了所有需要的配置（语法检查、jsx编译、devServer…） 下载好了所有相关的依赖 可以直接运行一个简单效果 react提供了一个用于创建react项目的脚手架库: create-react-app 项目的整体技术架构为: react + webpack + es6 + eslint 使用脚手架开发的项目的特点: 模块化, 组件化,..
react快速开始(三)-create-react-app脚手架项目启动；使用VScode调试react
最新发布
西京刀客
09-01 2171
create-react-app（以下简称cra）作为react官方提供的脚手架工具，是目前生成react项目一个非常常用和主流的工具。很多企业级的应用搭建也是基于这个脚手架工具上二次开发~
React脚手架的使用
m0_63400611的博客
08-04 103
npm v5.2.0引入的一条命令目的:提升包内提供的命令行工具的使用体验原来: 先安装脚手架包,在使用这个包中提供的命令现在: 无需安装脚手架包,就可以直接使用这个包提供的命令。
React--》超详细教程——React脚手架的搭建与使用
热门推荐
ztK63LrD的博客
01-15 1万+
React脚手架是开发现代Web应用的必备，其充分利用Webpack、Babel、ESlint等工具辅助项目的开发，当然这些工具也无需手动配置即可使用，脚手架的意义更多的是关注的是业务而不是工具的配置；项目的整体技术架构为：react + webpack + es6 + eslint。使用脚手架开发项目的特点：模块化、组件化、工程化。
React脚手架及使用 (适用于初学者~)
a895544608的博客
06-23 292
React
一.React入门 create-react-app使用
09-03
Create-React-App是Facebook官方提供的一个脚手架工具，可以快速初始化一个符合最佳实践的React项目。要使用CRA，首先确保安装了Node.js环境，然后通过以下命令全局安装CRA： ``` npm install -g create-react-...
react项目脚手架
05-06
React脚手架创建的项目默认使用了Babel来转换ES6+语法，确保代码能在广泛支持的浏览器中运行。此外，还内置了Webpack作为模块打包工具，负责处理静态资源的优化和打包。项目中使用了Jest和Enzyme进行单元测试，提供...
从零开始学习搭建React脚手架项目
10-18
React脚手架项目可以帮助我们快速搭建一个基本的项目结构，以便我们专注于编写业务逻辑。 使用Create-React-App搭建React脚手架项目 Create-React-App是一个官方提供的脚手架工具，可以帮助我们快速搭建一个React...
react-支持目前非常主流的一些特性react脚手架
08-15
webpack4 react react-router-dom react-redux rematch utils antd-moblie脚手架
digitous.react.js
02-11
另外，由于项目名称包含"react.js"，我们可以推断它可能使用了create-react-app或者类似的脚手架来快速初始化项目。这样的脚手架通常会提供一套完整的开发环境配置，包括热重载、自动编译、错误警告等功能，极大地...
使用脚手架创建及运行react项目
m0_69895544的博客
08-17 5213
转载简书创建react项目文章，稍作修改。
react脚手架
fang.lovest.yang的博客
10-21 1644
1.脚手架简介 xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目 包含了所有需要的配置（语法检查、jsx编译、devServer…） 下载好了所有相关的依赖 可以直接运行一个简单效果 react提供了一个用于创建react项目的脚手架库: create-react-app 项目的整体技术架构为: react + webpack + es6 + eslint 使用脚手架开发的项目的特点: 模块化, 组件化, 工程化 2.脚手架搭建步骤 第一步，全局安装：np.
React 系列一： Hello React
XHSRookies的博客
07-17 174
快来加入我们吧！ "小和山的菜鸟们"，为前端开发者提供技术相关资讯以及系列基础文章。为更好的用户体验，请您移至我们官网小和山的菜鸟们 ( https://xhs-rookies.com/ ) 进行学习，及时获取最新文章。 "Code tailor" ，如果您对我们文章感兴趣、或是想提一些建议，微信关注 “小和山的菜鸟们” 公众号，与我们取的联系，您也可以在微信上观看我们的文章。每一个建议或是赞同都是对我们极大的鼓励！ 前言 这节我们将教你如何导入 React 并带领你编写出一个简单的 React 页面。 本
React 基本脚手架
qq_42676042的博客
09-19 254
react ant design chart 使用
React脚手架
qq_45669178的博客
04-03 799
一、脚手架 vsc插件： ①切实同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。 ②在线监测数据是否为json数据。 1、react安装 1）全局安装脚手架 npm install -g create-react-app 2）初始化 npm init 3)创建项目 create-react-app 项目名 4）切到创建的项目里 cd 项目名 5）启动 ...
React全家桶（三）React脚手架
m0_55990909的博客
04-19 2089
React脚手架 1、React脚手架 React脚手架的概念： React脚手架和Vue脚手架类似，都是用来帮助程序员快速创建一个基于React的模板项目，包含了 所有需要的配置（语法检查、jsx编译、devServer…） 下载好了所有相关的依赖（基础的依赖库） 可以直接运行一个简单效果 项目的整体技术架构为: react + webpack + es6 + eslint React脚手架的优点： ● 无需配置； ● 集成了对 React, JSX, ES6 和 Flow 的
推荐一个react脚手架工具
weixin_30810239的博客
05-03 100
今天介绍一个react脚手架，react-cli, 可以说是vue-cli的外表，react的心！ 安装步骤： npm install -g sao sao yang302/react-cli new-project --install cd new-project npm install npm run dev npm run build npm ru...
react脚手架概述
08-16
React脚手架是一种用于快速搭建React应用程序的工具集合。它提供了一个基本的项目结构和一些预设的配置，使得开发者可以更加专注于业务逻辑而不必花费太多时间在项目的设置上。 React脚手架通常包括以下主要功能： ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

神奇洋葱头

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值