React学习笔记(一)- 环境搭建

 

最近在学习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 .js框架的环境搭建的更多相关文章

  1. React.js学习之环境搭建

    1 工欲善其事必先利其器:前端开发工具 1.1 WebStorm和Sublime Text Sublime Text:作为代码编辑器,Sublime Text的优点如下: 主流前端开发编辑器 体积较小 ...

  2. 《Node.js入门》CentOS 6.5下Node.js Web开发环境搭建笔记

    近期想尝试一下英特尔的基于WebRTC协同通信开发套件,所以须要在本地搭建Node.js Web的开发測试环境. 这里讲的是CentOS 下的搭建方法.使用Windows的小伙伴请參考: <No ...

  3. node.js之开发环境搭建

    一.安装linux系统 (已安装linux可跳此步骤) 虚拟机推荐选择:VirtualBox 或者 Vmware (专业版永久激活码:5A02H-AU243-TZJ49-GTC7K-3C61N) 我这 ...

  4. React Native IOS ---基础环境搭建(前端架构师)

    React Native -IOS 开发环境搭建 web架构(基础) 安装依赖 * 必须安装的依赖有:Node.Watchman 和 React Native 命令行工具以及 Xcode. npm 镜 ...

  5. 13个精选的React JS框架

    如果你正在使用 React.js 或 React Native 创建用户界面,可以试一试本文推荐的这些框架. React.js 和 React Native 是流行的用户界面(UI)开发平台,且都是开 ...

  6. 1. react 基础 简介 及 环境搭建

    一.简介 由 Facebook 推出 2013 年 开源 的 函数式编程的 使用人数最多的 前端框架 拥有健全的文档与完善的社区 ( 官网 ) react 16 称为 React Fiber ( 底层 ...

  7. VueJS搭建简单后台管理系统框架(一)环境搭建

    做这份笔记的时候,Vue.js还是1.0,10月份Vue已经升级到2.0,这边也进行相应的更新,用Vue2.0进行一个简单的环境搭建 饿了么也刚好开源了其基于Vue.js的UI框架element-ui ...

  8. .NET Exceptionless 日志收集框架本地环境搭建

    一.简介 Exceptionless 是一个开源的实时的日志收集框架,它可以应用在基于 ASP.NET,ASP.NET Core,Web Api,Web Forms,WPF,Console,MVC 等 ...

  9. 1、手把手教React Native实战之环境搭建

    React Native 的宗旨是,学习一次,高效编写跨平台原生应用. 在Windows下搭建React Native Android开发环境 1.安装jdk 2.安装sdk    在墙的环境下,为了 ...

随机推荐

  1. 获取apk项目的MD5值和SHA1值

    一些可说可不说的话: * 以前有一个更简单的方法,在as的右边工具栏的 gradle 面板中可以很方便的获取到: * 上次用也是在2年前,时间长了给忘记了,不过我记得我当时写了笔记,这会笔记不在身边, ...

  2. Docker加速器(阿里云)

    1. 登录阿里开发者平台: https://dev.aliyun.com/search.html,https://cr.console.aliyun.com/#/accelerator,生成专属链接 ...

  3. Linux CentOS7.0 (04)systemctl vs chkconfig、service

    CentOS 7.0中已经没有service命令,而是启用了systemctl服务器命令 systemctl 是系统服务管理器命令,它实际上将 service 和 chkconfig 这两个命令组合到 ...

  4. GIT入门笔记(8)-- 查看历史提交记录/根据版本号回到过去或未来

    在Git中,用HEAD表示当前版本,也就是最新的提交版本, 上一个版本就是HEAD^, 上上一个版本就是HEAD^^, 往上100个版本写100个^比较容易数不过来,所以写成HEAD~100. Git ...

  5. 我的jquery validate 笔记

    <!DOCTYPE html><html lang="en">    <head>    <meta charset="UTF- ...

  6. CSS中容易混淆的伪元素类型和用法

    :first-of-type 匹配属于其父元素的第一个特定类型的子元素. 1.例子 <head> <meta charset="UTF-8"> <ti ...

  7. 通过wget工具下载指定文件中的URLs对应的资源并保存到指定的本地目录中去并进行文件完整性与可靠性校验

    创建URLs文件在终端输入cd target_directory回车,便把当前文件夹切换到了目标文件夹target_directory,此后创建的文件都会丢它里面在终端输入cat > URLs回 ...

  8. React-Native(六):React Native完整的demo项目

    该项目在http://www.lcode.org/study-react-native-opensource-two/上发现 更有意思的发现这个网站https://juejin.im/是采用vue.j ...

  9. MIT许可证

    MIT许可证(The MIT License)是许多软件授权条款中,被广泛使用的其中一种.与其他常见的软件授权条款(如GPL.LGPL.BSD)相比,MIT是相对宽松的软件授权条款. MIT 许可证几 ...

  10. hue集成hive访问报database is locked

    这个问题这应该是hue默认的SQLite数据库出现错误,你可以使用mysql postgresql等来替换 hue默认使用sqlite作为元数据库,不推荐在生产环境中使用.会经常出现database ...