最近在学习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学习笔记(一)- 环境搭建的更多相关文章

  1. Android Studio 学习笔记(一)环境搭建、文件目录等相关说明

    Android Studio 学习笔记(一)环境搭建.文件目录等相关说明 引入 对APP开发而言,Android和iOS是两大主流开发平台,其中区别在于 Android用java语言,用Android ...

  2. 我的Java学习笔记 -开发环境搭建

    开始学习Java~ 一.Java简介 Java编程语言是一种简单.面向对象.分布式.解释型.健壮安全.与系统无关.可移植.高性能.多线程和动态的语言. Java分为三个体系: JavaSE(J2SE) ...

  3. Django学习笔记 开发环境搭建

    为什么使用django?1.支持快速开发:用python开发:数据库ORM系统,并不需要我们手动地构造SQL语句,而是用python的对象访问数据库,能够提升开发效率.2.大量内置应用:后台管理系统a ...

  4. cocos2d-x lua 学习笔记(1) -- 环境搭建

    Cocos2d-x 3.0以上版本的环境搭建和之前的Cocos2d-x 2.0 版差异较大的,同时从Cocos2d-x 3.0项目打包成apk安卓应用文件,搭建安卓环境的步骤有点繁琐,但搭建一次之后, ...

  5. SpringData JPA的学习笔记之环境搭建

    一.环境搭建 1.加入jar包   spring jar+jpa jar +springData jar >>SpringData jar包     2.配置applicationCont ...

  6. Mybatis学习笔记之---环境搭建与入门

    Mybatis环境搭建与入门 (一)环境搭建 (1)第一步:创建maven工程并导入jar包 <dependencies> <dependency> <groupId&g ...

  7. 前端框架vue学习笔记:环境搭建

    兼容性 不兼容IE8以下 Vue Devtools 能够更好的对界面进行审查和调试 环境搭建 1.nodejs(新版本的集成了npm)[npm是node包管理 node package manager ...

  8. Web安全测试学习笔记 - vulhub环境搭建

    Vulhub和DVWA一样,也是开源漏洞靶场,地址:https://github.com/vulhub/vulhub 环境搭建过程如下: 1. 下载和安装Ubuntu 16.04镜像,镜像地址:htt ...

  9. 【Django学习笔记】-环境搭建

    对于初学django新手,根据以下步骤可以快速进行Django环境搭建 虚拟环境创建 使用virtualenv创建并启用虚拟机环境 ,关于virtualenv可参考https://www.yuque. ...

  10. go 学习笔记之环境搭建

    千里之行始于足下,开始 Go 语言学习之旅前,首先要搭建好本地开发环境,然后就可以放心大胆瞎折腾了. Go 的环境安装和其他语言安装没什么特别注意之处,下载安装包下一步下一步直到完成,可能唯一需要注意 ...

随机推荐

  1. 安装CentOS7,连接mysql提示密码错误

    1.grep 'temporary password' /var/log/mysqld.log 如果上面命令没有查看到密码 2.修改my.cnf文件.在mysqld下加入skip-grant-tabl ...

  2. PHP模式设计之单例模式、工厂模式、注册树模式、适配器模式、观察者模式

    php模式设计之单例模式 什么是单例模式? 单例模式是指在整个应用中只有一个实例对象的设计模式 为什么要用单例模式? php经常要链接数据库,如果在一个项目中频繁建立连接数据库,会造成服务器资源的很大 ...

  3. 从感知机到 SVM,再到深度学习(一)

        在上篇博客中提到,如果想要拟合一些空间中的点,可以用最小二乘法,最小二乘法其实是以样例点和理论值之间的误差最小作为目标.那么换个场景,如果有两类不同的点,而我们不想要拟合这些点,而是想找到一条 ...

  4. SpringBoot集成Mybatis

    1.创建SpringBoot工程 根据 http://www.cnblogs.com/vitasyuan/p/8765329.html 说明创建SpringBoot项目. 2.添加相关依赖 在pom. ...

  5. tensorflow让程序学习到函数y = ax + b中a和b的值

    今天我们通过tensorflow来实现一个简单的小例子: 假如我定义一个一元一次函数y = 0.1x + 0.3,然后我在程序中定义两个变量 Weight 和 biases 怎么让我的这两个变量自己学 ...

  6. AQS源码阅读笔记(一)

    AQS源码阅读笔记 先看下这个类张非常重要的一个静态内部类Node.如下: static final class Node { //表示当前节点以共享模式等待锁 static final Node S ...

  7. url的解码方式

    #coding:utf-8 import urllib legal_person_string = "%E6%B3%95%E5%AE%9A%E4%BB%A3%E8%A1%A8%E4%BA%B ...

  8. iOS10 越狱, openSSH

    iOS 10 已经可以越狱, 不过比较蛋疼的是非完美越狱,每次重启都要从新越狱. 感兴趣的同学可以尝试一下,本人使用同步推上的教程,亲测可用. 越狱完后想安装OpenSSH, 在Cydia上搜索安装, ...

  9. JS事件练习题

    1.点击按钮连续弹窗5次 <div class="noe"> <div class="noe1" onClick="n()" ...

  10. Xshell5下利用sftp上传下载传输文件

    sftp是Secure File Transfer Protocol的缩写,安全文件传送协议.可以为传输文件提供一种安全的加密方法.sftp 与 ftp 有着几乎一样的语法和功能.SFTP 为 SSH ...