React学习之坑(一)-环境搭建
来源:互联网 发布:互联网办公室装修 知乎 编辑:程序博客网 时间:2024/06/16 18:06
最近在学习react相关的知识,刚刚起步,一路遇坑不断。自己做个笔记,方便日后总结,也供相同趣味的小伙伴一起交流探讨。
学习时主要参考官网的教程:https://facebook.github.io/react/docs/hello-world.html 和部分网上的博客。
1.安装node。
去官网(https://nodejs.org/en/download/)下载最新的稳定版本,我安装的版本是6.11.2。(ps:尽量下载稳定版的,因为我刚弄的时候下载的是最新的版本,然后又一次跑一个命令一直卡在那里不动,后来重新安装了以后才好)。下载安装完以后在cmd界面输入 node -v 可以直接查看版本。
安装node时会自带一个npm的包管理工具,我们可以在命令行通过 npm -v 查看:
国内使用npm很慢,我们可以使用淘宝的镜像来代替原有的,在命令行输入: npm config set registry https://registry.npm.taobao.org 即可设置。
当我们安装好node以后,会自动将node设置系统的环境变量,将npm设置为系统的用户变量,可以在系统环境变量中查看。
我们通过npm install -g 安装的模块,都在用户变量(上左图)对应的路径中,比如这里示例下载一个 yarn 工具。
可以在日志信息中看到,刚刚安装的yarn在 {User}/AppData/Roaming/npm 文件夹中(ps:AppData是隐藏的文件夹):
2.安装create-react-app
安装create-react-app有利于我们快速创建一个react应用,安装命令: npm install -g create-react-app 。安装过程可能会比较慢,因为要下载很多模块及相应的依赖,如果一直卡的话建议检查一下网络设置或者改成淘宝的镜像。
3.创建并运行项目
在cmd中切换至工作空间,输入 create-react-app demo01 创建一个react项目,创建过程比较慢,理由同上。
这里是因为我上一步安装了yarn,所以成功的提示可能与你有所不同。这里我根据提示使用 yarn start 命令启动项目,没有安装yarn的可以输入 npm start
or
都可以看到成功的启动了项目:
下载我们根据页面的提示修改一下src/App.js里面的文件并保存,体验一把乐趣(虽然没什么乐趣)。修改的部分如下:
<p className="App-intro"> 开始React之坑的学习</p>
保存后可以看到浏览器实时的改变了:
至此,一个朴素的react工程就创建成功了。
4.在WebStorm中使用react创建并运行项目
实际开发中,我们可能需要一个IDE来帮助我们的提高开发效率,我使用的是JB公司的 WebStorm 2017.1.4。个人感觉挺好用,下面介绍一下在webstorm中集成react进行开发的介绍,只要前面的步骤都正确,这个集成是很简单的。我当初就没这运气,折腾了好久才成功。
首先创建一个项目:
这里点击创建项目后,就跟在命令行创建一样,也会下载很多东西,等一会就好了。
运行配置:
可以直接在WebStorm里面的终端直接运行命令:
也可以配置我们自己的运行,步骤如下:
(1)
(2)
(3)按如下设置应用后保存即可:
(4)点击运行,成功。
5.其他问题
1.在安装完node以后,安装create-react-app成功了,但是使用命令时总是报错:create-react-app不是内部或外部命令,也不是可运行的程序或批处理文件。
解决办法:看看create-react-app模块是否在上述步骤的用户变量(本例是:{User}/AppData/Roaming/npm)中,如果不在的话,说明你下载的路径和实际命令行找的命令路径不一致,需要手工设置。
查看npm所有配置的命令: npm config list
结果如下:
如果你的prefix不是你系统变量里面的对应的值,你需要设置成一致的,命令: npm config set prefix "D:\XXXXXX\XXXXX\XXX" 修改成功后在运行create-react-app即可。亲测有效。
以上,如果错误,欢迎指正,不胜感激。
- React学习之坑(一)-环境搭建
- React 学习(一)环境的搭建
- React Native学习笔记一之搭建开发环境
- React框架学习之react环境搭建
- React Native学习(一)——搭建开发环境
- React Native 开发环境搭建(一)学习
- 学习React Native(一)环境搭建
- React-Native学习一:环境搭建
- React Native 学习一 搭建开发环境
- React Native入门(一)之安装,环境搭建
- React.js学习之环境搭建
- 一.React-Native学习之Window环境下搭建环境配置
- React Native学习笔记(一)Mac OS X下React Native的环境搭建
- React Native Android(一)环境搭建
- React Native Android(一)环境搭建
- react native (一) 搭建环境
- React Native(一) 环境搭建
- hadoop 学习之(一)搭建环境
- 一,ESP8266下载和刷固件
- 微信下载app
- 网页JS切换中文简体/繁体
- 用flann实现K近邻查找的例子
- 2 Keys Keyboard问题及解法
- React学习之坑(一)-环境搭建
- SVM(2)-- Kernel
- 第三周项目三-体验复杂度2(汉诺塔问题)
- 主题模型学习总结
- 云监控服务使用教程详解
- 多线程
- 使用Cocoapods创建私有podspec
- 常用的20个正则表达式
- 【OI之路】02数论算法-4矩阵乘法