Stoyan Stefanov - React: Up & Running

by Stoyan Stefanov

Copyright 2022 Stoyan Stefanov. All rights reserved.

Printed in the United States of America.

Published by OReilly Media, Inc. , 1005 Gravenstein Highway North, Sebastopol, CA 95472.

OReilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (http://oreilly.com). For more information, contact our corporate/institutional sales department: 800-998-9938 or corporate@oreilly.com .

• Acquisitions Editor: Jennifer Pollock
• Development Editor: Angela Rufino
• Production Editor: Kristen Brown
• Copyeditor:
• Proofreader:
• Indexer:
• Interior Designer: David Futato
• Cover Designer: Karen Montgomery
• Illustrator: Kate Dullea

• July 2016: First Edition
• November 2021: Second Edition

See http://oreilly.com/catalog/errata.csp?isbn=9781492051466 for release details.

The OReilly logo is a registered trademark of OReilly Media, Inc. React: Up & Running, the cover image, and related trade dress are trademarks of OReilly Media, Inc.

While the publisher and the author have used good faith efforts to ensure that the information and instructions contained in this work are accurate, the publisher and the author disclaim all responsibility for errors or omissions, including without limitation responsibility for damages resulting from the use of or reliance on this work. Use of the information and instructions contained in this work is at your own risk. If any code samples or other technology this work contains or describes is subject to open source licenses or the intellectual property rights of others, it is your responsibility to ensure that your use thereof complies with such licenses and/or rights.

978-1-492-05146-6

[LSI]

Its 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 didnt 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 whats up with all the different browsers? Slowly, the aaah was turning into aarrggh!

Fast forward to March 2015 at Facebooks F8 conference. The team Im 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 UIsit 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 dont need to do anything extra. After all, youve 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 functions 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 dealyou learn one library and use it to create all of the following:

• Web apps

• Native iOS and Android 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. Its not about write once, run everywhere (our industry keeps failing at this), its 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).