安装 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 基本环境安装的更多相关文章

  1. 【React.js小书】动手实现 React-redux（五）：Provider - 方志

    我们要把 context 相关的代码从所有业务组件中清除出去,现在的代码里面还有一个地方是被污染的.那就是 src/index.js 里面的 Index: 1234567891011121314151 ...

  2. React.js 小书介绍

    React.js 小书 Github 关于作者 这是一本关于 React.js 的小书. 因为工作中一直在使用 React.js,也一直以来想总结一下自己关于 React.js 的一些知识.经验.于是 ...

  3. React.js小书总结

    (迁移自旧博客2017 08 27) 第一阶段 react的组件相当于MVC里面的View. react.js 将帮助我们将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合.嵌套,就成 ...

  4. 很赞的一个教程： React.js 小书

    很赞,  React.js 小书        http://huziketang.com/books/react/ 推荐阅读入门, 照着来一遍,能会个七七八八, 更多的还需要多写 import Re ...

  5. React.js 小书 Lesson25 - 实战分析：评论功能（四）

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson25 转载请注明出处,保留原文链接和作者信息. (本文未审核) 目前为止,第二阶段知识已经基本 ...

  6. React.js 小书 Lesson26 - 实战分析：评论功能（五）

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson26 转载请注明出处,保留原文链接和作者信息. (本文未审核) 持久化评论 同样地,可以通过类 ...

  7. React.js 小书 Lesson24 - PropTypes 和组件参数验证

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson24 转载请注明出处,保留原文链接和作者信息. 我们来了到了一个非常尴尬的章节,很多初学的朋友 ...

  8. React.js 小书 Lesson23 - dangerouslySetHTML 和 style 属性

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson23 转载请注明出处,保留原文链接和作者信息. 这一节我们来补充两个之前没有提到的属性,但是在 ...

  9. React.js 小书 Lesson21 - ref 和 React.js 中的 DOM 操作

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson21 转载请注明出处,保留原文链接和作者信息. 在 React.js 当中你基本不需要和 DO ...

随机推荐

  1. C#使用Newtonsoft.Json操作json

    1.下载 Newtonsoft.Json 右键引用,选择 管理NuGet程序包,选择浏览,输入log4net,然后点击下载 2.json数据的组装与解析 public class Class { pu ...

  2. ASP.NET网页动态添加数据行

    一看到这标题<ASP.NET网页动态添加数据行>,想起来似乎有点难实现.因为网页的周期性原因,往往在PostBack之后,状态难于有所保留.但Insus.NET又想实现这样的效果,用户点击 ...

  3. meta标签使用

    META标签分两大部分:HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME). ★HTTP-EQUIV HTTP-EQUIV类似于HTTP的头部协议,它回应给浏览器一些有用的信息,以帮助 ...

  4. 图片展示js特效

    html 代码片段,做一个table表格 <table width="798" height="276" border="0" ali ...

  5. 条件概率全概率公式-Tribles

    条件概率,全概率公式,贝叶斯公式 条件概率:在另外一个事件 B 已经发生的条件下,事件 A 发生的概率叫做在 A 对于 B 的条件概率,记作 \(p(A|B)\).显然\(p(AB)=p(A|B)p( ...

  6. ios swift 打造自己的http请求工具

    在ios开发中,网络请求是不可以少的,说到网络请求可能用的最多的就是第三方的比人比较有名的AFNetworking.Alamofire等,原生的用的少.今天就用ios提供的原生方法来打造属于自己的一个 ...

  7. kuangbin专题七 HDU1166 敌兵布阵 （线段树或树状数组）

    C国的死对头A国这段时间正在进行军事演习,所以C国间谍头子Derek和他手下Tidy又开始忙乎了.A国在海岸线沿直线布置了N个工兵营地,Derek和Tidy的任务就是要监视这些工兵营地的活动情况.由于 ...

  8. STM32F030 定时器多次溢出才触发中断的问题

    前言 最近在调试项目过程中,用了 STM32F030 的定时器 16 作为系统时钟,1ms 触发一次中断,过程中遇到一些值得记录的问题. 记录 STM32F030 中定时器 16 的初始化配置如下 v ...

  9. python 分页 封装

    分页 封装 我是在项目根目录创建个分页文件 分页代码: class Pagination(object): def __init__(self, data_num, current_page, url ...

  10. python 面向对象及封装继承和多态

    ######装饰器######装饰器的概念 - 装饰器的实现是函数里面嵌套函数;- 装饰器的本质是一个函数, 它可以让其他函数在不需要做任何代码改动的前提下增加额外的功能;- 装饰器需要传递一个函数, ...