Code React Sweetly

Code React Sweetly

CodeSweetly
This is a sample of the book's content.Buy on Leanpub

Table of Contents

Code React Sweetly

  • Introduction
    • Welcome to Code React Sweetly!
    • Why This Book Is Different
    • The Roadmap
    • The Tools
    • What You Should Already Know
    • A Personal Note
    • Let’s Begin!
  • Getting Started with React
    • Why the “React” Name?
    • Is React a Framework?
    • Is React Only for Web Development?
    • Can React be used for full-stack applications?
    • What’s the Primary Goal of React?
    • Adding React Component to a Website
    • Why Use HTML Inside JavaScript?
  • JSX
    • Can React Work Without JSX?
    • What Is React.createElement()?
    • How to Use JSX
    • Time to Practice with JSX
  • Components
    • Syntax of a React component
    • What Exactly Are Props in React?
    • How to Invoke React Components
    • How to Display a Component Inside a Browser’s DOM Node
    • Important Things to Know About React Components
    • Creating Reusable React Components
    • Time to Practice with Components
  • Rendering Lists of Elements from an Array
    • Each React Element in an Array Needs a Unique Key
    • How to Add Unique Keys to Each React Element in an Array
    • Essential Things to Know About Assigning Keys
  • Event Handling in React
    • Types of Event Handlers
    • What Is an Inline Event Handler in React?
    • What Is a Referenced Event Handler in React?
    • HTML vs. React Events: What’s the Difference?
    • How to Use Arguments with a Component’s Event Handler
    • How to Access an Event Object in React
  • React Fragments
    • The Syntax of React Fragments
    • Why Use React Fragments?
  • React State
    • How to Access and Modify a Function Component’s State
    • What Exactly Is the useState() Function?
    • Why Does useState() Return an Array?
    • How to Update a Component’s State
    • How to Reset a Component’s States
    • Important Things to Know About React State
    • Time to Practice with React State
    • How Did You Go About Creating Your Login (out) Button?
    • How Does the React State Hook Work Behind the Scenes?
  • React Trigger vs. Render vs. Commit vs. Paint
    • Triggering a Render in React
    • Rendering React Components
    • Committing React UI to the Browser’s DOM
    • Painting the DOM Nodes on the Screen
  • Ref Hook
    • How to Access a Function Component’s Ref
    • What Exactly Is the useRef() Function?
    • How to Access the Value Inside a Ref Object
    • How to Update the Value Inside a Ref Object
    • Important Things to Know About Accessing and Updating React Refs
    • How to Use React Refs to Manage DOM Nodes
    • How Does React Ref Hook Work Behind the Scenes?
    • How Does Updating ref.current Affect the Ref Hook’s State Object?
  • Variables vs. Refs vs. States
    • How Do Variables Work in React?
    • How Do Refs Work in React?
    • How Do States Work in React?
    • Tips on Using Variables, Refs, and States in React
  • Effect Hooks
    • Types of Effects in React
    • How to Know the Effects That Require Cleanup
    • How to Know the Effects That Do Not Require Any Cleanup
    • How to Clean Up a Component’s Effects
    • How to Specify When React Effects Should Run
    • Important Things to Know About the Effect Hook in React
  • Forms in React
    • Types of Fields in React Forms
    • What Is a Controlled Component in React?
    • What Is an Uncontrolled Component in React?
    • Important Things to Know About Forms in React
    • Time to Practice with React Forms
    • How Did You Go About Creating Your Form App?
  • Styling in React
    • Using CSS Style Sheets to Style React Elements
    • Using the Inline style Attribute to Style React Elements
    • Using CSS Modules to Style React Elements
    • Using a CSS-in-JS Library to Style React Elements
  • Deploying React Apps
    • 1. Configure a GitHub Remote Repository
    • 2. Stage and Commit Any Recent Changes
    • 3. Upload Your Local Git Directory to the Remote Repo
    • 4. Sign In or Sign Up on the Vercel Website
    • 5. Deploy Your Project to Vercel’s Server
    • 6. View Your Published App
  • React Context
    • How React Context Works
    • How to Create a Context Object
    • How to Use the Value of a Context Object
    • How to Configure a Parent Component to Provide a Context Value to All Its Descendant Components
    • How to Override the Context Value Provided to a Child Component
    • How to Make a Context Object Available to Multiple Files
    • How to Create a Dynamic Context Value with React State
    • Essential Things to Know About React Context
  • Building React Applications with Multi-Page Functionality
    • Single-Page vs. Multi-Page Applications: What’s the Difference?
    • What Exactly Is React Router?
    • 1. Set Up Your System
    • 2. Create a New Project Directory
    • 3. Create a package.json File
    • 4. Install React and ReactDOM
    • 5. Create the Web Page
    • 6. Create a Components Directory
    • 7. Create an App Component
    • 8. Create the Entry Script
    • 9. Create an About Component
    • 10. Install React Router
    • 11. Create an AppRoutes Component
    • 12. How to Handle Unavailable URL Requests in React
    • 13. Render <AppRoutes> as the App’s Root Component
    • 14. Run Your Application
    • How to Add Each Page’s Metadata
    • How to Serve Static Files
    • How to Deploy a Multi-Page React Application
    • Time to Practice Building a Multi-Page-Like React Application
  • Adding Static Analysis Tools
    • Project Configuration
    • TypeScript Configuration
    • ESLint Configuration
    • Prettier Configuration
    • Optional: Configure VS Code to Auto-Format and Lint Your Code
  • Testing React Components
    • What’s the Difference Between a Test Runner and a React Component Testing Tool?
    • Get the Right Node and NPM Version
    • Create a New Directory for Your Project
    • Create a package.json File
    • Install React and ReactDOM
    • Configure Your Test Environment
    • Specify Jest as Your App’s Test Runner Tool
    • Initialize ESLint’s Configuration
    • Install ESLint’s Test Plugins
    • JavaScript Guide to Test React Components
    • TypeScript Guide to Test React Components
    • Useful Resources
  • Epilogue
    • What Next?
    • Keep Growing
    • One Last Favor
    • Final Words
Code React Sweetly/Epilogue

Epilogue

https://leanpub.com/code-react-sweetly

What Next?

https://leanpub.com/code-react-sweetly

Keep Growing

https://leanpub.com/code-react-sweetly

One Last Favor

https://leanpub.com/code-react-sweetly

Final Words

https://leanpub.com/code-react-sweetly

In this chapter

  • Epilogue
  • What Next?
  • Keep Growing
  • One Last Favor
  • Final Words