39,59 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Sprache: Englisch
Master the art of building modern web applications using React
About This Book
- Write a complete application in React using an array of supporting libraries, both specifically React-related and general purpose
- Understand what makes React stand apart from the vast majority of JS frameworks available through detailed explanations and concise examples
- Explore the React ecosystem and how to integrate React with other modern web technologies
Who This Book Is For
This book is ideal for web developers possessing strong core JavaScript fundamentals who are also interested in learning what React brings to the architectural table. Previous experience with React or other web frameworks isn't required, but may help.
What You Will Learn
- Understand the React component lifecycle and core concepts such as props and states
- Craft forms and implement form validation patterns using React
- Explore the anatomy of a modern single-page web application
- Develop an approach for choosing and combining web technologies without being paralyzed by the options available
- Create a complete single-page application
- Start coding with a plan using an application design process
- Add to your arsenal of prototyping techniques and tools
- Make your React application feel great using animations
In Detail
React stands out in the web framework crowd through its approach to composition. This approach yields blazingly fast rendering capabilities. This book will help you understand what makes React special. It starts with the fundamentals and uses a pragmatic approach, focusing on clear development goals. You'll learn how to combine many web technologies surrounding React into a complete set for constructing a modern web application.
With this text, you'll blitz the basics then swiftly move on to advanced topics such as form validation and complete application construction. You'll also explore several design activities which will help you develop your web applications with a thoughtful plan. Finally, you'll learn several methods for implementing slick animations using React.
Style and approach
This is a comprehensive, hands-on guide that helps you get a solid understanding of the ins and outs of React development.
For application development, you will get a high view of the anatomy where you will zoom into each part and make decisions by moving through the application's anatomy; selecting a solution that fits the problem and lines up with your goals.
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 256
Veröffentlichungsjahr: 2016
Ähnliche
Table of Contents
Mastering React
Mastering React
Copyright © 2016 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 authors, 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: February 2016
Production reference: 1170216
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-78355-856-8
www.packtpub.com
Credits
Authors
Adam Horton
Ryan Vice
Reviewer
Tung Dao
Commissioning Editor
Veena Pagare
Acquisition Editor
Kirk D'costa
Content Development Editor
Rashmi Suvarna
Technical Editor
Vivek Pala
Copy Editor
Neha Vyas
Project Coordinator
Judie Jose
Proofreader
Safis Editing
Indexer
Mariammal Chettiyar
Graphics
Disha Haria
Production Coordinator
Nilesh Mohite
Cover Work
Nilesh Mohite
Foreword
We've all heard the old phrase, "Don't reinvent the wheel."
On the surface, I understand the wisdom of this ancient idiom, especially in the way it relates to software craftsmanship. Programmers are expected to always work within known patterns and get it shipped as fast as possible. We have so many words in software engineering to disparage the act of seemingly needless experimentation and rework—stop yak shaving, bikeshedding, gold plating, tinkering, configuring, fiddling, experimenting, reworking, or creating special snowflake architectures. Also, we have heard "stop chasing waterfalls and stick to the rivers and lakes that you're used to." Indeed, the noblest of software developers proudly stand on the shoulders of giants by implementing best practices and established standards. By contrast, the epitome of software self-indulgence is a shop with Not Invented Here Syndrome. Stick to the plan, stay focused, stop wasting time, and do what we already know works.
If ever a community of software developers rejected the total adoption of this worldview, it is the serious practitioners of JavaScript. The constantly moving target of browser capability, the never-ending inflow of developers with varied backgrounds, and the ever-evolving standards of JavaScript itself conspire to forge an expectation of mutability in the stack.
Reinvention is commonplace and always has been. When interacting with the DOM on a browser was problematic, a target for reinvention was set. Sizzle, jQuery, and eventually the native implementation, querySelectorAll, were born of a fundamental dissatisfaction with existing standards. From the ashes of the best practice of XML, JSON ascended as the dominant standard for web communication. Download a JavaScript framework today, and it could be using any number of patterns. Look upon the wheels of varying shapes and sizes: MVVM, MVC, MVW, MVP, Chain of Responsibility, PubSub, Event-Driven, Declarative, Functional, Object-Oriented, Modules, Prototypes. There is no one true way to architect a program. Furthermore, even a cursory glance at the world of preprocessors, such as CoffeeScript, LiveScript, Babel, Typescript, and ArnoldC, proves that developers are feverishly reinventing even JavaScript itself. Nothing is sacred, and perhaps that is why JavaScript has progressed so rapidly.
I remember the first time I learned about React. I was attending a fairly well-known conference in San Francisco, and during lunch, I had the fortune of sitting next to some developers from Facebook and Khan Academy, who made for some lively conversation. At the time, the most popular tools were Ember, Backbone, and—of course—Angular (there were something to the tune of thirty talks on that topic at the conference). We began to discuss the pros and cons of the existing tooling, and some of the difficulties, we felt, were because of the prevailing opinions on how to abstract a web application. It was then that the person sitting next to me said, "Perhaps you should join the React family," and he invited me to see his one and only talk that day. Of course, I went. It ended up being the most valuable (and at the time, controversial) presentation I attended.
This lunchtime conversationalist, who had introduced himself as Pete Hunt, turned out to be a core contributor to a new way of thinking about web applications. I attended his talk and knew immediately that I was looking upon the next great reinvention of the wheel in JavaScript. Normal two-way data binding techniques were eschewed for a clearer one-way data flow, and the standard MVC pattern of application organization had been rethought and re-forged into actions, stores, and dispatchers. However, the most interesting and radical feature of React was its way of dealing with the troublesome DOM—completely and unapologetically rebuilding it from the ground up in JavaScript.
If you've picked up this book, you are already interested in the future of JavaScript. This recurring theme of reinvention has been more relevant than ever in the last few years. React, ES6, modern build systems, scaffolding, and many more are the new tools populating the JavaScript landscape. This book is important because it teaches React alongside this modern ecosystem. After reading this book, you'll understand the principles needed to plan, design, and, ultimately, write a real application.
I can think of no better teacher for this exciting journey into the frontier of application design than Adam. I first met him when I was a student and have since had the pleasure of seeing him speak at Thunder Plains, a conference focused on the latest and greatest in the world of web development. He presented a whimsical collection of his personal projects, such as a lander game-based midpoint displacement and a completely rebuilt 3D ray casting engine in vanilla JavaScript.
Adam is a unique flavor of programmer. He works like a scientist, tinkerer, and craftsman. He is neither afraid to rebuild an existing system to better understand it, nor is he afraid to experiment in new ways to seek better ways of achieving his goals. When navigating these exciting new happenings in the world of JavaScript, you need a guide that encourages critical thinking, exploration, and discovery.
Your other guide is Ryan Vice, who has, over the years, thrice held the title of Microsoft MVP, published books on enterprise architecture, spoken frequently at industry events, and worked in the battle-hardened trenches of software development. More importantly though, Ryan created his own shop, Vice Software LLC, that puts React at the center of their webstack to solve their problems. His real-world experience in production of React projects qualifies him as an excellent teacher to help you on your way to building your own applications on the bleeding-edge of the web.
Reinventing the wheel is necessary. If you disagree, then I challenge you to attach to your car the first wheels ever invented. Stick to your convictions and roll mirthfully along the highway propelled by cumbersome stone disks. I will be dreaming of flying cars and betting on JavaScript.
Jesse Harlin
http://jesseharlin.net/
JavaScript Architect and Community Leader
About the Authors
Adam Horton is an avid retro gamer as well as a creator, destroyer, and rebuilder of all things Web, computing, and gaming. He started his career as a firmware developer for the high-end Superdome server division at Hewlett Packard. There, the JavaScript and C he wrought directed the power, cooling, health, and configuration of those behemoth devices. Since then, he has been a web developer for PayPal, utilizing cross-domain JavaScript techniques with an emphasis on user identity. Lately, at ESO Solutions, he's a lead JavaScript developer for next-generation, pre-hospital electronic health record (EHR) field collection applications.
Adam believes in an inclusive, ubiquitous, and open Web. He values pragmatism and practice over dogma in the design and implementation of computing applications and education.
I'd like to thank my wife for her enduring patience and support. She is the wind at my back that presses forward all of my endeavors, including this book. I'd also like to thank my parents for constantly fueling a stray rocket of a child while he tuned his guidance system.
Ryan Vice is the founder and chief architect of Vice Software, which specializes in practical, tailored solutions for clients, whether they are looking to get their MVP to market or modernize existing applications. On top of offering more competitive prices across the board, Vice Software offers skill-based pricing, which means you only pay architect rates when needed and pay much lower production rates for simpler feature work. Ryan has also been awarded Microsoft's MVP award three times, has published one other book on software architecture, and frequently speaks at conferences and events in Texas. Additionally, Ryan is lucky enough to be married to his wife, Heather, and spends most of his free time trying to keep up with their three kids, Grace, Dylan, and Noah.
About the Reviewer
Tung Dao is a full-stack developer with several years of experience building websites and services.
Currently, he works as a software engineer at FPT Software, Vietnam, where he builds RESTful web services involving NoSQL and Elasticsearch. In his free time, he is busy building web apps in Clojure/Go or hacking his Raspberry Pi.
Nowadays, his front-end work is mostly done in ClojureScript/Reagent (React binding in Clojure). Working over a binding did hide some of the great ideas in React. This book is a refresher to him, as he works with the next generation of JavaScript (ES6) and the re-explorer core React philosophy.
Many thanks to the authors and the staff at Packt Publishing for all their hard work and support.
www.PacktPub.com
Support files, eBooks, discount offers, and more
For support files and downloads related to your book, please visit www.PacktPub.com.
Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at <[email protected]> for more details.
At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.
https://www2.packtpub.com/books/subscription/packtlib
Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can search, access, and read Packt's entire library of books.
Why subscribe?
Free access for Packt account holders
If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view 9 entirely free books. Simply use your login credentials for immediate access.
Preface
The book before you is a collaboration between myself—a web-focused, day-to-day code slinger—and Ryan Vice—a veteran .NET expert turned web application Maven and entrepreneur. I met Ryan at my current company while creating very complex web applications for emergency response outfits, such as EMS. At that time, the company was building a revolution of its flagship product. While it was still a very early time for React, it offered something above and beyond all the current MV* frameworks: a fresh approach to blazing-fast rendering. Since speed is paramount in the emergency response industry, we embraced React. When an opportunity came along to write about React, Ryan tapped me for assistance, and this book is the result of that.
It's great timing for a technology such as React. The open web platform has succeeded because of a simple tenet: never break the Web. As a result, the DOM, the in-browser data representation of a rendered web page, has grown to be enormous and somewhat unwieldy. Every small touch on the DOM cascades into a flurry of calculation and reconciliation in order to update pixels on the screen. React treats the DOM as the expensive resource that it is and makes operations on the DOM minimal. The time saved is better spent running your complex application logic.
In this book, you'll learn the fundamentals of React as well as a pragmatic approach to making web applications. You'll also learn how to choose the right tools for your needs. In the first three chapters, we'll start by thoroughly covering basic React topics such as state, props, and JSX, as well as the more complex subject of forms and validation. Chapter 4, Anatomy of a React Application, is something unique to a book like this: a tour of web application anatomy and some design techniques that can help you formulate a clear plan to build your apps. In chapters 5 through 9, we'll build a multiuser blog application using the design techniques and supporting libraries explored in the previous two chapters. Finally, in Chapter 10, Animation in React, we'll have some fun by navigating through the many ways you can create cool animations using React.
What this book covers
Chapter 1, Introduction to React, explains the basics of React JS, starting with a simple Hello World example and moving forward thru types of React entities and their definitions.
Chapter 2, Component Composition and Lifecycle, explores nesting components and managing their state as they come and go from the DOM.
Chapter 3, Dynamic Components, Mixins, Forms, and More JSX, explores React form basics and patterns for validation in React.
Chapter 4, Anatomy of a React Application, teaches how to approach web application design and how to choose from the vast menu of web technologies available within the context of React being your primary choice. Practice technical design and learn how to generate artifacts that guide development.
Chapter 5, Starting a React Application, begins with a fully featured React multiuser blog application. Prepare a development environment. Install all of the tools. Scaffold the application views.
Chapter 6, React Blog App Part 1 – Actions and Common Components, establishes a application communication strategy using Reflux Actions. Here, we will create some common components.
Chapter 7, React Blog App Part 2– Users, explains how to implement user account management for our prototype application.
Chapter 8, React Blog App Part 3 – Posts, covers creating and viewing blog posts.
Chapter 9, React Blog App Part 4 – Infinite Scroll and Search, explains how to add two features: infinite scroll loading and search.
Chapter 10, Animation in React, reveals web animation techniques in React.
What you need for this book
All of the software used in this book is open source, so it's free to use. You'll need a web browser (obviously) and the ability to install Node and npm. Some command-line access will be needed. For the command-line tasks, Bash is recommended. It is readily available for OSX and Linux as well as Windows through Git (git-bash). In this book, we'll use Node 4.x and React 0.14.
Who this book is for
This book is focused on web professionals who already understand JavaScript, CSS, and working in the web-browser environment. Previous experience with other web application frameworks isn't required, but may help. Comfort with the command line will also make things easier.
About the code samples
The first three chapters in this book are a React primer. These chapters are example driven and contain concise working examples of each concept which can be easily run in an Internet connected browser. A similar format is used in Chapter 10, Animation in React for the animation examples. The rest of the chapters with code listings, 4 thru 9, are contained in ZIP files included with the book and obtained from the Packt website.
Where to get the code samples
Each code sample in the first 3 chapters is hosted on Ryan's GitHub (RyanAtViceSoftware) as a Gist (https://gist.github.com/RyanAtViceSoftware). A Gist is a small Git repository that is meant to store only a few files and they are a perfect fit for the kind of small example we will be looking at in the first three chapters.
Similarly, the Chapter 10, Animation in React animation examples can be found on Adam's GitHub Gists (https://gist.github.com/digitalicarus).
How to run the code
After the first few examples, we will take advantage of the integration that exists between JsFiddle (http://JsFiddle.net/), a JavaScript online sandbox, and GitHub Gists. The integration allows for each Gist referenced in the text to be opened as a "Fiddle" and run live in a browser. Below is a screen shot of a Fiddle.
Note
Fiddle: http://j.mp/MasteringReact-1-2-1-Fiddle
As you can see, there are four sections to a JsFiddle:
I encourage you to open each fiddle as you follow along and run the fiddle by clicking the Run button shown as follows:
Once you have opened a code sample, play around with the code a bit to make sure you understand how everything works.
Note
We will cover some of the basics of using JsFiddle as we go along but would encourage you to take a look at the documentation if you haven't used JsFiddle before (http://doc.jsfiddle.net/).
JsFiddle is designed to allow for experimenting with code and you will find it's a great tool to allow for you to quickly learn the concepts presented here in an interactive fashion.
Reader feedback
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of.
To send us general feedback, simply e-mail <[email protected]>, and mention the book's title in the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.
Customer support
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Downloading the example code
You can download the example code files from your account at http://www.packtpub.com for all the Packt Publishing books you have purchased. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
Errata
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.
To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata section.
Piracy
Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors and our ability to bring you valuable content.
Questions
If you have a problem with any aspect of this book, you can contact us at <[email protected]>, and we will do our best to address the problem.
