Preface
It’s yet another wonderful warm California night. The faint ocean breeze only helping you feel 100% “aaah!” The place: Los Angeles; the time: 2000-something. I was just getting ready to FTP my new little web app called CSSsprites.com to my server and release it to the world. I contemplated a problem on the last few evenings I spent working on the app: why on earth did it take 20% effort to wrap up the “meat” of the app and then 80% to wrestle with the user interface? How many other tools could I have made if I didn’t have to getElementById() all the time and worry about the state of the app? (Is the user done uploading? What, an error? Is this dialog still on?) Why is UI development so time consuming? And what’s up with all the different browsers? Slowly, the “aaah” was turning into “aarrggh!”
Fast forward to March 2015 at Facebook’s F8 conference. The team I’m part of is ready to announce a complete rewrite of two web apps: our third-party comments offering and a moderation tool to go with it. Compared to my little CSSsprites.com app, these were fully fledged web apps with tons more features, way more power, and insane amounts of traffic. Yet, the development was a joy. Teammates new to the app (and some even new to JavaScript and CSS) were able to come and contribute a feature here and an improvement there, picking up speed quickly and effortlessly. As one member of the team said, “Ah-ha, now I see what all the love is all about!”
What happened along the way? React.
React is a library for building UIs—it helps you define the UI once and for all. Then, when the state of the app changes, the UI is rebuilt to react to the change and you don’t need to do anything extra. After all, you’ve defined the UI already. Defined? More like declared. You use small manageable components to build a large powerful app. No more spending half of your function’s body hunting for DOM nodes; all you do is maintain the state of your app (with a regular old JavaScript object) and the rest just follows.
Learning React is a sweet deal—you learn one library and use it to create all of the following:
-
Web apps
-
Native iOS and Android apps
-
Canvas apps
-
TV apps
-
Native desktop apps
You can create native apps with native performance and native controls (real native controls, not native-looking copies) using the same ideas of building components and UIs. It’s not about “write once, run everywhere” (our industry keeps failing at this), it’s about “learn once, use everywhere.”
To cut a long story short: learn React, take 80% of your time back, and focus on the stuff that matters (like the real reason your app exists).
About This Book
This book focuses on learning React from a web development point of view. For the first three chapters, you start with nothing but a blank HTML file and keep building up from there. This allows you to focus on learning React and not any of the new syntax or auxiliary tools.
Chapter 4 introduces JSX, which is a separate and optional technology that is usually used in conjunction with React.
From there you learn about what it takes to develop a real-life app and the additional tools that can help you along the way. Examples include JavaScript packaging tools (Browserify), unit testing (Jest), linting (ESLint), types (Flow), organizing data flow in the app (Flux), and immutable data (Immutable.js). All of the discussions about auxiliary technologies are kept to a minimum so that the focus is still on React; you’ll become familiar with these tools and be able to make an informed decision about which to use.
Good luck on your journey toward learning React—may it be a smooth and fruitful one!
Conventions Used in This Book
The following typographical conventions are used in this book:
- Italic
-
Indicates new terms, URLs, email addresses, filenames, and file extensions.
Constant width-
Used for program listings, as well as within paragraphs to refer to program elements such as variable or function names, databases, data types, environment variables, statements, and keywords.
Constant width bold-
Shows commands or other text that should be typed literally by the user.
Constant width italic-
Shows text that should be replaced with user-supplied values or by values determined by context.
Tip
This element signifies a tip or suggestion.
Note
This element signifies a general note.
Warning
This element indicates a warning or caution.
Using Code Examples
Supplemental material (code examples, exercises, etc.) is available for download at https://github.com/stoyan/reactbook.
This book is here to help you get your job done. In general, if example code is offered with this book, you may use it in your programs and documentation. You do not need to contact us for permission unless you’re reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from this book does not require permission. Selling or distributing a CD-ROM of examples from O’Reilly books does require permission. Answering a question by citing this book and quoting example code does not require permission. Incorporating a significant amount of example code from this book into your product’s documentation does require permission.
We appreciate, but do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN. For example: “React: Up & Running by Stoyan Stefanov (O’Reilly). Copyright 2016 Stoyan Stefanov, 978-1-491-93182-0.”
If you feel your use of code examples falls outside fair use or the permission given above, feel free to contact us at [email protected].
O’Reilly Online Learning
Note
For more than 40 years, O’Reilly Media has provided technology and business training, knowledge, and insight to help companies succeed.
Our unique network of experts and innovators share their knowledge and expertise through books, articles, and our online learning platform. O’Reilly’s online learning platform gives you on-demand access to live training courses, in-depth learning paths, interactive coding environments, and a vast collection of text and video from O’Reilly and 200+ other publishers. For more information, visit http://oreilly.com.
How to Contact Us
Please address comments and questions concerning this book to the publisher:
- O’Reilly Media, Inc.
- 1005 Gravenstein Highway North
- Sebastopol, CA 95472
- 800-998-9938 (in the United States or Canada)
- 707-829-0515 (international or local)
- 707-829-0104 (fax)
We have a web page for this book, where we list errata, examples, and any additional information. You can access this page at http://bit.ly/react_up_running.
To comment or ask technical questions about this book, send email to [email protected].
For more information about our books, courses, and news, see our website at http://www.oreilly.com.
Find us on Facebook: http://facebook.com/oreilly
Follow us on Twitter: http://twitter.com/oreillymedia
Watch us on YouTube: http://www.youtube.com/oreillymedia
Acknowledgments
I’d like to thank to everyone who read different drafts of this book and sent feedback and corrections: Andreea Manole, Iliyan Peychev, Kostadin Ilov, Mark Duppenthaler, Stephan Alber, Asen Bozhilov.
Thanks to all the folks at Facebook who work on (or with) React and answer my questions day in and day out. Also to the extended React community that keeps producing great tools, libraries, articles, and usage patterns.
Many thanks to Jordan Walke.
Thanks to everyone at O’Reilly who made this book possible: Meg Foley, Kim Cofer, Nicole Shelby, and many others.
Thanks to Yavor Vatchkov who designed the UI of the example app developed in this book (try it at whinepad.com).