《React 学习之道》The Road to learn React (简体中文版)

通往 React 实战大师之旅:掌握 React 最简单,且最实用的教程。

前言

《React 学习之道》这本书使用路线图中的精华部分用于传授 React,并将其融入一个独具吸引力的真实世界 App的具体代码实现。

如何掌握 React 存在特别多的路线图。本书提取这些路线图中的精华部分,并将其融入于一个具体的应用程序当中。您将会构建一个属于自己的 React 应用程序。在本次学习之旅当中,您将学习 ES6,了解所有 React 的基础知识、先进理念,以及组件的内部状态管理。

作者与译者

首先,感谢 The Road to learn React 原书作者,Robin Wieruch。本书的翻译始于 React China 社区的一个帖子:The Road to learn React - Simplified Chinese Translation。

本书翻译来自 ThoughtWorks 的 JS Community 超豪华译者团队(排名不分先后):

@LeiZeng (曾磊)、@JimmyLv (吕靖)

@SBeator (曾星鑫)、@kenpusney (刘清)

@azzgo (文一山)、@trotyl (余泽江)

@ariesjia (陈嘉)、@Yixi (刘应皓)

@HelloRuiLi (李睿)、@lazurey (梁越)

@zengyang2014 (曾扬)、@liujiefengfeng (刘杰凤)

@futantan (傅坦坦)、@linksgo2011 (林宁)

本书介绍

《React 学习之道》会教您一些 React 的基础知识。通过这套教程,您可以使用纯 React 构建一个真正可用的应用程序,而不需要去理会其他复杂的工具。我将为您逐一介绍从开发环境的准备到部署上线的全部过程。本书每一章都包含一些额外的索引资料以及课后练习。在读完本书之后,您将会有能力依靠自己构建一个 React 应用。我,Robin Wieruch,以及整个社区会持续维护和更新这些资料。

通过《React 学习之道》,在开始陷入到更庞大的 React 生态圈之前,我想为您奠定一个良好的基础。它会通过一个真实可用的 React 应用来解释基本概念、设计模式以及最佳实践。

您将会学习构建您自己的 React 应用。这个应用会涉及一些真正可用的功能,比如分页,客户端缓存,以及像搜索和排序这样的交互功能。另外在这个过程中,您会慢慢从 JavaScript ES5 过渡到 JavaScript ES6。我希望这本书能充分体现我对 React 和 JavaScript 的热忱所在,并帮助您能够开始您的开发旅程。

您可以期望学到什么(目前为止...)

  • Hacker News的React版本
  • 没有复杂的配置
  • 用create-react-app来初始化你的应用
  • 高效而轻量级的代码
  • 只用React setState来做状态管理(目前为止...)
  • 从JavaScript ES5一路平滑过渡到ES6
  • React setState和生命周期函数的用法
  • 和真实API的交互(Hacker News)
  • 高级用户交互
  • 客户端排序
  • 客户端过滤
  • 服务器端搜索
  • 客户端缓存的实现
  • 高阶函数和高阶组件
  • 用Jest进行组件的切片(snapshot)测试
  • 用Enzyme进行组件的单元测试
  • 过程中学到一些有用的工具库
  • 过程中的练习题和扩展阅读
  • 认同和巩固你的所学
  • 将您的应用部署到产品环境

您需要具备哪些知识?

在开始阅读本书之前,您应该熟悉 HTML、CSS 和 JavaScript(ES5)。本书将会传授 ES6 及其更高版本,如果您熟悉于其它不同的 SPA 框架或库,您应该对这些基本知识已经了然于心。如果您刚刚开始您的 Web 开发之旅,您应该优先学习并掌握 HTML、CSS 和 JavaScript,然后再来学习 React。

读者赠言

Muhammad Kashif: “《React 学习之道》是一本独一无二的书,我推荐给任何想要学习React基础和进阶技巧的学生或者专业人士。她包含了诸多启发性的小提示和绝无仅有的技术点。书中虽然引用了大量例子和参考资料,但最后都被用到我们要解决的问题上,这体现了编写本书令人惊叹地缜密。我有17年的互联网和桌面开发经验,阅读本书之前,我在学习React的过程中缺并不顺利。而这本书就像魔术一样有用。”

Andre Vargas: “Robin Wieruch的《React 学习之道》是一本非常牛的书!我所学到的绝大部分有关React甚至是ES6的知识都是通过她得来的!”

Nicholas Hunt-Walker, Instructor of Python at a Seattle Coding School: “这是一本我读过的最严谨和最实用的编程书籍之一。一本完整的React和ES6使用说明。”

Austin Green: “非常感谢,真的很喜欢这本书。完美的学习曲线,不管是React,ES6,还是抽象编程概念。”

Nicole Ferguson: “这个周末跟着Robin的课程学习React,我发现这一切太有意思了。这几乎让我感到羞愧。”

Karan: “刚刚完成这个课程。这是全世界最好的学习React和JS的一本书。完美展现了ES的优雅。膜拜! :)”

