安装 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. javascript 设计模式实践之策略模式--输入验证

    博客地址:http://www.cnblogs.com/kongxianghai/p/4985122.html,写的挺好的推荐下!

  2. STL_ALGORITHM_H

    sort_unique_copy /////////////////////////////////////////////////////////// // Copyright (c) 2013, ...

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

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

  4. Hystrix线程隔离技术解析-线程池(转)

    认识Hystrix Hystrix是Netflix开源的一款容错框架,包含常用的容错方法:线程隔离.信号量隔离.降级策略.熔断技术. 在高并发访问下,系统所依赖的服务的稳定性对系统的影响非常大,依赖有 ...

  5. SysPeek打不开解决方法

    SysPeek 是Linux平台下一款简洁小巧的系统状态指示软件,可实时显示 CPU.Memory.Swap.硬盘和网络使用情况.然而最近却使用不了,打不开.无论点击图标或者是终端打开,都不显示.看错 ...

  6. P2962 [USACO09NOV]灯Lights 对抗搜索

    \(\color{#0066ff}{题目描述}\) 贝希和她的闺密们在她们的牛棚中玩游戏.但是天不从人愿,突然,牛棚的电源跳闸了,所有的灯都被关闭了.贝希是一个很胆小的女生,在伸手不见拇指的无尽的黑暗 ...

  7. P1082 同余方程

    题意:给定a,b,求$ax \equiv 1 \pmod b$的最小正整数解x,保证有解 exgcd:求$ax+by=gcd(a,b)$的 一组解x,y 首先根据正常的gcd可得出   $gcd(a, ...

  8. 安装 zookeeper

    https://www.w3cschool.cn/zookeeper/zookeeper_cli.html ZooKeeper是一种分布式协调服务,用于管理大型主机.在分布式环境中协调和管理服务是一个 ...

  9. 远程私有库的创建 pod 组件化

    参考:   http://www.cnblogs.com/hs-funky/p/6780203.html http://www.jianshu.com/p/4b63dfbd8be7 http://ww ...

  10. springboot整合xxl-mq学习笔记

    首先xxl-mq是大神xuxueli开发的一个消息中间件框架: 与springboot整合过程: <?xml version="1.0" encoding="UTF ...