React Quickly, Second Edition

Learn the skills you need to build React applications quickly! This fully revised second edition introduces functional components, React hooks, static site generators, and more. In React Quickly, Second Edition you will learn how to Master React fundamentals Implement best practices and the components of good architecture Build intuitive user interfaces Create dynamic components with JSX Use lightweight functional components in React Make your app interactive with stateful components Utilize React hooks Handle events like button clicks and pass data between components Build your skills with React fast! There’s no slow theory and tedious history in React Quickly—you’ll dive into React code right from the very first chapter. As you go, you’ll explore over 80 useful and practical examples that put React into action. This new second edition has been completely rewritten to cover the latest developments in the React framework. Perfect, whether you’re a React beginner or an experienced pro looking to keep their skills up to date. Purchase of the print book includes a free eBook in PDF, Kindle, and ePub formats from Manning Publications. About the technology React makes it a breeze to build beautiful, reliable web frontends. This amazing JavaScript library has a modular architecture, so you can create, combine, and test components seamlessly. React is perfect for small prototypes, enterprise scale sites, and everything in between. About the book React Quickly, Second Edition offers a unique approach to learning the React framework. More than 80 concise examples guide you from your first steps through advanced applications. You’ll appreciate the up-to-date coverage of functional components, React hooks, and web accessibility, along with interesting projects to practice your new skill. What's inside Master React fundamentals Best practices of component-based design Create dynamic components with JSX Make your app interactive with stateful components About the reader For developers comfortable building web applications with JavaScript. About the author Morten Barklund is an expert in React, web testing, and accessibility and is the founder of Coding Heaven. Azat Mardan is a seasoned software engineer, startup mentor, and best-selling author. inside front cover Praise for the First Edition React Quickly Copyright dedication contents front matter preface acknowledgments about this book Audience Roadmap Source code liveBook discussion forum software requirements about the authors about the cover illustration 1 Meeting React 1.1 Benefits of using React 1.1.1 Simplicity 1.1.2 Speed and testability 1.1.3 Ecosystem and community 1.2 Disadvantages of React 1.3 How React can fit into your website 1.3.1 Single-page applications and React 1.3.2 The React stack 1.4 Your first React app: Hello World 1.4.1 The result 1.4.2 Writing the application 1.4.3 Installing and running a web server 1.4.4 Going to the local website 1.5 Quiz Quiz answers Summary 2 Baby steps with React 2.1 Creating a new React app 2.1.1 React project commands 2.1.2 File structure 2.1.3 Templates 2.1.4 Pros and cons 2.2 A note about the examples in this book 2.3 Nesting elements 2.3.1 Node hierarchy 2.3.2 Simple nesting 2.3.3 Siblings 2.4 Creating custom components 2.5 Working with properties 2.5.1 A single property 2.5.2 Multiple properties 2.5.3 The special property: children 2.6 Application structure 2.7 Quiz Quiz answers Summary 3 Introduction to JSX 3.1 Why do we use JSX? 3.1.1 Before and after JSX 3.1.2 Keeping HTML and JavaScript together 3.2 Understanding JSX 3.2.1 Creating elements with JSX 3.2.2 Using JSX with custom components 3.2.3 Multiline JSX objects 3.2.4 Outputting variables in JSX 3.2.5 Working with properties in JSX 3.2.6 Branching in JSX 3.2.7 Comments in JSX 3.2.8 Lists of JSX objects 3.2.9 Fragments in JSX 3.3 How to transpile JSX 3.4 React and JSX gotchas 3.4.1 Self-closing elements 3.4.2 Special characters 3.4.3 String conversion 3.4.4 The style attribute 3.4.5 Reserved names: class and for 3.4.6 Multiword attributes 3.4.7 Boolean attribute values 3.4.8 Whitespace 3.4.9 data- attributes 3.5 Quiz Quiz answers Summary 4 Functional Components 4.1 The shorter way to write React components 4.1.1 An example application 4.1.2 Destructuring properties 4.1.3 Default values 4.1.4 Pass-through properties 4.2 A comparison of component types 4.2.1 Benefits of functional components 4.2.2 Disadvantages of functional components 4.2.3 Nonfactors between component types 4.2.4 Choosing the component type 4.3 When not to use a functional component 4.3.1 Error boundary 4.3.2 Codebase is class-based 4.3.3 Library requires class-based components 4.3.4 Snapshot before updating 4.4 Conversion from a class-based to a functional component 4.4.1 Version 1: Render only 4.4.2 Version 2: Class method as utility 4.4.3 Version 3: Real class method 4.4.4 Version 4: Constructor 4.4.5 More complexity equals harder conversion 4.5 Quiz Quiz answers Summary 5 Making React interactive with states 5.1 Why is React state relevant? 5.1.1 React component state 5.1.2 Where should I put state? 5.1.3 What kind of information do you store in component state? 5.1.4 What not to store in state 5.2 Adding state to a functional component 5.2.1 Importing and using a hook 5.2.2 Initializing the state 5.2.3 Destructuring the state value and setter 5.2.4 Using the state value 5.2.5 Setting the state 5.2.6 Using multiple states 5.2.7 State scope 5.3 Stateful class-based components 5.3.1 Similarities with the useState hook 5.3.2 Differences from the useState hook 5.4 Quiz Quiz answers Summary 6 Effects and the React component life cycle 6.1 Running effects in components 6.1.1 Running an effect on mount 6.1.2 Running an effect on mount and cleanup on unmount 6.1.3 Running cleanup on unmount 6.1.4 Running an effect on some renders 6.1.5 Running an effect and cleanup on some renders 6.1.6 Running an effect synchronously 6.2 Understanding rendering 6.2.1 Rendering on mount 6.2.2 Rendering on parent render 6.2.3 Rendering on state update 6.2.4 Rendering inside functions 6.3 The life cycle of a class-based component 6.3.1 Life cycle methods 6.3.2 Legacy life cycle methods 6.3.3 Converting life cycle methods to hooks 6.4 Quiz Quiz answers Summary 7 Hooks to fuel your web applications 7.1 Stateful components 7.1.1 Simple state values with useState 7.1.2 Creating complex state with useReducer 7.1.3 Remembering a value without re-rendering with useRef 7.1.4 Easier multicomponent state with useContext 7.1.5 Low-priority state updates with useDeferredValue and useTransition 7.2 Component effects 7.3 Optimizing performance by minimizing re-rendering 7.3.1 Memoizing any value with useMemo 7.3.2 Memoizing functions with useCallback 7.3.3 Creating stable DOM identifiers with useId 7.4 Creating complex component libraries 7.4.1 Creating component APIs with useImperativeHandle 7.4.2 Better debugging of hooks with useDebugValue 7.4.3 Synchronizing non-React data with useSyncExternalStore 7.4.4 Running effect before rendering with useInsertionEffect 7.5 The two key principles of hooks 7.6 Quiz Quiz answers Summary 8 Handling events in React 8.1 Handling DOM events in React 8.1.1 Basic event handling in React 8.2 Event handlers 8.2.1 Definition of event handlers 8.2.2 Event objects 8.2.3 React event objects 8.2.4 Synthetic event object persistence 8.3 Event phases and propagation 8.3.1 How phases and propagation work in the browser 8.3.2 Handling event phases in React 8.3.3 Unusual event propagation 8.3.4 Nonbubbling DOM events 8.4 Default actions and how to prevent them 8.4.1 The default event action 8.4.2 Preventing default 8.4.3 Other default events 8.5 React event objects in summary 8.6 Event handler functions from properties 8.7 Event handler generators 8.8 Listening to DOM events manually 8.8.1 Listening for window and document events 8.8.2 Dealing with unsupported HTML events 8.8.3 Combining React and DOM event handling 8.9 Quiz Quiz answers Summary 9 Working with forms in React 9.1 Controlled vs. uncontrolled inputs 9.2 Managing controlled inputs 9.2.1 Filtered input 9.2.2 Masked input 9.2.3 Many similar inputs 9.2.4 Form submission 9.2.5 Other inputs 9.2.6 Other properties 9.3 Managing uncontrolled inputs 9.3.1 Opportunities 9.3.2 File inputs 9.4 Quiz Quiz answers Summary 10 Advanced React hooks for scaling 10.1 Resolving values across components 10.1.1 React Context 10.1.2 Context states 10.1.3 React Context deconstructed 10.2 How to handle complex state 10.2.1 Interdependent state 10.3 Custom hooks 10.3.1 When is something a custom hook? 10.3.2 When should I use a custom hook? 10.3.3 Where can I find custom hooks? 10.4 Quiz Quiz answers Summary 11 Project: Website menu 11.1 Scaffolding for the menu 11.1.1 HTML output 11.1.2 Component hierarchy 11.1.3 Icons 11.1.4 CSS 11.1.5 Template 11.1.6 Source code 11.1.7 In the browser 11.2 Rendering a static menu 11.2.1 The goal of this exercise 11.2.2 Desired HTML output 11.2.3 Component tree 11.2.4 Source code 11.2.5 In the browser 11.3 Homework: A dynamic menu 11.3.1 Goal for this step 11.3.2 Hints for solving this step 11.3.3 Component hierarchy 11.3.4 What now? 11.4 Homework: Retrieving items from context 11.4.1 Goal for this step 11.4.2 Hints for solving this step 11.4.3 Component hierarchy 11.4.4 What now? 11.5 Homework: Optional link 11.5.1 Goal for this step 11.5.2 Hints for solving this step 11.5.3 Component hierarchy 11.5.4 What now? 11.6 Final thoughts Summary 12 Project: Timer 12.1 Scaffolding for the timer 12.1.1 HTML output 12.1.2 Component hierarchy 12.1.3 Project structure 12.1.4 Source code 12.1.5 Running the application 12.2 Adding a simple play/pause timer 12.2.1 The goal of this exercise 12.2.2 Component hierarchy 12.2.3 Updated project structure 12.2.4 Source code 12.2.5 Running the application 12.3 Homework: Initializing the timer to a custom time 12.4 Homework: Resetting timers 12.5 Homework: Multiple timers Summary 13 Project: Task manager 13.1 Scaffolding for the task manager 13.1.1 Component hierarchy 13.1.2 Project structure 13.1.3 Source code 13.1.4 Running the application 13.2 A simple list of tasks 13.2.1 The goal of this exercise 13.2.2 Component hierarchy 13.2.3 Updated project structure 13.2.4 Source code 13.2.5 Running the application 13.3 Homework: Task steps and progress 13.4 Homework: Prioritization of steps 13.5 Homework: Drag and drop 13.6 Conclusion Summary index inside back cover Learn the skills you need to build React applications quickly! This fully revised second edition introduces JSX, functional components, React hooks, event and form handling, and more.In React Quickly, Second Edition you will learn how to: Master React fundamentals Implement best practices and the components of good architecture Build intuitive user interfaces Create dynamic components with JSX Use lightweight functional components in React Make your app interactive with stateful components Utilize React hooks Handle events like button clicks and pass data between components Build your skills with React fast! There's no slow theory and tedious history in React Quickly—you'll dive into React code right from the very first chapter. As you go, you'll explore over 80 useful and practical examples that put React into action. This new second edition has been completely rewritten to cover the latest developments in the React framework. Perfect, whether you're a React beginner or an experienced pro looking to keep their skills up to date. About the technology React makes it a breeze to build beautiful, reliable web frontends. This amazing JavaScript library has a modular architecture, so you can create, combine, and test components seamlessly. React is perfect for small prototypes, enterprise scale sites, and everything in between. About the book React Quickly, Second Edition offers a unique approach to learning the React framework. More than 80 concise examples guide you from your first steps through advanced applications. You'll appreciate the up-to-date coverage of functional components, React hooks, and web accessibility, along with interesting projects to practice your new skill. What's inside Master React fundamentals Best practices of component-based design Create dynamic components with JSX Make your app interactive with stateful components About the reader For developers comfortable building web applications with JavaScript. About the author Morten Barklund is an expert in React, web testing, and accessibility and is the founder of Coding Heaven. Azat Mardan is a seasoned software engineer, startup mentor, and best-selling author. Table of Contents 1 Meeting React 2 Baby steps with React 3 Introduction to JSX 4 Functional Components 5 Making React interactive with states 6 Effects and the React component life cycle 7 Hooks to fuel your web applications 8 Handling events in React 9 Working with forms in React 10 Advanced React hooks for scaling 11 Project: Website menu 12 Project: Timer 13 Project: Task manager Learn the skills you need to build React applications quickly! This fully revised second edition introduces functional components, React hooks, static site generators, and more. In React Quickly, Second Edition you will learn how Build your skills with React fast! Theres no slow theory and tedious history in React Quicklyyoull dive into React code right from the very first chapter. As you go, youll explore over 80 useful and practical examples that put React into action. This new second edition has been completely rewritten to cover the latest developments in the React framework. Perfect, whether youre a React beginner or an experienced pro looking to keep their skills up to date. Purchase of the print book includes a free eBook in PDF, Kindle, and ePub formats from Manning Publications. About the technology React makes it a breeze to build beautiful, reliable web frontends. This amazing JavaScript library has a modular architecture, so you can create, combine, and test components seamlessly. React is perfect for small prototypes, enterprise scale sites, and everything in between. About the book React Quickly, Second Edition offers a unique approach to learning the React framework. More than 80 concise examples guide you from your first steps through advanced applications. Youll appreciate the up-to-date coverage of functional components, React hooks, and web accessibility, along with interesting projects to practice your new skill. What's inside About the reader For developers comfortable building web applications with JavaScript. About the author Morten Barklund is an expert in React, web testing, and accessibility and is the founder of Coding Heaven. Azat Mardan is a seasoned software engineer, startup mentor, and best-selling author. Table of Contents 1 Meeting React 2 Baby steps with React 3 Introduction to JSX 4 Functional Components 5 Making React interactive with states 6 Effects and the React component life cycle 7 Hooks to fuel your web applications 8 Handling events in React 9 Working with forms in React 10 Advanced React hooks for scaling 11 Website menu 12 Timer 13 Task manager