react入坑记录(一)-vscode-react环境配置

简介:

环境安装

nodejs安装与配置

nodejs官网,目前nodejs稳定版: 8.12.0 npm 6.4.1 
安装完成之后可修改npm全局包的存放位置,仓库的位置

//全局包目录,就在node安装目录新建了个nodejs文件夹存放
npm config set prefix D:/nodejs/node_global/ 
//全局包缓存目录,就在node安装目录新建了个nodejs文件夹存放
npm config set cache D:/nodejs/node_cache/ 
//设置仓库为阿里镜像,
npm config set registry https://registry.npm.taobao.org/

npm设置完之后需在环境变量中将设置的全局包目录添加到path中

creat-react-app 安装

这个是官方出的react的脚手架,官方推荐使用yarn来进行包管理 ,这里使用的是npm有兴趣的可以去看看。

-g表示全局安装
npm install -g create-react-app

安装完成之后就可以使用creat-react-app 项目名称来创建项目了,项目名称不能包含大写字母。

vscode安装

官网,安装没啥好说的照着指引一步步做就可以了,安装完成之后会询问是否增加环境变量,增加重启机器后可以使用

//以指定目录为工作空间打开一个窗口,当前目录为"."
code 目录

针对react使用官方有一个指引,在这里就不赘述了。

其他

碰到的问题

使用create-react-app创建的项目,build的页面为空白页

// package.json 文件增加配置
"homepage": ".",

VSCODE中代码提醒的快捷键设置 
在[File-Preference-Keyboard Shortcusts]打开的页面中搜索 editor.action.triggerSuggest 换成 自己顺手的快捷键

参考资料

https://npm.taobao.org/ 
https://code.visualstudio.com/docs/nodejs/reactjs-tutorial 
https://www.jianshu.com/p/ec7c2bab16cc



目录
相关文章
|
资源调度 监控 前端开发
React Native环境配置、初始化项目、打包安装到手机,以及开发小知识
React Native环境配置、初始化项目、打包安装到手机,以及开发小知识
448 1
React Native环境配置、初始化项目、打包安装到手机,以及开发小知识
|
前端开发 JavaScript
React + webpack2 环境配置
创建 dev 目录,npm init --yes 生成 package.json,确保安装 webpack webpack-dev-server 1. 安装配置 Babel 它是一个 JavaScript 编译器。
1343 0
|
前端开发 JavaScript iOS开发
[React-Native]环境配置&HelloWorld
一、前言 手头有mac、有开发者证书,不想浪费资源,之前做过iOS开发,还会对移动开发表示关注,现在移动开发目前用Rect Native也是一个热潮,加上之前有web开发经验,然后就有了学习的冲动。
1327 0
|
前端开发 JavaScript 开发工具
React-Native-Android-Studio整合开发+环境配置+官方实例
linux下React Native开发环境搭建,使用Android-studio工具进行React Native整合开发。 参考React Native的官方文档,通过图文详细记录开发过程。可以查看本文档中涉及Github源码。 步骤1,2,3来配置React Native开发环境步骤4,5做react-native与Android运行demo整合开发。 1.
3459 0
|
6月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
362 0
|
6月前
|
存储 前端开发 JavaScript
【第34期】一文学会React组件传值
【第34期】一文学会React组件传值
77 0
|
6月前
|
前端开发
【第31期】一文学会用React Hooks组件编写组件
【第31期】一文学会用React Hooks组件编写组件
79 0
|
6月前
|
存储 前端开发 JavaScript
【第29期】一文学会用React类组件编写组件
【第29期】一文学会用React类组件编写组件
76 0
|
6月前
|
前端开发 开发者
【第26期】一文读懂React组件编写方式
【第26期】一文读懂React组件编写方式
64 0
|
6月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
122 0
下一篇
无影云桌面