React(二)react脚手架的搭建

简介: React(二)react脚手架的搭建

一、搭建本地开发环境

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

image.png

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

image.png



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 项目名 创建一个新的项目;

image.png



(2)等待一段时间过后会出现成功提示;

image.png



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

image.png



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

image.png



三、VS Code 启动脚手架项目

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

image.png



启动脚手架项目:


(1)点击 package.json 文件 --> 右键 --> 在集成终端打开;

image.png



(2)在终端控制台中输入 npm start --> 回车;

image.png



(3)显示以下提示,项目启动成功。

image.png



补充 npm 命令:


npm uninstall 包名称  //卸载
npm list | findStr 包名称  //查看包是否安装
相关文章
|
前端开发
React-脚手架
React-脚手架
90 0
|
3月前
|
前端开发
React | 修改React脚手架的默认端口号?
React | 修改React脚手架的默认端口号?
156 64
|
2月前
|
XML 前端开发 JavaScript
react学习笔记一:入门级小白到脚手架(create-react-app)开发项目
这篇文章是React的学习笔记,覆盖了从React的基础用法到高级特性,包括组件化、状态管理、生命周期、虚拟DOM等主题,适合React初学者参考。
106 0
react学习笔记一:入门级小白到脚手架(create-react-app)开发项目
|
1月前
|
前端开发 JavaScript
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
|
3月前
|
前端开发 NoSQL MongoDB
React技术栈-基于react脚手架编写评论管理案例
这篇文章介绍了在MongoDB中使用sort和投影来对查询结果进行排序和限制返回的字段,通过具体的命令示例展示了如何实现这些操作。
55 6
React技术栈-基于react脚手架编写评论管理案例
|
3月前
|
前端开发 JavaScript
React技术栈-react的脚手架创建应用案例
本文介绍了如何使用React的官方脚手架工具create-react-app快速创建React项目,并展示了项目的目录结构和基本的代码文件,以及如何启动和运行React应用。
37 2
|
4月前
|
前端开发 JavaScript 中间件
React脚手架create-react-app简介
【8月更文挑战第13天】React脚手架create-react-app简介
261 4
|
5月前
|
资源调度 前端开发 C++
react环境搭建,及脚手架使用
react环境搭建,及脚手架使用
|
7月前
|
前端开发 JavaScript 开发者
React 项目用过什么脚手架(本题是开放性题目)
React 项目用过什么脚手架(本题是开放性题目)
60 0
|
缓存 JavaScript 前端开发
Windows7压缩包安装node.js 报错提示windows Server 2012 R2 和安装React脚手架 最详细教程
对于Windows 7安装node.js 提示“This application is only supported on wWindows 8.1,windows Server 2012 R2, or higher.”类似这种情况的,该问题是因为node.js官方在 x12版本后就不支持win7系统了。