React-6-脚手架

本文介绍了create-react-app的基本概念,包括其作为Facebook官方提供的React项目模板,如何通过简单的命令快速创建并配置项目。重点讲解了安装步骤、创建项目的过程以及脚手架项目的基本结构,有助于开发者高效开发React应用。
摘要由CSDN通过智能技术生成

1、介绍

React脚手架名称:create-react-app

什么是React脚手架:FaceBook的React团队官方出的一个快速构建React单页面应用的工具,用来帮助开发者创建一个基于React库的模板项目,项目引入了React及其它基础的依赖库(React、babel、webpack、eslint等),并且已经配置好了所需的环境,可以零配置直接运行

为什么使用React脚手架:

  • 无需配置开箱即用。
  • 集成配置了开发服务器(devServer),方便开发调试。
  • 模板项目源码目录解构清晰,方便添加自己的功能逻辑。

2、安装

安装React脚手架要求nodejs最低版本为14。

安装命令:npm i -g create-react-app

校验是否安装成功:create-react-app -V

3、创建脚手架项目

使用脚手架创建模板项目:create-react-app 项目名,(例如 create-react-app hello-react)。

命令运行结束后,会在当前目录生成一个项目名的目录,这个文件夹就是脚手架创建的React模板项目。

切换到脚手架创建的模板项目,运行npm start命令,打开浏览器访问http://localhost:3000,即可看到模板项目的欢迎页面。

在这里插入图片描述

4、脚手架项目结构

在这里插入图片描述

.git、.gitignore

脚手架创建的React模板项目,默认为其创建了git仓库。.git文件夹默认为隐藏状态。

package.json、package-lock.json

package.json:前端依赖包管理文件,用于定义项目所需的各种第三方前端依赖包

package-lock.json:用于锁定package.json文件中依赖包的版本号。

node_modules

根据package.json文件中的依赖包定义,下载的依赖包文件,本文件夹不需要提交git仓库。

README.md

本项目的介绍文件,描述了本项目如何调试运行、编译打包、展示配置等等。

public

静态资源文件夹。

src

源码文件夹。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值