Skip to content

Latest commit

 

History

History
236 lines (151 loc) · 22.8 KB

File metadata and controls

236 lines (151 loc) · 22.8 KB

Foreword

前言

The Road to learn React teaches you the fundamentals of React. You will build a real world application along the way in plain React without complicated tooling. Everything from project setup to deployment on a server will be explained. The book comes with additional referenced reading material and exercises with each chapter. After reading the book, you will be able to build your own applications in React. The material is kept up to date by me, Robin Wieruch, and the community.

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

In the Road to learn React, I want to offer a foundation before you start to dive into the broader React ecosystem. It has less tooling and less external state management, but a lot of information around React. It explains general concepts, patterns and best practices in a real world React application.

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

You will learn to build your own React application. It covers real world features like pagination, client-side caching and interactions like searching and sorting. Additionally you will transition from JavaScript ES5 to JavaScript ES6 along the way. I hope this book captures my enthusiasm for React and JavaScript and helps you to get started.

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

{pagebreak}

Testimonials

读者赠言

Muhammad Kashif: "The Road to Learn React is a unique book that I recommend to any student or professional interested in learning react basics to advanced level. It is packed with insightful tips and techniques that are hard to find elsewhere, and remarkably thorough in its use of examples and references to sample problems, i have 17 years of experience in web and desktop app development, and before reading this book i was having trouble in learning react, but this book works like magic."

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

Andre Vargas: "The Road to Learn React by Robin Wieruch is such an awesome book! Most of what I learned about React and even ES6 was through it!"

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

Nicholas Hunt-Walker, Instructor of Python at a Seattle Coding School: "This is one of the most well-written & informative coding books I've ever worked through. A solid React & ES6 introduction."

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

Austin Green: "Thanks, really loved the book. Perfect blend to learn React, ES6, and higher level programming concepts."

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

Nicole Ferguson: "I'm doing Robin's Road to Learn React course this weekend & I almost feel guilty for having so much fun."

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

Karan: "Just finished your Road to React. Best book for a beginner in the world of React and JS. Elegant exposure to ES. Kudos! :)"

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

Eric Priou: "The Road to learn React by Robin Wieruch is a must read. Clean and concise for React and JavaScript."

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

A Rookie Developer: "I just finished the book as a rookie developer, thanks for working on this. It was easy to follow and I feel confident in starting a new app from scratch in the coming days. The book was much better than official React.js tutorial that I tried earlier (and couldn't complete due to lack of detail). The exercises at the end of each section were very rewarding."

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

Student: "The best book to start learning ReactJS. The project moves along with the concepts being learnt which helps to grasp the subject. I have found 'Code and learn' as best way to master programming and this book exactly does that."

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

Thomas Lockney: "Pretty solid introduction to React that doesn't try to be comprehensive. I just wanted a taste to understand what it was about and this book gave me exactly that. I didn't follow all the little footnotes to learn about the new ES6 features I've missed ("I wouldn't say I've been missing it, Bob."). But I'm sure for those of you who have fallen behind and are diligent about following those, you can probably learn a lot more than just what the book teaches."

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

{pagebreak}

Education for Children

儿童教育

The book should enable everyone to learn React. However, not everyone is privileged to use those resources, because not everyone is educated in the English language in the first place. Thus I want to use the project to support projects that teach children English in the developing world.

这本书应该能让任何人都可以学习React。但是,由于这本书一开始是用英文写的,并不是所有人都有能力使用这些资源。所以我想用这个项目来支持那些发展中国家教孩子们英语的项目。

{pagebreak}

FAQ

问题解答

How do I get updates? You can subscribe to the Newsletter or follow me on Twitter for updates. Once you have a copy of the book, it will stay updated when a new edition gets released. But you have to grab the copy again when an update is announced.

我怎么获取最新的版本? 你可以 订阅 邮件通知或者在 Twitter上关注我来获取更新。一旦你拿到这本书的副本,她会自己保持更新。只是如果有更新,必须下载新的副本。

Does it use the recent React version? The book always receives an update when the React version got updated. Usually books are outdated pretty soon after their release. Since this book is self-published, I can update it whenever I want.

这本书用的是最新版本的React吗? 这本书总是会随着React版本更新而更新。通常情况下书籍在发行后很快就过时了。因为这本书是自出版的,所以我可以随时更新它。

Does it cover Redux? It doesn't. Therefore I have written a second book. The Road to learn React should give you a solid foundation before you dive into advanced topics. The implementation of the sample application in the book will show that you don't need Redux to build an application in React. After you have read the book, you should be able to implement a solid application without Redux. Then you can read my second book to learn Redux.

