React（2）{脚手架}

脚手架

环境搭建

①node环境 检测node环境 npm包管理工具

通过以下命令检测环境是否正常,如果提示非命令找不到等信息.说明环境坏了,重装

# 查看node版本 node -v

# npm 版本 npm -v

②镜像源

npm包的仓库地址 在国外的 国内下载很慢 一般会配置到国内源

# 查看当前源地址 如果为国内的就不用修改了

npm config get registry

# 设置国内源地址

npm config set registry https://registry.npm.taobao.org/

生成项目包

包下载过程中会有多依赖,这些依赖实际在包使用过程中不需要.下载下来存在本地又占用空间.npx临时解决依 赖问题,

用完即走,比npm安装更为清洁一些.

需要在哪儿创建项目包,以下命令就在哪儿执行

npx create-react-app reactpro

在生成项目包执行过程中,如果cmd命令行卡主不动了,敲击回车继续执行就可以了

生成项目完成后,注意查看提示信息.关键信息看 success 等

 

 

 进入目录,启动服务

cd reactpro

npm start

运行以上命令之后,会开启一个端口, 记得防火墙等安全软件一定要通过 .

正常启动图示 

浏览器查看的效果 

 访问流程

• 浏览器输入地址 localhost:3000 :localhost代表本地域名,在本地[本机,本电脑] 监听在3000端口的服务
• react自带了一个开发服务器,运行在3000端口
• 服务器默认返回index.html 根挂载点
• 隐藏操作 脚手架工具帮我们把 /src/index.js 引入到 /public/index.html
• index.js文件中,引入了 App.js 组件并插入渲染到div为id的容器中