React.js 小书 Lesson5 - React.js 基本环境安装

zilu 发布于2019-08-21 17:32 / 3273人阅读

摘要：工具地址在安装之前要确认你的机器上安装了环境包括。安装好环境以后，只需要按照官网的指引安装即可。所以可以把的源改成国内的的源，这样会加速下载过程。接下来我们会探讨的组件的基本写法小书使用描述信息。

React.js 小书 Lesson5 - React.js 基本环境安装

本文作者：胡子大哈
本文原文：http://huziketang.com/books/react/lesson5

转载请注明出处，保留原文链接以及作者信息

在线阅读：http://huziketang.com/books/react

安装 React.js

React.js 多带带使用基本上是不可能的事情。不要指望着类似于 jQuery 下载放到标签就开始使用。使用 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

这条命令会帮我们构建一个叫 hell-react 的工程，并且会自动地帮助我们安装所需要的依赖，现在只需要安静地等待它安装完。

额外的小贴士：

如果有些同学安装过程比较慢，那是很有可能是因为 npm 下载的时候是从国外的源下载的缘故。所以可以把 npm 的源改成国内的 taobao 的源，这样会加速下载过程。在执行上面的命令之前可以先修改一下 npm 的源：

npm config set registry https://registry.npm.taobao.org

下载完以后我们就可以启动工程了，进入工程目录然后通过 npm 启动工程：

cd hello-react
npm start

终端提示成功：

并且会自动打开浏览器，就可以看到 React 的工程顺利运行的效果：

这时候我们把 src/App.js 文件中的

标签的内容修改为 Hello React，

Hello React

保存一下，然后户就会发现浏览器自动刷新，并且我们的修改也生效了：

到这里我们的环境已经安装好了，并且顺利地运行了我们第一个例子。接下来我们会探讨 React.js 的组件的基本写法——《React.js 小书 Lesson6 - 使用 JSX 描述 UI 信息》。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89647.html

React.js 小书 Lesson4 - 前端组件化（三）：抽象出公共组件类

摘要：最后抽离出来了一个类，可以帮助我们更好的做组件化。一个组件有自己的显示形态上面的结构和内容行为，组件的显示形态和行为可以由数据状态和配置参数共同决定。接下来我们开始正式进入主题，开始正式介绍。下一节链接直达小书基本环境安装 React.js 小书 Lesson4 - 前端组件化（三）：抽象出公共组件类本文作者：胡子大哈本文原文：http://huziketang.com/books...

jsbintask 2019-08-21 17:32 评论0 收藏0
写一本关于 React.js 的小书

摘要：因为工作中一直在使用，也一直以来想总结一下自己关于的一些知识经验。于是把一些想法慢慢整理书写下来，做成一本开源免费专业简单的入门级别的小书，提供给社区。本书的后续可能会做成视频版本，敬请期待。本作品采用署名禁止演绎国际许可协议进行许可 React.js 小书本文作者：胡子大哈本文原文：React.js 小书转载请注明出处，保留原文链接以及作者信息在线阅读：http://huzi...

Scorpion 2019-08-21 11:39 评论0 收藏0
2017-09-13 前端日报

摘要：前端日报精选中的垃圾收集，图文指南十个免费的前端开发工具专题之递归如何在链中共享变量基于的爬虫框架中文译十六进制颜色揭秘掘金掘金小书基本环境安装小书教程中间件对闭包的一个巧妙使用简书源码分析掘金组件开发练习焦点图切换前端学 2017-09-13 前端日报精选 V8 中的垃圾收集（GC），图文指南十个免费的web前端开发工具JavaScript专题之递归 · Issue #49 · m...

BWrong 2019-08-22 11:05 评论0 收藏0
React.js 小书 Lesson9 - 事件监听

摘要：在不需要手动调用浏览器原生的进行事件监听。没有经过特殊处理的话，这些的事件监听只能用在普通的的标签上，而不能用在组件标签上。的事件监听方法需要手动到当前实例，这种模式在中非常常用。下一节中我们将介绍小书组件的和。 React.js 小书 Lesson9 - 事件监听本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson9 转载请...

yanbingyun1990 2019-08-21 17:33 评论0 收藏0
React.js 小书 Lesson21 - ref 和 React.js 中的 DOM 操作

摘要：多余的操作其实是代码里面的噪音，不利于我们理解和维护。下一节中我们将介绍小书和容器类组件。 React.js 小书 Lesson21 - ref 和 React.js 中的 DOM 操作本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson21 转载请注明出处，保留原文链接以及作者信息在线阅读：http://huziketan...

Gemini 2019-08-21 17:34 评论0 收藏0