这本书包括Redux的内容吗? 不包括。不过我写了第二本书。《》会给你奠定一个坚实的基础,这样你可以继续之后的高阶内容。同样一个应用,在本书中,示例应用程序的实现将会向你证明,不需要Redux也可以搭建一个完整的React应用程序。在读完这本书之后,你应该有能力自己搭建一个不用Redux的应用。然后你可以读我的第二本书来学习Redux

Does it use JavaScript ES6? Yes. But don't worry. You will be fine if you are familiar with JavaScript ES5. All JavaScript ES6 features, that I describe on the journey to learn React, will transition from ES5 to ES6 in the book. Every feature along the way will be explained. The book does not only teach React, but also all useful JavaScript ES6 features for React.

这本书会用到JavaScript ES6吗? 是的。但是别担心。如果你熟悉ES5就可以了。所有的JavaScript ES6语法,在我们学习React的过程中,都逐步会从ES5转换成ES6。每个语法都会有详细的解释。这本书不只是用来学习React,同时也包含所有相关的ES6语法。

Will you add more chapters in the future? You can have a look at the Change Log chapter for major updates that already happened. There will be unannounced improvements in between too. In general, it depends on the community whether I continue to work on the book. If there is an acceptance for the book, I will deliver more chapters and improve the old material. I will keep the content up to date with recent best practices, concepts and patterns.

以后你会添加新的章节吗? 你可以从更新日志章节找到已经发生的重大更新。当然也会有一些较小的改动不会被公示出来。总体来说,这取决于社区是否让我继续写这本书。如果大家很喜欢这本书,我会继续写更多的章节以及改进已有的内容。我会保持书中的内容包含最新的最佳实践,概念和设计模式。

How can I get help while reading the book? The book has a Slack Group for people who are reading the book. You can join the channel to get help or to help others. After all, helping others can improve your learnings too.

我在读这本书的时候遇到困难,怎么获取帮助? 这本书有一个Slack 聊天组给读者。你可以加入这个频道获取帮助,或者帮助其他人。不管怎样,帮助其他人也有助于你自己的学习。

Is there any troubleshoot area? If you run into problems, please join the Slack Group. In addition, you could have a look into the open issues on GitHub for the book. Perhaps your problem was already mentioned and you can find the solution for it. If your problem wasn't mentioned, don't hesitate to open a new issue where you can explain your problem, maybe provide a screenshot, and some more details (e.g. book page, node version). After all, I try to ship all fixes in next editions of the book.

如果我在书中发现一些问题,有地方可以帮助解决吗? 如果你发现问题,请加入Slack聊天组。另外,你可以看看本书Github上的问题。有可能你的问题已经有人遇到了,并且解决方案也在上面。如果找不到同样的问题,请新建一个新的问题来解释你遇到的麻烦,比如提供一个截图,和一些细节信息(比如页数、Nodejs的版本等)。之后,我会修复所有问题,然后发布一个新的版本。

Can I help to improve it? Yes. You can have a direct impact with your thoughts and contributions on GitHub. I don't claim to be an expert nor to write in native English. I would appreciate your help very much.

我能提供帮助来改进这本书吗? 是的。你可以在在GitHub上贡献直接提出你的想法和代码。我并不宣称自己是一个专家,也不是用英语母语进行写作。我会非常感谢您的帮助。

Can I support the project? Yes. Feel free to reach out. I invest a lot of my time into open source tutorials and learning resources. You can have a look at my about me page. I would love to have you as my Patron on Patreon.

我可以为这个项目做出其他支持吗? 是的。欢迎联系我。我贡献了非常多的个人时间到开源教程和学习资源的制作。你可以看看我的介绍。 我非常高兴能得到您在Patreon的赞助。

Is there a call to action? Yes. I want you to take a moment to think about a person who would be a good match to learn React. The person could have shown the interest already, could be in the middle of learning React or might not yet be aware about wanting to learn React. Reach out to that person and share the book. It would mean a lot to me. The book is intended to be given to others.

写这本书的有什么特别的出发点吗? 是的。我想让你花点时间想一想谁比较适合学习React。这个人可能已经表现出一些兴趣,可能已经学习过一段时间,或者有可能并没有发现自己其实可以学习React。你可以找到他们然后把这本书分享给他。这对我真的非常重要,这本书就旨与他人分享。

{pagebreak}

Change Log

更新日志

10. January 2017:

08. March 2017:

  • v3 Pull Request
  • 20% more content
  • 25% improved content
  • 9 new chapters
  • 170 pages of learning material

15. April 2017:

  • upgrade to React 15.5

5. July 2017:

  • upgrade to node 8.1.3
  • upgrade to npm 5.0.4
  • upgrade to create-react-app 1.3.3