Eric Priou: “Robin的《React 学习之道》是必读的一本书。简明扼要地介绍了React和Javascript。”

一个新手开发: “作为一个开发新手,我刚刚完成了这本书的学习,非常感谢写了这本书。她非常容易上手,我相信自己在接下来的几天可以开始从头开发一个新应用。这本书比我之前试过的官方React入门文档好很多(由于缺乏细节,我并未能够完成)。每个章节后面的练习题对我有很好的激励效果。”

一个学生: “这是最好的学习React的一本书。我们可以一边做练习项目,一边学习知识点,然后还能紧扣我们的学习主题。我发现「边码边学」是最好的掌握编程的方法,而这本书完完全全是这样教我的。”

Thomas Lockney: “这是一本非常扎实的介绍React的书,而不是试着把事情搞复杂。我本来只想尝试理解看看这本书到底讲了什么,然后我得出了上面的结论。我并没有跟着所有的脚注来学习我还没有注意到的新的ES6语法(我当然不会说我一直没有注意到,Bob)(译者注:这个是在博客中与另外一个朋友互动的话)。对于那些没有及时了解到这些新功能,并且很勤奋的跟着练习的朋友们,我想很肯定地对你们说,你们能学到的会不仅仅是这本书所教的东西。”

恭喜你,快去看看我们的 Leanpub 主页吧!

《React 学习之道》The Road to learn React (简体中文版) [PDF/iPad/Kindle]

支持 PDF、EPUB、MOBI、Kindle 多种格式下载,并支持 Leanpub 在线阅读。

最后!求 Star!求小星星!

  • GitHub 翻译地址:the-road-to-learn-react/the-road-to-learn-react-chinese: 《React 学习之道》The Road to learn React (简体中文版) | 最简单,且最实用的 React 实战教程。
  • GitHub 原书地址:the-road-to-learn-react/the-road-to-learn-react: The Road to learn React

成为赞助者

《React 学习之道》是一本免费的电子书,致力于让每个人都能学习 React。这样的教育内容需要你的支持才能得以维持下去。Robin Wieruch 还在他的网站上写了很多的教育内容。所以你可以通过在Patreon成为他的赞助人来支持他。

也欢迎支持我们的译者,请我们喝杯咖啡,☕️:

微信支付宝

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/366875.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue.js(三)

这里该记到vue的组件了&#xff0c;组件基础篇 1.vue组件的基本书写方式 Vue.component(button-counter, {data: function () {return {count: 0}},template: <button v-on:click"count">You clicked me {{ count }} times.</button> }) 上面定义了一个名…

Nuxt中如何使用Vuex-Store异步获取数据

Nuxt是一个基于Vue.js的通用型框架&#xff0c;它集成了使用Vue开发的绝大数组件/框架。 长话短说如何在Vuex-store中获取异步数据呢&#xff1f; 在Nuxt中由于集合了Vuex还有其他的一些配置&#xff0c;大大的方便了我们使用Vuex&#xff1b;在Nuxt官方文档中写到&#xff1a;…

Struts2面试问答

Struts2是用Java开发Web应用程序的著名框架之一。 最近&#xff0c;我写了很多Struts2教程 &#xff0c;在这篇文章中&#xff0c;我列出了一些重要的Struts2面试问题以及答案&#xff0c;以帮助您进行面试。 什么是Struts2&#xff1f; Struts1和Struts2之间有什么区别&…

基于canvas的骨骼动画

最近学习到了一种关于canvas的骨骼动画&#xff0c;听这个名字就知道他和canvas之前的动画不同&#xff0c;不知道你有没有兴趣了解一下呢&#xff1f;关于骨骼动画最初是无意间在腾讯团队上看到的&#xff0c;但是由于他官网的教程是在是少之又少&#xff0c;也就仅有一个小de…

Python APSchedule安装使用与源码分析

我们的项目中用apschedule作为核心定时调度模块。所以对apschedule进行了一些调查和源码级的分析。 1、为什么选择apschedule&#xff1f; 听信了一句话&#xff0c;apschedule之于python就像是quartz之于java。实际用起来还是不错的。 2、安装 # pip安装方式 $ pip install ap…

NetBeans 7.4的本机Java打包

成为“ NetBeans 74 NewAndNoteworthy ”页面的NetBeans 7.4的新功能之一是“本机打包 ”&#xff0c;在该页面上被描述为“ JavaSE项目现在支持使用JavaFX提供的本机打包技术来创建本机包。 ” 我将使用一个非常简单的示例来演示NetBeans 7.4中的本机打包功能。 下一个代码清…

基于Vue开发一个日历组件

最近在做一个类似课程表的需求&#xff0c;需要自制一个日历来支持功能及展现&#xff0c;就顺便研究一下应该怎么开发日历组件。 更新 2.23修复了2026年2月份会渲染多一行的bug&#xff0c;谢谢深蓝一人童鞋提出的bug&#xff0c;解决方案是给二月份的日历做特殊处理&#xf…

