ebook img

Pro React 16 PDF

750 Pages·2019·18.267 MB·English
Save to my drive
Quick download
Download
Most books are stored in the elastic cloud where traffic is expensive. For this reason, we have a limit on daily download.

Preview Pro React 16

Pro React 16 — Adam Freeman Pro React 16 Adam Freeman Pro React 16 Adam Freeman London, UK ISBN-13 (pbk): 978-1-4842-4450-0 ISBN-13 (electronic): 978-1-4842-4451-7 https://doi.org/10.1007/978-1-4842-4451-7 Copyright © 2019 by Adam Freeman This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed. Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights. While the advice and information in this book are believed to be true and accurate at the date of publication, neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may be made. The publisher makes no warranty, express or implied, with respect to the material contained herein. Managing Director, Apress Media LLC: Welmoed Spahr Acquisitions Editor: Joan Murray Development Editor: Laura Berendson Coordinating Editor: Mark Powers Cover designed by eStudioCalamar Cover image designed by Freepik (www.freepik.com) Distributed to the book trade worldwide by Springer Science+Business Media New York, 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail [email protected], or visit www.springeronline.com. Apress Media, LLC is a California LLC and the sole member (owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc). SSBM Finance Inc is a Delaware corporation. For information on translations, please e-mail [email protected], for reprint, paperback, or audio rights, please email [email protected]. Apress titles may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our Print and eBook Bulk Sales web page at www.apress.com/bulk-sales. Any source code or other supplementary material referenced by the author in this book is available to readers on GitHub via the book’s product page, located at www.apress.com/9781484244500. For more detailed information, please visit www.apress.com/source-code. Printed on acid-free paper Dedicated to my lovely wife, Jacqui Griffyth. (And also to Peanut.) Contents About the Author ����������������������������������������������������������������������������������������������������xxi About the Technical Reviewer ������������������������������������������������������������������������������xxiii ■ Part I: Getting Started with React �������������������������������������������������������1 ■ Chapter 1: Your First React Application ����������������������������������������������������������������3 Preparing the Development Environment �������������������������������������������������������������������������3 Installing Node�js ������������������������������������������������������������������������������������������������������������������������������������3 Installing the create-react-app Package ������������������������������������������������������������������������������������������������4 Installing Git ��������������������������������������������������������������������������������������������������������������������������������������������4 Installing an Editor ����������������������������������������������������������������������������������������������������������������������������������5 Installing a Browser ��������������������������������������������������������������������������������������������������������������������������������5 Creating the Project ����������������������������������������������������������������������������������������������������������6 Understanding the Project Structure ������������������������������������������������������������������������������������������������������6 Adding the Bootstrap CSS Framework ���������������������������������������������������������������������������������������������������8 Starting the Development Tools ��������������������������������������������������������������������������������������������������������������8 Replacing the Placeholder Content ��������������������������������������������������������������������������������10 Displaying Dynamic Content ������������������������������������������������������������������������������������������11 Understanding State Data Changes ������������������������������������������������������������������������������������������������������13 Adding the To-Do Application Features ��������������������������������������������������������������������������15 Displaying the To-Do Items �������������������������������������������������������������������������������������������������������������������18 Introducing Additional Components �������������������������������������������������������������������������������21 Using the Child Components�����������������������������������������������������������������������������������������������������������������23 v ■ Contents Adding the Finishing Touches �����������������������������������������������������������������������������������������24 Managing the Visibility of Completed Tasks �����������������������������������������������������������������������������������������24 Persistently Storing Data ����������������������������������������������������������������������������������������������������������������������27 Summary ������������������������������������������������������������������������������������������������������������������������30 ■ Chapter 2: Understanding React ��������������������������������������������������������������������������31 Should I Use React? �������������������������������������������������������������������������������������������������������31 Understanding Round-Trip Applications �����������������������������������������������������������������������������������������������32 Understanding Single-Page Applications ���������������������������������������������������������������������������������������������32 Understanding Application Complexity �������������������������������������������������������������������������������������������������33 What Do I Need to Know? �����������������������������������������������������������������������������������������������33 How Do I Set Up My Development Environment? �����������������������������������������������������������33 What Is the Structure of This Book? �������������������������������������������������������������������������������33 Part 1: Getting Started with React ��������������������������������������������������������������������������������������������������������34 Part 2: Working with React �������������������������������������������������������������������������������������������������������������������34 Part 3: Creating Complete React Applications ��������������������������������������������������������������������������������������34 Are There Lots of Examples? ������������������������������������������������������������������������������������������34 Where Can You Get the Example Code? �������������������������������������������������������������������������36 Where Can You Get Corrections for This Book? ��������������������������������������������������������������36 How Can You Contact Me? ���������������������������������������������������������������������������������������������36 Summary ������������������������������������������������������������������������������������������������������������������������36 ■ Chapter 3: HTML, JSX, and CSS Primer ���������������������������������������������������������������37 Preparing for This Chapter ���������������������������������������������������������������������������������������������37 Preparing the HTML File and the Component ���������������������������������������������������������������������������������������38 Running the Example Application ���������������������������������������������������������������������������������������������������������39 Understanding HTML and DOM Elements ����������������������������������������������������������������������39 Understanding Element Content �����������������������������������������������������������������������������������������������������������41 Understanding Attributes ����������������������������������������������������������������������������������������������������������������������43 Creating HTML Elements Dynamically ��������������������������������������������������������������������������������������������������43 Creating Elements Dynamically Using a React Component ������������������������������������������������������������������45 vi ■ Contents Using Expressions in React Elements ����������������������������������������������������������������������������46 Mixing Expressions and Static Content ������������������������������������������������������������������������������������������������47 Performing Computation in Expressions ����������������������������������������������������������������������������������������������48 Accessing Component Properties and Methods �����������������������������������������������������������������������������������49 Using Expressions to Set Prop Values ��������������������������������������������������������������������������������������������������50 Using Expressions to Handle Events �����������������������������������������������������������������������������������������������������51 Understanding Bootstrap� �����������������������������������������������������������������������������������������������52 Applying Basic Bootstrap Classes ��������������������������������������������������������������������������������������������������������52 Using Bootstrap to Create Grids �����������������������������������������������������������������������������������������������������������54 Using Bootstrap to Style Tables ������������������������������������������������������������������������������������������������������������56 Using Bootstrap to Style Forms ������������������������������������������������������������������������������������������������������������58 Summary ������������������������������������������������������������������������������������������������������������������������59 ■ Chapter 4: JavaScript Primer ������������������������������������������������������������������������������61 Preparing for This Chapter ���������������������������������������������������������������������������������������������62 Using Statements �����������������������������������������������������������������������������������������������������������64 Defining and Using Functions�����������������������������������������������������������������������������������������64 Defining Functions with Parameters ����������������������������������������������������������������������������������������������������65 Defining Functions That Return Results �����������������������������������������������������������������������������������������������67 Using Functions as Arguments to Other Functions �������������������������������������������������������������������������������68 Using Variables and Types ����������������������������������������������������������������������������������������������69 Using the Primitive Types ���������������������������������������������������������������������������������������������������������������������71 Using JavaScript Operators ��������������������������������������������������������������������������������������������74 Using Conditional Statements ��������������������������������������������������������������������������������������������������������������74 The Equality Operator vs� the Identity Operator ������������������������������������������������������������������������������������75 Explicitly Converting Types �������������������������������������������������������������������������������������������������������������������76 Working with Arrays �������������������������������������������������������������������������������������������������������78 Using an Array Literal ���������������������������������������������������������������������������������������������������������������������������78 Reading and Modifying the Contents of an Array ���������������������������������������������������������������������������������78 Enumerating the Contents of an Array ��������������������������������������������������������������������������������������������������79 Using the Spread Operator �������������������������������������������������������������������������������������������������������������������80 Using the Built-in Array Methods ����������������������������������������������������������������������������������������������������������81 vii ■ Contents Working with Objects �����������������������������������������������������������������������������������������������������82 Using Object Literals �����������������������������������������������������������������������������������������������������������������������������83 Using Functions as Methods�����������������������������������������������������������������������������������������������������������������84 Using Classes ���������������������������������������������������������������������������������������������������������������������������������������85 Copying Properties from One Object to Another �����������������������������������������������������������������������������������87 Capturing Parameter Names from Objects �������������������������������������������������������������������������������������������88 Understanding JavaScript Modules ��������������������������������������������������������������������������������89 Creating and Using a JavaScript Module ����������������������������������������������������������������������������������������������89 Exporting Named Features from a Module �������������������������������������������������������������������������������������������92 Defining Multiple Named Features in a Module �����������������������������������������������������������������������������������93 Understanding JavaScript Promises ������������������������������������������������������������������������������95 Understanding the Asynchronous Operation Problem ��������������������������������������������������������������������������95 Using a JavaScript Promise ������������������������������������������������������������������������������������������������������������������96 Simplifying the Asynchronous Code �����������������������������������������������������������������������������������������������������97 Summary ������������������������������������������������������������������������������������������������������������������������97 ■ Chapter 5: SportsStore: A Real Application ���������������������������������������������������������99 Preparing the Project ���������������������������������������������������������������������������������������������������100 Installing Additional NPM Packages ���������������������������������������������������������������������������������������������������100 Adding the CSS Stylesheets to the Project �����������������������������������������������������������������������������������������102 Preparing the Web Service �����������������������������������������������������������������������������������������������������������������103 Running the Example Application �������������������������������������������������������������������������������������������������������105 Creating the Data Store ������������������������������������������������������������������������������������������������106 Creating the Data Store Actions and Action Creators �������������������������������������������������������������������������106 Creating the Shopping Features �����������������������������������������������������������������������������������108 Creating the Product and Category Components��������������������������������������������������������������������������������109 Connecting to the Data Store and the URL Router ������������������������������������������������������������������������������111 Adding the Shop to the Application ����������������������������������������������������������������������������������������������������114 Improving the Category Selection Buttons �����������������������������������������������������������������������������������������115 Adding the Shopping Cart ��������������������������������������������������������������������������������������������117 Extending the Data Store ��������������������������������������������������������������������������������������������������������������������117 Creating the Cart Summary Component ���������������������������������������������������������������������������������������������120 viii ■ Contents Adding the Cart Detail Component �����������������������������������������������������������������������������������������������������124 Adding the Cart URL to the Routing Configuration ������������������������������������������������������������������������������126 Summary ����������������������������������������������������������������������������������������������������������������������129 ■ Chapter 6: SportsStore: REST and Checkout �����������������������������������������������������131 Preparing for This Chapter �������������������������������������������������������������������������������������������131 Consuming the RESTful Web Service ���������������������������������������������������������������������������132 Creating a Configuration File ��������������������������������������������������������������������������������������������������������������133 Creating a Data Source �����������������������������������������������������������������������������������������������������������������������133 Extending the Data Store ��������������������������������������������������������������������������������������������������������������������134 Updating the Action Creator ����������������������������������������������������������������������������������������������������������������135 Paginating Data ������������������������������������������������������������������������������������������������������������136 Understanding the Web Service Pagination Support ��������������������������������������������������������������������������138 Changing the HTTP Request and Action ���������������������������������������������������������������������������������������������139 Creating the Data Loading Component �����������������������������������������������������������������������������������������������140 Updating the Store Connector Component �����������������������������������������������������������������������������������������141 Updating the All Category Button ��������������������������������������������������������������������������������������������������������143 Creating the Pagination Controls ��������������������������������������������������������������������������������������������������������144 Adding the Checkout Process ��������������������������������������������������������������������������������������150 Extending the REST Data Source and the Data Store �������������������������������������������������������������������������151 Creating the Checkout Form ���������������������������������������������������������������������������������������������������������������153 Simplifying the Shop Connector Component ����������������������������������������������������������������162 Summary ����������������������������������������������������������������������������������������������������������������������163 ■ Chapter 7: SportsStore: Administration ������������������������������������������������������������165 Preparing for This Chapter �������������������������������������������������������������������������������������������165 Running the Example Application �������������������������������������������������������������������������������������������������������166 Creating a GraphQL Service �����������������������������������������������������������������������������������������167 Defining the GraphQL Schema ������������������������������������������������������������������������������������������������������������167 Defining the GraphQL Resolvers ���������������������������������������������������������������������������������������������������������168 Updating the Server ����������������������������������������������������������������������������������������������������������������������������170 ix ■ Contents Creating the Order Administration Features �����������������������������������������������������������������173 Defining the Order Table Component ��������������������������������������������������������������������������������������������������174 Defining the Connector Component ����������������������������������������������������������������������������������������������������175 Configuring the GraphQL Client ����������������������������������������������������������������������������������������������������������178 Configuring the Mutation ��������������������������������������������������������������������������������������������������������������������180 Creating the Product Administration Features �������������������������������������������������������������182 Connecting the Product Table Component ������������������������������������������������������������������������������������������184 Creating the Editor Components ���������������������������������������������������������������������������������������������������������187 Updating the Routing Configuration ���������������������������������������������������������������������������������������������������190 Summary ����������������������������������������������������������������������������������������������������������������������192 ■ Chapter 8: SportsStore: Authentication and Deployment ����������������������������������193 Preparing for This Chapter �������������������������������������������������������������������������������������������193 Adding Authentication for GraphQL Requests ��������������������������������������������������������������197 Understanding the Authentication System �����������������������������������������������������������������������������������������197 Creating the Authentication Context ���������������������������������������������������������������������������������������������������198 Creating the Authentication Form �������������������������������������������������������������������������������������������������������201 Guarding the Authentication Features ������������������������������������������������������������������������������������������������202 Adding a Navigation Link for the Administration Features �����������������������������������������������������������������204 Preparing the Application for Deployment ��������������������������������������������������������������������205 Enabling Lazy Loading for the Administration Features ���������������������������������������������������������������������205 Creating the Data File �������������������������������������������������������������������������������������������������������������������������207 Configuring the Request URLs ������������������������������������������������������������������������������������������������������������207 Building the Application ����������������������������������������������������������������������������������������������������������������������208 Creating the Application Server ����������������������������������������������������������������������������������������������������������208 Testing the Production Build and Server ��������������������������������������������������������������������������������������������209 Containerizing the SportsStore Application ������������������������������������������������������������������210 Installing Docker ���������������������������������������������������������������������������������������������������������������������������������210 Preparing the Application �������������������������������������������������������������������������������������������������������������������211 Creating the Docker Container �����������������������������������������������������������������������������������������������������������211 Running the Application ����������������������������������������������������������������������������������������������������������������������212 Summary ����������������������������������������������������������������������������������������������������������������������214 x

See more

The list of books you might like

Most books are stored in the elastic cloud where traffic is expensive. For this reason, we have a limit on daily download.