17. October 2017:

  • upgrade to node 8.3.0
  • upgrade to npm 5.5.1
  • upgrade to create-react-app 1.4.1
  • upgrade to React 16
  • v4 Pull Request
  • 15% more content
  • 15% improved content
  • 3 new chapters (Bindings, Event Handlers, Error Handling)
  • 190+ pages of learning material
  • +9 Source Code Projects

{pagebreak}

How to read it?

怎么读这本书?

The book is my attempt to teach React while you will write an application. It is a practical guide to learn React and not a reference work about React. You will write a Hacker News application that interacts with a real world API. Among several interesting topics, it covers state management in React, caching and interactions (sorting and searching). On the way you will learn best practices and patterns in React.

我希望这本书在你打算写一个应用的时候,能够教会你React。这是一个实践性很强的React学习指南,而不是一个React资料索引。你会在这本书的指引下写一个Hacker News(译者注:一个著名黑客论坛)应用,会需要和真实API交互。她包括了很多有趣的话题,包括React状态管理,缓存和交互效果(排序和搜索)。在这个过程中你可以学到React的最佳实践和设计模式。

In addition, the book gives you a transition from JavaScript ES5 to JavaScript ES6. React embraces a lot of JavaScript ES6 features and I want to show you how you can use them.

另外,本书可以让你平滑地从Javascript ES5过渡到JavaScript ES6。React采用了非常多的JavaScript ES6语法,我希望告诉你怎么使用它们。

In general each chapter of the book will build up on the previous chapter. Each chapter will teach you something new. Don't rush through the book. You should internalize each step. You could apply your own implementations and read more about the topic. After each chapter I give you some reading material and exercises. If you really want to learn React, I highly recommend to read the extra material and do some hands on exercises. After you have read a chapter, make yourself comfortable with the learnings before you continue.

一般来说,本书每一章都会在前一章基础上继续搭建。每一章都会教你一些新的知识点。务必不要跳过任何内容。你应该实践和领会每一个步骤。你可以自己写出实现,然后阅读书中的内容。每一章之后,我提供了一些阅读资料和练习题。如果你真的想学好React,我非常推荐读完这些阅读资料并上手完成练习题。完成一章的学习之后,请保证自己对所学内容熟练掌握之后,再继续后面的章节。

In the end you will have a complete React application in production. I am very keen to see your results, so please text me when you have finished the book. The final chapter of the book will give you a handful of options to continue your React journey. In general you will find a lot of React related topics on my personal website.

最终,你会有一个完整的可以部署上线的应用。我非常渴望能看到你的杰作,如果你完成了这本书,请给我发消息。最后一章会给你很多选择来继续React的学习和应用。总之你会发现在我的个人网站有非常多的React的相关话题。

Since you are reading the book, I guess you are new to React. That's perfect. In the end I hope to get your feedback to improve the material to enable everyone to learn React. You can have a direct impact on GitHub or text me on Twitter.

既然你在看这本书,我猜你还是个React新手。真是太好了。最后我希望你能给我你的反馈,来帮助我完善学习资料,以帮助人人都可以掌握React。你可以直接提交代码到GitHub,或者在Twitter给我发消息。

What you can expect (so far...)

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

  • no complicated configurations
  • 没有复杂的配置
  • create-react-app to bootstrap your application
  • 用create-react-app来初始化你的应用
  • efficient lightweight code
  • 高效而轻量级的代码
  • only React setState as state management (so far...)
  • 只用React setState来做状态管理(目前为止...)
  • transition from JavaScript ES5 to ES6 along the way
  • 从JavaScript ES5一路平滑过渡到ES6
  • the React API with setState and lifecycle methods
  • React setState和生命周期函数的用法
  • interaction with a real world API (Hacker News)
  • 和真实API的交互(Hacker News)
  • advanced user interactions
  • 高级用户交互
  • client-sided sorting
  • 客户端排序
  • client-sided filtering
  • 客户端过滤
  • server-sided searching
  • 服务器端搜索
  • implementation of client-side caching
  • 客户端缓存的实现
  • higher order functions and higher order components
  • 高阶函数和高阶组件
  • snapshot test components with Jest
  • 用Jest进行组件的切片(snapshot)测试
  • unit test components with Enzyme
  • 用Enzyme进行组件的单元测试
  • neat libraries along the way
  • 过程中学到一些有用的工具库
  • exercises and more readings along the way
  • 过程中的练习题和扩展阅读
  • internalize and reinforce your learnings
  • 认同和巩固你的所学
  • deploy your application to production
  • 将你的应用部署到产品环境

{pagebreak}