php 打开word乱码怎么办,如何解决php word 乱码问题

php word乱码的解决办法&#xff1a;首先打开“/Writer/Word2007/Base.php”文件&#xff1b;然后添加“$objWriter->writeAttribute(‘w:eastAsia’, $font)”内容&#xff1b;最后保存修改即可。PHPword解决中文乱码一、增加东亚字体支持打开并编辑路径/Writer/Word2007/B…

Java开发人员访谈的MindMap

多年来&#xff0c;我曾在许多Java开发人员访谈中担任小组成员。 之前&#xff0c;我曾写过一篇标题为“成功进行软件工程师技术面试的7大技巧”的文章&#xff0c;其中涵盖了很少的一般准则。 在本文中&#xff0c;我将分享一个思维导图&#xff0c;其中包含Java开发人员访谈中…

送给大家一个好看的简历神器

很多人看到里边有好看的东西就习惯性的点进来看看&#xff0c;还一边点一边想 —— 好看的简历我见多了&#xff0c;你这个又能好看到哪里去。我想差不多可以&#xff1a; 哪里吧因为最近有在准备简历&#xff0c;就习惯性的找一找有没有现成的简历模板。结果全是付费的&#x…

PHP简单实现单点登录功能示例

1.准备两个虚拟域名 127.0.0.1 www.openpoor.com127.0.0.1 www.myspace.com 2.在openpoor的根目录下创建以下文件 index.PHP 123456789101112131415161718<?phpsession_start();?><!DOCTYPE html><html><head><meta charset"UTF-8"/&…

JUNG 计算图属性,中心度,偏心率,直径,半径

本文介绍利用Java的第三方API JUNG 计算图中&#xff1a; closeness centrality&#xff1b;// 图中某节点的 接近中心性/亲密中心性 betweenness centrality&#xff1b;// 图中某节点的 中介中心性/介数中心性 distance; // 图中两节点的最短距离 eccentricity; // 图中某节…

Java VM –提防YoungGen空间

您可能从我们以前的面向性能的文章中看到&#xff0c;健康的JVM是实现最佳应用程序性能和稳定性的最重要目标之一。 这样的健康评估通常仅关注主要收集的频率&#xff08;避免&#xff09;或检测内存泄漏的存在。 年轻一代空间或短寿命物体的大小和足迹如何&#xff1f; 本文…

小程序绘图工具painter-json文件绘制保存分享图-可点击任意元素触发函数

Painter是由酷家乐移动前端团队打造的一款小程序绘图组件。 原项目地址&#xff1a;https://github.com/Kujiale-Mobile/Painter 新版地址&#xff1a;https://github.com/shesw/Painter 这款交互版原来是为了针对业务中的新需求而由我自己开发的&#xff0c;后来需求改动&a…

4 张动图解释为什么(什么时候)使用 Redux

dev-reading/fe 是一个阅读、导读、速读的 repo&#xff0c;不要依赖于 dev-reading/fe 学习知识。本 repo 只是一个快速了解文章内容的工具&#xff0c;并不提供全文解读和翻译。你可以通过本平台快速了解文章里面的内容&#xff0c;找到感兴趣的文章&#xff0c;然后去阅读全…

您正在使用什么垃圾收集器?

我们的研究实验室正全速前进。 随着最近的资金注入 &#xff0c;我们只能保证我们不断创新的步伐只会加快。 我们进行的部分研究与GC优化有关。 在处理这个有趣领域中的问题时&#xff0c;我们认为可以分享一些有关GC算法使用的见解。 为此&#xff0c;我们对使用特定GC算法的…

前端布局推进剂 - 间距规范化

我是一个爱折腾设计的前端&#xff0c;一直都在标榜自己的页面还原是多么的牛 X 。怎么做到页面还原&#xff1f;我有一个最笨但是有效的方法&#xff0c;就是把设计稿直接存成图片&#xff0c;作为背景图然后临摹着设计稿进行开发。我觉得自己太有才了。像素级还原有没有&…

echarts折线图相关

optionJKDLine {  title: {text: 告警数量趋势图,textStyle:{  //标题样式fontStyle:normal,fontFamily:sans-serif,fontSize:12    }},tooltip: {trigger: axis},legend: {  //图例,默认显示},grid: {  //图表距离left: -3%,right: 5%,bottom: 3%,top:20%,contai…

一个关于fixed抖动的小bug

前言 大家都知道position: fixed用于生成绝对定位的元素&#xff0c;相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 突然发现自己之前写的网页有个小bug&#xff1a;在购买页面的…

腾讯Node.js基础设施TSW正式开源

经过六年的迭代与沉淀&#xff0c;腾讯Tencent Server Web (以下简称TSW)这一公司级运维组件于今日正式开源。TSW是面向WEB前端开发者&#xff0c;以提升问题定位效率为初衷&#xff0c;提供云抓包、全息日志和异常发现的Node.js基础设施。TSW每天为百亿次请求提供稳定服务&…