Isomorphic Web Applications: Universal Development with React

598 Pages·2018·8.138 MB·English

by  Elyse Kolker Gordon

Isomorphic Web
Applications: Universal
Development with React
Elyse Kolker Gordon
Copyright
For online information and ordering of this and other
Manning books, please visit www.manning.com. The
publisher offers discounts on this book when ordered in
quantity. For more information, please contact
Special Sales Department
Manning Publications Co.
20 Baldwin Road
PO Box 761
Shelter Island, NY 11964
Email: [email protected]
©2018 by Manning Publications Co. All rights reserved.
No part of this publication may be reproduced, stored in
a retrieval system, or transmitted, in any form or by
means electronic, mechanical, photocopying, or
otherwise, without prior written permission of the
publisher.
Many of the designations used by manufacturers and
sellers to distinguish their products are claimed as
trademarks. Where those designations appear in the
book, and Manning Publications was aware of a
trademark claim, the designations have been printed in
initial caps or all caps.
Recognizing the importance of preserving what has
been written, it is Manning’s policy to have the books we
publish printed on acid-free paper, and we exert our best
efforts to that end. Recognizing also our responsibility to
conserve the resources of our planet, Manning books are
printed on paper that is at least 15 percent recycled and
processed without the use of elemental chlorine.
Manning Publications Co.
20 Baldwin Road
PO Box 761
Shelter Island, NY 11964
Development editor: Helen Stergius
Review editor: Aleksandar Dragosavljević
Technical development editor: Doug Warren
Project manager: Kevin Sullivan
Copyeditor: Sharon Wilkey
Proofreader: Corbin Collins
Technical proofreader: Devang Paliwal
Typesetter and cover designer: Marija Tudor
Illustrator: Chuck Larson
ISBN 9781617294396
Printed in the United States of America
1 2 3 4 5 6 7 8 9 10 – EBM – 23 22 21 20 19 18
DEDICATION
To my mom, my first editor
And to Norma Lee Williams and Richard Allen
Kolker, who each encouraged me to be creative,
think critically, and walk through the world with
compassion
Brief Table of Contents
Copyright
Brief Table of Contents
Table of Contents
Preface
Acknowledgments
About this book
About the author
About the cover illustration
1. First steps
Chapter 1. Introduction to isomorphic web
application architecture
Chapter 2. A sample isomorphic app
2. Isomorphic app basics
Chapter 3. React overview
Chapter 4. Applying React
Chapter 5. Tools: webpack and Babel
Chapter 6. Redux
3. Isomorphic architecture
Chapter 7. Building the server
Chapter 8. Isomorphic view rendering
Chapter 9. Testing and debugging
Chapter 10. Handling server/browser differences
Chapter 11. Optimizing for production
4. Applying isomorphic architecture with other tools
Chapter 12. Other frameworks: implementing
isomorphic without React
Chapter 13. Where to go from here
A. React Router 4 basics
B. Server-side React Router
C. Additional React Router 4 use cases
Isomorphic application flow
Best practices for isomorphic web applications
Index
List of Figures
List of Tables
List of Listings
Table of Contents
Copyright
Brief Table of Contents
Table of Contents
Preface
Acknowledgments
About this book
About the author
About the cover illustration
1. First steps
Chapter 1. Introduction to isomorphic web
application architecture
1.1. Isomorphic web app overview
1.1.1. Understanding how it works
1.1.2. Building our stack
1.2. Architecture overview
1.2.1. Understanding the application flow
1.2.2. Handling the server-side request
1.2.3. Rendering in the browser
1.3. Advantages of isomorphic app architecture
1.3.1. SEO benefits
1.3.2. Performance benefits
1.3.3. No JavaScript? No problem!
1.3.4. Maintenance and developer benefits
1.3.5. Challenges and trade-offs
1.4. Building the view with React
1.5. Business logic and model: Redux
1.6. Building the app: webpack
Summary
Chapter 2. A sample isomorphic app
2.1. What you’ll build in this chapter: recipes
example app
2.1.1. Building blocks: libraries and tools
2.1.2. Download the example code
2.2. Tools
2.2.1. Setting up the environment and
installing packages
2.2.2. Running the server
2.2.3. Building the code for the browser
with webpack
2.3. The view
2.3.1. React and components
2.3.2. Using JSX
2.3.3. App wrapper component
2.3.4. Building child components
2.3.5. HTML container
2.4. App state: Redux
2.4.1. Understanding Redux
2.4.2. Actions: fetching the recipes data
2.4.3. React and Redux
2.5. Server rendering
2.5.1. Setting up a basic route on the server
with middleware
2.5.2. Fetching the data
2.5.3. Rendering the view and
serializing/injecting the data
2.6. Browser rendering
2.6.1. Deserializing the data and hydrating
the DOM
Summary
2. Isomorphic app basics
Chapter 3. React overview
3.1. Overview of React
3.2. Virtual DOM
3.3. Todo app overview
3.4. Your first React component
3.4.1. JSX basics