使用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