React Front to Back 2022

React Front to Back 2022

by Brad Traversy
Released May 2022
Publisher(s): Packt Publishing
ISBN: 9781838645274

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Video description

The course starts with React fundamentals including components, props, hooks, state, and so on. Then learn about React hooks such as useState, useEffect, useContext, useReducer, and useRef. Next, you will create custom hooks and see React Router v6.

Then, you will learn how to handle the global state with context, reducers, and hooks.

You will see Firebase 9 authentication, queries, storage, and deploy React apps to Vercel and Netlify. Basic animation with Framer Motion, implementing Leaflet maps and Swiper sliders, and working on full-stack MERN (MongoDB, Express, React, Node.js) are some of the highlights of this course.

All these concepts are explained practically with the help of four different apps/projects. If you have not used React before, the Feedback App project will help you learn the fundamentals of React. The GitHub Finder project further explores the management of the app-level state by introducing actions and reducers. You will work with third-party APIs.

The House Marketplace app will introduce you to Firebase and prepare you to learn a lot about its capabilities as a platform for user authentication, cloud file storage, and a dedicated NoSQL database. Finally, the final project (full-stack MERN support ticket system) is a full-fledged full-stack app that uses Redux and Redux Toolkit.

By the end of the course, you will have built four projects with all the concepts taught. You will also have gained enough confidence and skillset to kickstart your journey with React.

What You Will Learn

  • Learn React fundamentals including components, props, hooks, state
  • Learn React hooks and how to create custom hooks
  • Handle global state with context, reducers, and hooks
  • Learn how to use context and reducers to manage global state
  • Look at Firebase 9 authentication and basic animation with Framer Motion
  • Deploy React apps to Vercel and Netlify

Audience

This course is for anyone who wants to learn React from scratch and become a React developer. Individuals who want to sharpen their skills as a React developer or who are looking to further their skills as a front-end developer will also benefit from this course.

You should have intermediate-level knowledge of JavaScript before learning React or any framework as some advanced JavaScript concepts are being used here.

About The Author

Brad Traversy: Brad Traversy has been programming for around 12 years and teaching for almost 5 years. He is the owner of Traversy Media, which is a successful web development YouTube channel and specializes in everything from HTML5 to front-end frameworks such as Angular as well as server-side technologies such as Node.js, PHP, and Python. Brad has mastered explaining overly complex topics in a simple manner that is understandable. Invest in your knowledge by watching Brad’s courses.

