«2 Copyright © 2016 by Syncfusion, Inc. 2501 Aerial Center Parkway Suite 200 Morrisville, NC 27560 USA All rights reserved. I mportant licensing ...»
Foreword by Daniel Jebaraj
Copyright © 2016 by Syncfusion, Inc.
2501 Aerial Center Parkway
Morrisville, NC 27560
All rights reserved.
I mportant licensing information. Please read.
This book is available for free download from www.syncfusion.com on completion of a registration form.
If you obtained this book from any other source, please register and download a free copy from
This book is licensed for reading only if obtained from www.syncfusion.com.
This book is licensed strictly for personal or educational use.
Redistribution in any form is prohibited.
The authors and copyright holders provide absolutely no warranty for any information provided.
The authors and copyright holders shall not be liable for any claim, damages, or any other liability arising from, out of, or in connection with the information in this book.
Please do not use this book if the listed terms are unacceptable.
Use shall constitute acceptance of the terms listed.
SYNCFUSION, SUCCINCTLY, DELIVER INNOVATION WITH EASE, ESSENTIAL, and.NET ESSENTIALS are the registered trademarks of Syncfusion, Inc.
Technical Reviewer: James McCaffrey Copy Editor: Courtney Wright Acquisitions Coordinator: Hillary Bowling, online marketing manager, Syncfusion, Inc.
Proofreader: Graham High, senior content producer, Syncfusion, Inc.
3 Table of Contents The Story behind the Succinctly Series of Books
About the Author
Chapter 1 What Is React?
Chapter 2 Why React?
Chapter 3 Declarative User Interfaces
To JSX or not to JSX
Chapter 4 React Components
React’s stateful components
Creating React components
Chapter 5 Composability
Chapter 6 Reusability
Input default values
Shared component behavior
Chapter 7 Working with User Input
Working with DOM nodes in the browser
Chapter 8 Component Lifecycle
Chapter 9 Let’s Build a Game with React
The memory grid game
S As many of you may know, Syncfusion is a provider of software components for the Microsoft platform. This puts us in the exciting but challenging position of always being on the cutting edge.
Whenever platforms or tools are shipping out of Microsoft, which seems to be about every other week these days, we have to educate ourselves, quickly.
Information is plentiful but harder to digest In reality, this translates into a lot of book orders, blog searches, and Twitter scans.
While more information is becoming available on the Internet and more and more books are being published, even on topics that are relatively new, one aspect that continues to inhibit us is the inability to find concise technology overview books.
We are usually faced with two options: read several 500+ page books or scour the web for relevant blog posts and other articles. Just as everyone else who has a job to do and customers to serve, we find this quite frustrating.
The Succinctly series This frustration translated into a deep desire to produce a series of concise technical books that would be targeted at developers working on the Microsoft platform.
We firmly believe, given the background knowledge such developers have, that most topics can be translated into books that are between 50 and 100 pages.
This is exactly what we resolved to accomplish with the Succinctly series. Isn’t everything wonderful born out of a deep desire to change things for the better?
The best authors, the best content Each author was carefully chosen from a pool of talented experts who shared our vision. The book you now hold in your hands, and the others available in this series, are a result of the authors’ tireless work. You will find original content that is guaranteed to get you up and running in about the time it takes to drink a few cups of coffee.
Free forever Syncfusion will be working to produce books on several topics. The books will always be free.
Any updates we publish will also be free.
As a component vendor, our unique claim has always been that we offer deeper and broader frameworks than anyone else on the market. Developer education greatly helps us market and sell against competing vendors who promise to “enable AJAX support with one click,” or “turn the moon to cheese!” Let us know what you think If you have any topics of interest, thoughts, or feedback, please feel free to send them to us at firstname.lastname@example.org.
We sincerely hope you enjoy reading this book and that it helps you better understand the topic of study. Thank you for reading.
It was 1993 when my geeky uncle realized my passion for computers and set me up on a path to empower that passion. I am forever grateful to him.
I was just a kid back then, with a natural love for math and physics, but when I started learning to program (using Pascal at the time), I knew I found my life-long hobby!
I am not sure I can describe coding as my hobby; it is certainly a career that pays the bills.
However, whenever I have some free time, I often just start coding for a side project, or learn that brand-new framework which smart person X tweeted about the other day.
When React was first released, I was an Ember fan. I still favor Ember over Angular today, but after learning the simple and powerful React, I left the school of MVC frameworks for good.
You can stalk me on Twitter @samerbuna or email me at email@example.com. You can also find a list of all the books and courses I have authored on my LinkedIn profile at linkedin.com/in/samerbuna.
Special thanks to my friend Julia Hunt for her excellent contributions to this book. Her feedback was spot-on as always, and this book is much better because of her.
I hope that you enjoy this book and that it will teach you the great benefits of the React library.
Since 2010 or so, Angular has been the MVC framework of choice for top developers. It's the most popular of all, and it offers the most impressive features out of the box. This all changed in 2015, and the change came from Facebook engineers this time. React started to claim a big portion of the market, with huge players adopting it: Netflix, Yahoo, and Airbnb, to name a few.
React is a huge revolutionary success; it’s simple and effective, and it changed the way we design our views for good.
React is not an MVC framework—it's just a view library. The concepts introduced by React are what make it a big deal. Other frameworks out there, Angular included, have learned from what React does and copied it in parts or fully.
This story, however, is not about a shiny new library from Facebook that is taking over. The story here is about MVC not being the best approach for big applications, and REST APIs, which have been the standard so far, not being the best solution for data communication between clients and servers.
Facebook engineers are challenging both the MVC and the REST standards. Here are their
alternative proposals, in summary:
Instead of MVC and data-binding, a front-end system should have a one-way data flow.
The views should never change the models directly; they can only read from the models.
For writing, the views trigger actions that eventually get dispatched to the models (the models are referred to as “Stores” in this flow). React fits perfectly in the way it reacts to the data changes in the stores. React components will be listening to those changes, and React will re-render the views efficiently when those changes happen.
Instead of REST and having the logic of what data to expose on the server-side, and instead of managing different end-points for different needs (for example, one end-point to expose top posts, one to expose a post, and one to expose a post with comments included), let the clients ask the servers for exactly what they need. The servers will then parse the clients' questions, and respond with what they asked for (no over-fetching or under-fetching). This is the concept behind the GraphQL runtime and query language that Facebook engineers released in 2015.
Instead of the standard recommendation of separating data and views, have the data requirement expressed in the view component itself. Since the view knows exactly which data elements it needs to render, these two shouldn’t be separate at all. This is the concept behind the Relay.js framework that Facebook engineers released in 2015.
This book will not cover GraphQL or Relay, but an understanding of React itself is the first step toward understanding the rest of the architecture proposed by Facebook engineers.
9 Why did I write this book?
I love big frameworks (and I cannot lie). They serve a great purpose, especially for young teams and startups. Lots of smart design decisions are already made for us, and there is a clear path to writing good code. This allows us to focus on our application’s logic.
Frameworks, however, come with some disadvantages, and for big applications and experienced developers, those disadvantages are sometimes a deal breaker.
I’ll name two of the relevant disadvantages of going with a framework:
Frameworks are not flexible, although some will claim to be. Frameworks want us to code everything a certain way; if we try to deviate from that way, the framework usually ends up fighting us about that.
Frameworks are big and full of features. If we need to use only a small piece of them, we have to include the whole thing anyway (hopefully this will change with HTTP2).
Some frameworks are going modular, which I think is great, but I am a big fan of the Unix
“Write programs that do one thing and do it well. Write programs to work together. Write programs to handle text streams, because that is a universal interface.” —Doug McIlroy React is a small program that does one thing, and it does it really well. There is a lot of buzz around the performance of React’s virtual DOM, but I don’t think that’s the greatest thing about React. The virtual DOM performance is a nice plus.
What React does really well is speak a common language between developers and browsers that allows developers to declaratively describe user interfaces, and to model the state of these interfaces and not the transactions on them. Basically, React taught us and the machines a new language that we both now understand: the language of UI outcomes.
This realization was the most important one I made about React, and I think it deserves a book focused on making it clear to everyone learning React.
Who should read this book?
React is a small but powerful library, with the power being more in the concepts than in the
implementation. Some of the concepts under which React operates are:
Reusable, composable, and stateful components In React, we build views using smaller components. We can reuse a single component in multiple places, with different states and properties, and components can contain other components. Every component in a React application has a private state that may change over time, and React will take care of updating the component's view when its state changes.
The nature of reactive updates
React's name is the simple explanation for this concept. When the state of a component changes, those changes need to be reflected somewhere. For example, we need to regenerate the HTML views for the browser's Document Object Model (DOM) whenever their state changes. With React, we do not need to worry about how to reflect the state changes; React will simply react to the changes and automatically update the views when needed.
The virtual representation of views in memory