فهرست مطالب

• Cover
• Copyright
• Table of Contents
• Preface
• 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 <React.Fragment> Tag
• Step 2: Using the <Fragment> 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