使用Mac初始化一个react项目(完整)

1、安装JavaScript包的管理器(使⽤npm指令管理项⽬所依赖的JavaScript库)
(1)由于npm库最先是Node.js项目使⽤的包管理⼯工具，后来流行成为所有的前端JavaScript库的 包管理理工具。所以先下载安装npm，直接进入到Node.js官网上下载安装。
https://nodejs.org/en/
操作:下载安装。
测试:

npm -v //得到安装的版本号

(2)由于npm使⽤了很多国外的服务器镜像地址，国内访问速度很慢，所以有淘宝的镜像(10min同步一次)
指令:

npm install -g cnpm --registry=https://registry.npm.taobao.org

测试:

cnpm -v //得到安装淘宝镜像npm的版本号

(3)永久更改npm使⽤的源地址
指令:

npm config get registry //得到现在的默认源地址

配置:

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

测试:

npm config get registry

2、安装React项目初始化的安装器 (本质上是一个node执行的js⽂文件)
指令:

cnpm install -g create-react-app

测试:

create-react-app

3、创建第一个React前端页⾯项目
指令:

create-react-app fapp-test

测试:

cd fapp-test

启动:

npm start

使⽤浏览器可以观测，有一个react所做的⻚面。http://localhost:3000/

4、为fapp-test项⽬安装其他依赖包
(1)⼦项目依赖包
指令:

cd fapp-test

安装:

npm install redux react-redux redux-thunk react-router-dom connected-react-router --save

(2)调试辅助依赖包(配合谷歌浏览器使⽤)
指令:

npm install redux-devtools-extension --save

5、安装谷歌浏览器测试插件
(1)React Devtools(可以检视React组件的树形结构)
下载地址:
https://chrome.google.com/web…

(2)Redux Devtools(可以检视Redux数据流，可以将Store状态跳跃到任何⼀个历史状态)
下载地址:
https://chrome.google.com/web…

6、配合Visual Studio Code使用，安装智能提示插件
(1)Full React/React Native/React Router/Redux/GraphQL/ES7/Testing/PropTypes snippets
(2)React+Redux Snippets

• 点赞
• 收藏
• 分享
• 文章举报

larvide 发布了4 篇原创文章 · 获赞 1 · 访问量 342 私信 关注