React（二）react脚手架的搭建

2024-05-14 04:53:30

目录

一、搭建本地开发环境

二、创建 React 脚手架项目

三、VS Code 启动脚手架项目

React脚手架我们所用的其中一个是Create React App，Create React App 是一个用于学习 React 的舒适环境，也是用 React 创建新的单页应用的最佳方式。它会配置你的开发环境，以便使你能够使用最新的 JavaScript 特性，提供良好的开发体验，并为生产环境优化你的应用程序。

一、搭建本地开发环境

使用 React 脚手架搭建项目之前先要确定自己的电脑是否有支持的本地开发环境；据官网建议系统中Node和npm版本要求如下：

所以我们在cmd下执行命令查看Node和npm版本是否符合要求：

npm默认的源地址在国外，如果网速不太好，可以将其配置到国内源；命令如下：

# 配置国内源
npm config set registry https://registry.npm.taobao.org# 配置源地址
npm config set registry http://www.npmjs.org# 查看当前环境源地址
npm config get registry

环境准备完成后就可以生成项目包了；

二、创建 React 脚手架项目

（1）在创建好的文件夹内打开命令提示行工具，输入命令 npx create-react-app 项目名创建一个新的项目；

（2）等待一段时间过后会出现成功提示；

（3）按照提示先进入项目名称文件夹 cd reactpro ，然后输入启动命令 npm start ，可以看到，启用的是http://localhost:3000/

（4）启动之后会自动在浏览器展示该项目的首页。

三、VS Code 启动脚手架项目

能够正常展示首页就说明我们项目包创建成功，接下来就可以在编程软件中打开了，推荐 Visual Studio Code。React脚手架项目结构如下：

启动脚手架项目：

（1）点击 package.json 文件 --> 右键 --> 在集成终端打开；

（2）在终端控制台中输入 npm start --> 回车；

（3）显示以下提示，项目启动成功。

补充 npm 命令：

npm uninstall 包名称  //卸载npm list | findStr 包名称  //查看包是否安装

React（二）react脚手架的搭建相关推荐

React的概述脚手架的搭建JSX语法组件
什么是React React是一个用于构建用户界面的javaScript库,起源于facebook的内部项目,后续在13年开源了出来特点声明式你只需要描述UI看起来是什么样式,就跟写HTML一样 ...
React学习：脚手架搭建、antd引入-学习笔记
文章目录 React学习:脚手架搭建.antd引入-学习笔记脚手架搭建项目目录结构 antd引入 antd附加:数据可放置的三个位置 React学习:脚手架搭建.antd引入-学习笔记脚手架搭建 ...
利用脚手架工具搭建一个新的react项目
利用脚手架工具搭建一个新的react项目一,工程架构 1.使用的是create-react-app脚手架工具搭建的工程架构 npm install create-react-app -g全局安装 c ...
【React】React全栈脚手架搭建-苹果篮子示例
接着上一章,脚手架已经搭建完毕,接下来便可以编写组件,先上效果图: 对苹果篮子页面进行组件切割根据视图,我们可以将其切割为两部分 AppleItem:里面的苹果列表项 AppleBasket:包着苹 ...
react快速开始(二)-使用脚手架Create React App创建react应用
文章目录 react快速开始(二)-Create React App入门什么是Create React App 快速开始使用IDE webstrom创建react项目 create react a ...
【react storybook】从零搭建react脚手架，并使用storybook发布组件库到npm，并生成可视化UI文档
storybook 成品展示开发准备开发组件写MDX文档发布文档发布组件成品展示可视化UI文档页面: 可视化UI文档地址: https://guozia007.gitee.io/stor ...
小邵教你玩转Typescript、ts版React全家桶脚手架
前言:大家好,我叫邵威儒,大家都喜欢喊我小邵,学的金融专业却凭借兴趣爱好入了程序猿的坑,从大学买的第一本vb和自学vb,我就与编程结下不解之缘,随后自学易语言写游戏辅助.交易软件,至今进入了前端领域, ...
React学习笔记一(React入门+JSX+脚手架)
文章目录 1. React介绍和特点 1.1 React是什么 1.2 React的特点 2. React的开发依赖 2.1 React的三个依赖 2.2 Babel和React的关系 2.3 Rea ...
初学react native（脚手架与expo一些报错）
移动APP 移动指的是移动设备平台, app 是应用 (application) 的缩写, 移动App就是移动设备上运行的应用程序种类划分 WebAPP:网页应用, 需要运行在浏览器环境中, 无需安 ...
【React】React介绍环境搭建
一.React介绍 1.React是什么一个专注于构建用户界面的 JavaScript 库,和vue和angular并称前端三大框架,不夸张的说,react引领了很多新思想,世界范围内是最流行的js ...

最新文章

热门文章