6、React脚手架

2024-06-08 23:34:51

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

源码文件夹。

6、React脚手架相关推荐

React学习笔记3：React脚手架
使用create-react-app创建react应用 react脚手架 xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目包含了所有需要的配置(语法检查.jsx编译.devServe ...
React脚手架搭建及目录结构介绍
react脚手架(create-react-app)搭建 npm install -g create-react-app create-react-app todolist (文件夹名) npm st ...
基于React脚手架集成Cesium
基于React脚手架集成Cesium 文章目录基于React脚手架集成Cesium 1. 安装环境 2. 创建项目 3. 引入Cesium 4. 修改文件 5. 参考链接 1. 安装环境安装Nod ...
react 引用本地js_从零配置webpack 4+react脚手架（二）
前言: 你可能也注意到了,html文件中的关于js的引用是我们手动写的,那假如我们改了输出路径或打包编译之后的文件名,那我们岂不是还要手动去修改html文件中的引用?我们怎么做到,像create-re ...
react 文件 md5_从零配置webpack 4+react脚手架（二）
前言: 你可能也注意到了,html文件中的关于js的引用是我们手动写的,那假如我们改了输出路径或打包编译之后的文件名,那我们岂不是还要手动去修改html文件中的引用?我们怎么做到,像create-re ...
react打包后图片丢失_React系列四 - React脚手架
一. 认识脚手架 1.1. 前端工程的复杂化如果我们只是开发几个小的demo程序,那么永远不需要考虑一些复杂的问题: 比如目录结构如何组织划分: 比如如何管理文件之间的相互依赖: 比如如何管理第三方 ...
偶然发现一个大佬写的 React 脚手架，叫Moderate, 用起来很方便
发现一个大佬写的 React 脚手架,叫Moderate, 用起来很方便 Moderate,意思为适中的,适度的,用这个作为代号,主要取决于他的本名"中用",其一以贯之的想法就是中 ...
React脚手架学习笔记
一.前端工程的复杂化如果我们只是开发几个小的demo程序,那么永远不需要考虑一些复杂的问题: 比如目录结构如何组织划分: 比如如何管理文件之间的相互依赖: 比如如何管理第三方模块的依赖: 比如项目发 ...
【Recat 应用】之 React 脚手架
Visual Studio Code 安装 React 插件 ES7 React/Redux/GraphQL/React-Native snippets 插件使用 create-react-app ...
React脚手架案例
React脚手架一初始化 react 脚手架需要理解的概念有: 脚手架的作用是什么脚手架的支持技术是什么?webpack(入口.出口.加载器.模式.插件) 脚手架将会做哪些工作 JSX的预解析 ...

最新文章

热门文章