Learning React 2nd Edtion – Kirupa Chinnathambi
Amazon (Addison-Wesley Professional)
Not an affiliate of Amazon.
| 1. Introducing React | ||
|---|---|---|
| Date Started | Description | Date Completed |
| 06/22/2024 @ 18:51 | Old-School Multipage Design | |
| New-School Single-Page Apps | ||
| Meet React | ||
| Conclusion | 06/22/2024 @ 21:51 | |
| 2. Building Your First React App | ||
| Date Started | Description | Date Completed |
| 06/24/2024 @ 08:58 | Dealing with JSX | |
| Getting Your React On | ||
| Displaying Your Name | ||
| It’s All Still familiar | ||
| Conclusion | 06/24/2024 @ 12:02 | |
| 3. Components in React | ||
| Date Started | Description | Date Completed |
| 06/24/2024 @ 12:14 | Quick Review of Functions | |
| Changing How We Deal with UI | ||
| Meet the React Component | ||
| Dealing with Children | ||
| Conclusion | 06/26/2024 @ 14:27 | |
| 4. Styling in React | ||
| Date Started | Description | Date Completed |
| Displaying Some Vowels | ||
| Styling React Content Using CSS | ||
| Styling Content the React Way | ||
| Conclusion | ||
| 5. Creating Complex Components | ||
| Date Started | Description | Date Completed |
| From Visuals to components | ||
| Creating the Component | ||
| The Square Component | ||
| The Label Component | ||
| Why Component Composability Rocks | ||
| Conclusion | ||
| 6. Transferring Properties | ||
| Date Started | Description | Date Completed |
| Problem Overview | ||
| Detailed Look at the Problem | ||
| A Better Way to transfer Properties | ||
| Conclusion | ||
| 7. Meet JSX…Again! | ||
| Date Started | Description | Date Completed |
| What Happens with JSX? | ||
| JSX Quirks to Remember | ||
| Capitalization, HTML Elements, and Components | ||
| Your JSX Can Be Anywhere | ||
| Conclusion | ||
| 8. Dealing with State in React | ||
| Date Started | Description | Date Completed |
| Using state | ||
| Getting Our Counter On | ||
| Optional: The Full code | ||
| Conclusion | ||
| 9. Going from Data to UI in React | ||
| Date Started | Description | Date Completed |
| The Example | ||
| Your JSX Can Be Anywhere, Part II | ||
| Dealing with Arrays | ||
| Conclusion | ||
| 10. Events in React | ||
| Date Started | Description | Date Completed |
| Listening and Reacting to Events | ||
| Making the Button Click Do something | ||
| Event Properties | ||
| More Eventing Shenanigans | ||
| React…Why?Why? | ||
| Conclusion | ||
| 11. The Component Lifecycle | ||
| Date Started | Description | Date Completed |
| Conclusion | ||
| 12. Accessing DOM Elements in React | ||
| Date Started | Description | Date Completed |
| The Colorizer Example | ||
| Meet Refs | ||
| Using Portals | ||
| Conclusion | ||
| 13. Setting Up Your React Dev Environment Easily | ||
| Date Started | Description | Date Completed |
| Meet Create React | ||
| Creating Our HellowWorld App | ||
| Creating a Production Build | ||
| Conclusion | ||
| 14. Working with External Data in React | ||
| Date Started | Description | Date Completed |
| web Request 101 | ||
| It’s React Time | ||
| Getting the IP Address | ||
| Conclusion | ||
| 15. Building an Awesome Todo List App in React | ||
| Date Started | Description | Date Completed |
| Getting Started | ||
| Creating the Initial UI | ||
| Building the Rest of the App | ||
| Displaying the Items | ||
| Animation! Animation! Animation! | ||
| Conclusion | ||
| 16. Creating a Sliding Menu in React | ||
| Date Started | Description | Date Completed |
| How the Sliding Menu Works | ||
| setting Up the Sliding Menu | ||
| Getting Started | ||
| Showing and Hiding the Menu | ||
| Conclusion | ||
| 17. Avoiding Unnecessary Renders in React | ||
| Date Started | Description | Date Completed |
| About the render Method | ||
| Optimizing render Calls | ||
| Seeing the render Calls | ||
| Conclusion | ||
| 18. Creating a Single-Page App in React Using React Router | ||
| Date Started | Description | Date Completed |
| The Example | ||
| Getting Started | ||
| Building Our Single-Page App | ||
| It’s the Little Things | ||
| Conclusion | ||
| 19. Introduction to Redux | ||
| Date Started | Description | Date Completed |
| What is Redux | ||
| Building a Simple App Using Redux | ||
| Conclusion | ||
| 20. Using Redux with React | ||
| Date Started | Description | Date Completed |
| managing React State with Redux | ||
| Conclusion | ||
*Notes – Chapter 2 took longer than expected, as the <h1> in the example was not rendering, to find out ReactDom and ReactDOM is not equivalent. I knew the case sensitive part, but just missed the two letters (om/OM) not being the same. I am using Visual Studio Code (VS Code) and I did an autocompleted, and VS Code used ReactDom. 🙁 Took about forty-five minutes to see the difference after troubleshooting and reading articles why my ReactDom.render was not working.