React.js Essentials A fast-paced guide to designing and building scalable and maintainable web apps with React.js Artemij Fedosejev BIRMINGHAM - MUMBAI React.js Essentials Copyright © 2015 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information. First published: August 2015 Production reference: 1250815 Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK. ISBN 978-1-78355-162-0 www.packtpub.com Credits Author Artemij Fedosejev Reviewers Denis Radin Project Coordinator Bijal Patel Proofreader Safis Editing Sander Spies Konstantin Tarkus Commissioning Editor Dipika Gaonkar Acquisition Editor Nikhil Karkal Content Development Editor Pooja Nair Technical Editor Pramod Kumavat Copy Editor Rashmi Sawant Indexer Priya Sane Graphics Sheetal Aute Production Coordinator Shantanu N. Zagade Cover Work Shantanu N. Zagade Foreword Are you tired of writing jQuery callback soup? Does your blood boil when you need to write yet another template or configuration in your Angular app? Wondering why your application structure is so complex? If so, React.js is what you've been looking for. The declarative nature of React.js will help you build a UI for large applications with data that changes over time. As a professional iOS and JavaScript frontend consultant, I always recommend that clients use the best technology available. With the latest push from Facebook, React.js has proven itself to be a solid choice to build maintainable and performant user interfaces that help our clients ship products and move fast. I was excited the moment I heard about React.js Essentials and even more excited about getting my hands on a copy. Artemij Fedosejev, a veteran web developer and technical lead at a start-up company in London, demonstrates why a declarative programming style and one-way reactive data flow is often the best way to solve real-life programming problems. Whether you're working with consumer-facing applications or university research, React.js helps you build frontend UIs on both small and large scales. You'll never be lost in code again. Learn from Artemij's real-world experience in React.js Essentials, and you'll be creating user interfaces without increasing the complexity of your web application in no time. This book has everything you need to get started with React.js. It guides you from the first steps down to the intricacies of Jest. The best way to learn is by doing, and throughout this book, you will work on a hands-on React.js project and learn how to build an application that receives and collects the latest photos from Twitter. Software is constantly evolving and always moving forward. As developers, while practicing our craft, we always reach out to new horizons that stretch and improve our understanding of how great software should be built. Historically, software development and architecture has gone from structured programming to imperative programming. This made way for object-oriented programming (OOP) to become the de facto standard of software development today. Languages such as Java, Ruby, Objective-C, and many others have been built with the OOP paradigm in mind. However, there was one rebel that embraced functional programming and it has gone down its own evolutionary path, which is JavaScript. React.js is a manifestation of this renewed way of thinking: "UI as a function of state." Facebook has put in a lot of effort into making the reactive approach accessible to us through its library. Unlike other popular frameworks that use templating systems, such as Ember.js and Angular.js, React.js is a UI library that us