安装 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. WCF寄宿控制台.WindowsService.WinFrom.WebAPI寄宿控制台和windows服务

    先建立wcf类库.会默认生成一些试用代码.如下: public class Service1 { public string GetData(int value) { return string.Fo ...

  2. Glib学习笔记（一）

    你将学到什么 如何使用GObject实现一个新类 类头文件 声明一个类型的方法选择取决于类型是可被继承的还是不可被继承的. 不可被继承的类型(Final类型)使用G_DECLARE_FINAL_TYP ...

  3. 加快 hive 查询的 5 种方法

    1. 使用 Tez set hive.execution.engine=tez; 2. 使用 ORCFILE.当有多个表 join 时,使用 ORCFile 进行存储,会显著地提高速度. CREATE ...

  4. ASP.NET-GridView之表头设计

    我们 见过许多网页呈现表格的 时候,表头的形式多种多样.下面来看看,怎么制定多样的表头吧. 效果显示: 需要在后台写一个方法,网页一加载在前端写个事件调用这个方法. DEMO 前端 <span ...

  5. [51nod1239] 欧拉函数之和（杜教筛）

    题面 传送门 题解 话说--就一个杜教筛--刚才那道拿过来改几行就行了-- //minamoto #include<bits/stdc++.h> #define R register #d ...

  6. C/C++ 遇到0xcccccccc访问冲突

    最近一直在纠结这个问题. 最近写代码,总是遇到这个问题,一旦遇到这个问题,以前好使的代码也就不好使了.很费解,上网搜集了下资料.... 这个0xcccccccc是DEBUG模式下,编译器为没有初始化的 ...

  7. linux线程切换问题

    处理器总处于以下状态中的一种: 1.内核态,运行于进程上下文,内核代表进程运行于内核空间: 2.内核态,运行于中断上下文,内核代表硬件运行于内核空间: 3.用户态,运行于用户空间:   一个进程的上下 ...

  8. Glassfish Password Alias

    https://docs.oracle.com/cd/E19798-01/821-1751/ghgqc/index.html

  9. 5.Min Stack（能返回最小数的栈）

    Level:   Easy 题目描述: Design a stack that supports push, pop, top, and retrieving the minimum element ...

  10. kuangbin专题十六 KMP&&扩展KMP HDU3294 Girls' research

    One day, sailormoon girls are so delighted that they intend to research about palindromic strings. O ...