React.js 基本环境安装
安装 React.js
React.js 单独使用基本上是不可能的事情。不要指望着类似于 jQuery 下载放到 <head /> 标签就开始使用。使用 React.js 不管在开发阶段生产阶段都需要一堆工具和库辅助，编译阶段你需要借助 Babel；需要 Redux 等第三方的状态管理工具来组织代码；如果你要写单页面应用那么你需要 React-router。这就是所谓的“React.js全家桶”。
本课程不会教大家如何配置这些东西，因为这不是课程的重点，网上有很多的资料，大家可以去参考那些资料。我们这里会直接使用 React.js 官网所推荐使用的工具 create-react-app 工具。它可以帮助我们一键生成所需要的工程目录，并帮我们做好各种配置和依赖，也帮我们隐藏了这些配置的细节。也就是所谓的“开箱即用”。
工具地址：https://github.com/facebookincubator/create-react-app
在安装之前要确认你的机器上安装了 node.js 环境包括 npm。如果没有安装的同学可以到 node.js 的官网下载自己电脑的对应的安装包来安装好环境。
安装好环境以后，只需要按照官网的指引安装 create-react-app 即可。
npm install -g create-react-app
这条命令会往我们的机器上安装一条叫 create-react-app 的命令，安装好以后就可以直接使用它来构建一个 react 的前端工程：
create-react-app hello-react
这条命令会帮我们构建一个叫 hello-react 的工程，并且会自动地帮助我们安装所需要的依赖，现在只需要安静地等待它安装完。
额外的小贴士：
如果有些同学安装过程比较慢，那是很有可能是因为 npm 下载的时候是从国外的源下载的缘故。所以可以把 npm 的源改成国内的 taobao 的源，这样会加速下载过程。在执行上面的命令之前可以先修改一下 npm 的源：
npm config set registry https://registry.npm.taobao.org
下载完以后我们就可以启动工程了，进入工程目录然后通过 npm 启动工程：
cd hello-react
npm start
终端提示成功：
并且会自动打开浏览器，就可以看到 React 的工程顺利运行的效果：
这时候我们把 src/App.js 文件中的 <h2> 标签的内容修改为 Hello React，
<h2>Hello React</h2>
保存一下，然后户就会发现浏览器自动刷新，并且我们的修改也生效了：
到这里我们的环境已经安装好了，并且顺利地运行了我们第一个例子。接下来我们会探讨 React.js 的组件的基本写法。
React.js 基本环境安装的更多相关文章
- React.js 小书 Lesson5 - React.js 基本环境安装
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson5 转载请注明出处,保留原文链接和作者信息. 安装 React.js React.js 单独使 ...
- [转载]Sublime Text 3 搭建 React.js 开发环境
［转载］Sublime Text 3 搭建 React.js 开发环境 Sublime有很强的自定义功能,插件库很庞大,针对新语言插件更新很快,配合使用可以快速搭建适配语言的开发环境. 1. babe ...
- React Native 开发环境安装和配置使用报错: -bash: react-native: command not found
[React Native 开发环境安装和配置:-bash: react-native: command not found 报错: 前提是安装homebrew,node.js ,npm ,watc ...
- Sublime Text 3 搭建 React.js 开发环境
sublime有很强的自定义功能,插件库很庞大,针对新语言插件更新很快,配合使用可以快速搭建适配语言的开发环境. 1. babel 支持ES6, React.js, jsx代码高亮,对 JavaScr ...
- 【NodeJS】Node.JS 开发环境安装
1.前言 简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台. Node.js是一个事件驱动I/O ...
- React.js 小书介绍
React.js 小书 Github 关于作者 这是一本关于 React.js 的小书. 因为工作中一直在使用 React.js,也一直以来想总结一下自己关于 React.js 的一些知识.经验.于是 ...
- 【React.js小书】动手实现 React-redux（五）：Provider - 方志
我们要把 context 相关的代码从所有业务组件中清除出去,现在的代码里面还有一个地方是被污染的.那就是 src/index.js 里面的 Index: 1234567891011121314151 ...
- ES6 学习笔记 （2）-- Liunx环境安装Node.js 与 搭建 Node.js 开发环境
笔记参考来源:廖雪峰老师的javascript全栈教程 一.安装Node.js 目前Node.js的最新版本是6.2.x.首先,从Node.js官网下载对应平台的安装程序. 1.下载 选择对应的Liu ...
- 搭建基本的React Native开发环境
步骤如下: 1.安装HomeBrew,命令如下: 在终端输入命令:$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Home ...
随机推荐
- hdu 1879 继续畅通project
本题链接:pid=1879http://">点击打开链接 本题大意: 输入n行数据.每行数据前两个表示该条路连通的两个村庄的编号,第三个表示修该条路的成本.最后的0或1表示该路未修或已 ...
- 网络基础笔记——OSI七层模型
OSI七层模型 由于整个网络连接的过程相当复杂,包含硬件.软件数据封包与应用程序的互相链接等等.假设想要写一支将联网所有功能都串连在一块的程序.那么当某个小环节出现故障时,整仅仅程序都须要改写.所以我 ...
- LoadRunner系列之—-03 用Java Vuser协议编写接口测试脚本
待测试接口用java语言实现,且项目中调用该接口需要用专门的jar包.这种情况可以用Java Vuser协议实现接口调用脚本,类似java代码. 代码样例如下: /* * LoadRunner Jav ...
- C#实现如何判断一个数组中是否有重复的元素 返回一个数组升序排列后的位置信息--C#程序举例 求生欲很强的数据库 别跟我谈EF抵抗并发，敢问你到底会不会用EntityFramework
C#实现如何判断一个数组中是否有重复的元素 如何判断一个数组中是否有重复的元素 实现判断数组中是否包含有重复的元素方法 这里用C#代码给出实例 方法一:可以新建一个hashtable利用hasht ...
- sql server 系统常用函数：聚合函数 数学函数 字符串函数 日期和时间函数和自定义函数
一.系统函数 1.聚合函数 聚合函数常用于GROUP BY子句,在SQL Server 2008提供的所有聚合函数中,除了COUNT函数以外,聚合函数都会忽略空值AVG.COUNT.COUNT_BIG ...
- Linux学习笔记：系统启动引导过程
Linux系统启动引导过程 近期发现自己在仅仅是掌握上有几个比較硬的伤: 一.知识体系碎片,比方Linux,这学点那学点,结果没有成体系,串不起来: 二.记忆时间短暂,非常多的内容学了就忘,最后的结果 ...
- Codeforces 757 D. Felicity's Big Secret Revealed 状压DP
D. Felicity's Big Secret Revealed The gym leaders were fascinated by the evolutions which took pla ...
- 云Hbase数据库在亿方云实践之路
本文主要先介绍了亿方云,进而谈及了数据架构,着重分析了HBase实践等 2017云栖大会HBase专场,亿方云科技CTO 王成军带来HBase在亿方云客户端同步系统中的应用实践的演讲.本文主要先介绍了 ...
- webService和RMI
1.请求: servlet:提供了请求/响应模式,是JAVA的一种规范,只能使用于java上,用来替代早期使用的难懂的CGI,是一种无状态的请求响应,客户端访问一个服务器的url,只需要发送简单的ht ...
- SoapUI中Code多行显示设置
你们的SoapUI 有设置下面的选项吗? Before adding your project, we recommend that you enable the following ReadyAPI ...