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/overview

Code React Sweetly

course_overview

Learn React step by step with Code React Sweetly. Build real projects, master hooks, forms, styling & deployment, and become a confident React developer.

count_chapters
begin_reading
download
p_implied_book_part_name

Code React Sweetly20 chapters

Begin ›
  1. Introduction

  2. Getting Started with React

  3. JSX

  4. Components

  5. Rendering Lists of Elements from an Array

  6. Event Handling in React

  7. React Fragments

  8. React State

  9. React Trigger vs. Render vs. Commit vs. Paint

  10. Ref Hook

  11. Variables vs. Refs vs. States

  12. Effect Hooks

  13. Forms in React

  14. Styling in React

  15. Deploying React Apps

  16. React Context

  17. Building React Applications with Multi-Page Functionality

  18. Adding Static Analysis Tools

  19. Testing React Components

  20. Epilogue