Do you dream of learning React without spending months in endless tutorials? Then this book is for you! In just five days, you will acquire the fundamental skills to start developing exceptional applications using this revolutionary technology. Whether you prefer to follow the book independently or alongside other online resources, it will provide you with a solid foundation to harness the full potential of React. Immerse yourself in an accelerated learning method that will allow you to make giant strides. Chapters are carefully designed to teach you the essential concepts of React, such as components, props, state, events, lifecycle, and hooks, without wasting time on complex explanations. Thanks to a clear and accessible writing style, you'll be able to dive into the intricacies of React from the first page. Code examples are accompanied by detailed explanations, enabling you to quickly grasp the subtleties of this technology. You don't need to be an expert in programming; the book is suitable for all levels, from beginners to more experienced developers looking to get up and running with React. You'll create React applications, reinforcing your understanding and consolidating your skills. You will be amazed at how quickly you progress with this hands-on approach that includes practical exercises to apply what you learn immediately. Don't wait any longer and dive into this exciting adventure right now. Master React in 5 Days will open the doors to a world of endless possibilities in web development. What You'll Learn Create React components Study JavaScript XML (JSX) syntax and handling events Understand React hooks Manage lists and states Who This Book Is For Programmers and web developer students with knowledge of JavaScript
Author(s): Eric Sarrion
Publisher: Apress
Year: 2023
Language: English
Pages: 293
Table of Contents
About the Author
About the Technical Reviewer
Acknowledgments
Introduction
Chapter 1: Day 1: Mastering Component Writing with React
Why Use React
React Virtual DOM
Step 1: Creating the Virtual DOM
Step 2: Reconciliation Process
Decomposing an Application into Components
Creating a First React Application
Analyzing the Main Files of the React Application
Step 1: Contents of the index.js File
Step 2: Contents of the index.html File
Step 3: Contents of the App.js File
JSX Syntax in React
Creating a First React Component
Step 1: Install React DevTools
Step 2: Incrementing the Counter with setInterval( )
Step 3: Using the useState( ) Method in a Component
Step 4: Using the useEffect( ) Method in a Component
Step 5: Using Attributes in Components
Conclusion
Chapter 2: Day 2: Mastering JSX Code Writing in a React Component
Using the React.Fragment Component
Step 1: Using the Tag
Step 2: Using the Tag
Step 3: Using the <> Tag
Inserting JavaScript Code into JSX
Writing a Condition in JSX
Step 1: Using an Immediately Invoked JavaScript Function to Write the Conditional Test
Step 2: Using the JavaScript Ternary Operator to Write the Conditional Test
Writing a Loop in JSX
Step 1: Writing the JSX Loop Using an Immediately Invoked Function
Step 2: Using the “key” Attribute in JSX Elements Displayed by a Loop
Step 3: Important Rule About the Value of the “key” Attribute in List Elements
Step 4: Writing the JSX Loop Using the map() Method of the JavaScript Array Class
Step 5: Using the map() Method to Display Large Lists of Elements
Using Styles in JSX
Conclusion
Chapter 3: Day 3: Mastering Event Handling in a React Component
Handling Click Events on a Button
Step 1: Capturing an Event in a React Component
Step 2: Incrementing a Counter by Clicking an Increment Button
Step 3: Starting a Periodic Counter by Clicking a Start Button
Step 4: Automatically Start the Counter the First Time
Managing the Content of an Input Field
Step 1: Allow Only Digits During Input
Step 2: Give Focus to the Input Field upon Component Rendering
Step 3: Display Multiple Counters and Show Their Real-Time Sum
Step 4: Give Focus to the First Displayed Counter
Conclusion
Chapter 4: Day 4: Mastering React Hooks
Definition of a Hook
Main Rule About Hooks
Using the useState() Hook
Step 1: Writing the useState() Method
Step 2: Using the Latest Value of the Reactive Variable
Step 3: Avoiding Infinite Loops When Updating Reactive Variables
Using the useContext() Hook
Step 1: Presenting the Problem to Solve
Step 2: Displaying the Sum of Counters Without Using the useContext() Hook
Step 3: Displaying the Sum of Counters Using the useContext() Hook
Step 4: Using the createContext() Method in the Parent Component
Step 5: Using the useContext() Method in Child Components
Step 6: When to Use the useContext() Hook?
Using the useRef() Hook
Using the useEffect() Hook
Using the useReducer() Hook
Step 1: Counter Component Using the useState() Hook
Step 2: Counter Component Using the useReducer() Hook
Step 3: Using the “state” Parameter as an Object
Step 4: Using the “action” Parameter as an Object
Other Hooks
Creating Your Own Custom Hook
Step 1: Creating a Hook to Limit Counter Value
Step 2: Creating a Hook to Force Component Update
Step 3: Creating a Hook to Retrieve the Previous Value of a Reactive Variable
Step 4: Creating a Hook to Fetch Data from a Server
Step 5: Creating a Hook for Data Formatting
Step 6: Creating a Hook That Filters the Displayed Data
Conclusion
Untitled
Chapter 5: Day 5: Practical Application—Managing a Task List with React
Application Screens
Creating the Application with create-react-app
Breaking Down the Application into Components
Adding an Item to the List
Removing an Item from the List
Modifying an Item in the List
Step 1: Modifying the Item
Step 2: Validation of the Modification
Step 3: Assigning a Unique Value for the “key” Attribute
Step 4: Obtaining Focus Directly on the Input Field
Conclusion
Chapter 6: JavaScript Reminders
Using the “let” and “var” Keywords in JavaScript
Using the “const” Keyword in JavaScript
Manipulating Objects in JavaScript
Step 1: Structuring an Object
Step 2: Object Destructuring
Step 3: Passing Objects as Function Parameters
Step 4: Using the “...” Notation with Objects
Manipulating Arrays in JavaScript
Step 1: Structuring an Array
Step 2: Array Destructuring
Step 3: Using the “...” Notation with Arrays
Using Import and Export of Modules in JavaScript
Step 1: Using Modules in HTML Files
Step 2: Using the “import” Statement
Step 3: Using the “export” Statement
Step 4: Using the “export default” Statement
Step 5: Difference Between “export” and “export default” Statements
Using Arrow Functions in JavaScript
Step 1: Using Arrow Function Syntax
Step 2: Understanding the Value of “this” in Arrow Functions
Using the map( ) and filter( ) Methods of the JavaScript Array Class
Step 1: Using the map( ) Method
Step 2: Using the filter( ) Method
Step 3: Using the map( ) and filter( ) Methods in React
Using Promise Objects in JavaScript
Step 1: Promise Object Definition
Step 2: Without Using Promise Objects
Step 3: Using Promise Objects
Using “async” and “await” Statements in JavaScript
Creating an Asynchronous Function That Utilizes JavaScript’s “await” Statement
Step 1: Using “await” with a Function That Returns a Promise Object
Step 2: Using “await” with a Function Declared with “async”
Conclusion of the Book
Index
df-Capture.PNG