Table of contents

  1. Chapter 1 : Introduction to the Course
    1. Welcome to the Course
    2. What is React
    3. Environment Setup
    4. Code Repos
  2. Chapter 2 : React Basics and JSX (JavaScript XML)
    1. Introduction to Feedback Project
    2. Create React App
    3. Initializing React
    4. Intro to JSX
    5. Dynamic Values and Lists in JSX
    6. Conditionals in JSX
  3. Chapter 3 : Components, Props, and State
    1. Creating Your First Component and Props
    2. Adding Styles to a Component
    3. State and useState Hook
    4. Managing Global State
    5. Card Component and Conditional Styles
    6. Events and Prop Drilling
    7. Feedback Stats Component and Reactivity
  4. Chapter 4 : Forms, Validation, and Simple Animation
    1. Form Input and State
    2. Custom Button Component
    3. Real-Time Validation
    4. Rating Select Component
    5. Add Feedback
    6. Fade Animation with Framer Motion
  5. Chapter 5 : Creating Routes and Links
    1. Creating Routes (React Router 5)
    2. Upgrading to React Router 6
    3. Creating Links (v5 and v6)
    4. NavLink and useParams
    5. Navigate and Nested Routes
  6. Chapter 6 : Context API, useContext Hook, and Deployment
    1. Create a Context and Provider
    2. Get Global State with the useContext Hook
    3. Moving Functions to Context
    4. Edit Feedback Event
    5. Side Effects with useEffect
    6. Update Feedback Item
    7. Deploy to Netlify
  7. Chapter 7 : APIs and HTTP Requests
    1. APIs and Requests Explained
    2. Setting Up JSON-Server Mock Backend
    3. Run Client and Server with Concurrently
    4. Fetch Data from JSON-Server Backend
    5. Spinner Component
    6. Add Feedback and Setting a Proxy
    7. Update and Delete from JSON-Server
  8. Chapter 8 : GitHub Finder Project Start
    1. Introduction to GitHub Finder Project
    2. Set Up Tailwind and Daisy UI
    3. Navbar Component
    4. Footer Component
    5. Pages and Routes
  9. Chapter 9 : Working with the GitHub API
    1. GitHub API and Getting Token
    2. UserList Component
    3. Loading Spinner
    4. Display Users
    5. Set Up GitHub Context
    6. Reducers and useReducer Hook
    7. Clean Up Fetch Users
    8. User Search Component
    9. Search Users
    10. Clear Users
  10. Chapter 10 : User Profile and Alerts
    1. Alert Context and Reducer
    2. Alert Component
    3. Get Single User
    4. User Profile Top
    5. User Profile Stats
    6. Get User Repos
    7. Repo Items
  11. Chapter 11 : Refactoring Context and Actions
    1. Move SearchUsers to Actions File
    2. Move getUser to Actions File
    3. Cleaning Up Our Actions and Axios
    4. Deploy to Vercel
  12. Chapter 12 : More Advanced React Hooks
    1. Introduction to Section
    2. useRef Example 1 - Create DOM Reference
    3. useRef Example 2 - Get Previous State
    4. useRef Example 3 - Memory Leak Error Fix
    5. useMemo Example
    6. useCallback Example
    7. Custom Hook 1 - useFetch
    8. Custom Hook 2 - useLocalStorage
  13. Chapter 13 : House Marketplace Project Start
    1. Introduction to House Marketplace Project
    2. App and Firebase Setup
    3. Enable Authentication and Create Rules
    4. Dummy Data and Indexes
    5. Pages and Routes
    6. Navbar Component
  14. Chapter 14 : Firebase Authentication and Profile
    1. Sign In and Sign-Up Forms
    2. Register User
    3. Save User to Firestore
    4. User Sign In
    5. Alerts with React Toastify
    6. User Logout
    7. Display and Update User Details
    8. PrivateRoute Component and useAuthStatus Hook
    9. Forgot Password Page
    10. Google OAuth
  15. Chapter 15 : Get and Create Listings
    1. Explore Page
    2. Fetch Listings from Firebase
    3. Listing Item Component
    4. Offers Page
    5. Start Create Listing Page
    6. Create Listing Form
    7. Get Coords with Geocoding API
    8. Uploading Images to Firebase
    9. Save Listings to Firestore
    10. Quick Note and Change
  16. Chapter 16 : Single Listings, Map, Slider, and Edit
    1. Fetch Single Listing
    2. Listing Details
    3. Contact Landlord Page
    4. Leaflet Map
    5. Listings Page Slider
    6. Explore Slider
    7. Profile Listings and Delete
    8. Load More Pagination
    9. Edit Listing Icon
    10. Edit Listing
    11. Clear Up Console Warnings
    12. Deploy to Vercel
  17. Chapter 17 : MERN Project Start, API, and Backend Authentication
    1. Introduction to Project
    2. What Is the MERN Stack?
    3. MongoDB Setup
    4. Server File Structure
    5. Basic Express Server Setup
    6. Add Routes and Controller
    7. Error and Exception Handling
    8. Connect to the Database
    9. Register User
    10. Login and Create JWT
    11. Protect Routes and Authentication
  18. Chapter 18 : Front-End Authentication
    1. Front-End Folder Setup
    2. Header and Initial Pages
    3. Home, Login, and Register UI
    4. Redux Setup and Auth Slice
    5. Hook Register Form to Redux
    6. Register User
    7. Logout User
    8. User Login
  19. Chapter 19 : Tickets Functionality
    1. Ticket Model and Routes
    2. Get and Create Tickets (Backend)
    3. Single Ticket, Update, and Delete (Backend)
    4. Route Guard
    5. New Ticket Form
    6. Add Tickets to Redux
    7. Create Ticket Functionality
    8. Fetch Tickets from Backend
    9. Listing Tickets in UI
    10. Single Ticket Display
    11. Close Ticket Functionality
  20. Chapter 20 : Notes Functionality and Deploy
    1. Notes Backend
    2. Fetch Notes through Redux
    3. Display Notes
    4. Note Form Modal
    5. Submit a Note
    6. Deploy to Heroku

Product information

  • Title: React Front to Back 2022
  • Author(s): Brad Traversy
  • Release date: May 2022
  • Publisher(s): Packt Publishing
  • ISBN: 9781838645274