React Front to Back 2022 [V]

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. All the resource files are added to the GitHub repository at: https://github.com/packtpublishing/react-front-to-back

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.

Approach

This course is highly practical, and its hands-on approach adds a layer of comprehension with four projects! This course explores many of the components of the React framework and comes bundled with a full stack MERN project. Coding through these projects will offer you a lot of opportunities for repetition and a deep understanding of the flow of React fundamentals.

Key Features

Learn modern React by building 4 projects and suitable for beginners and intermediate React developers * Build a House Marketplace with React and Firebase 9 * Build a full-stack MERN support ticket system with Redux Toolkit

Github Repo

https://github.com/packtpublishing/react-front-to-back

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.

Course Outline

1. Introduction to the Course

2. React Basics and JSX (JavaScript XML)

3. Components, Props, and State

4. Forms, Validation, and Simple Animation

5. Creating Routes and Links

6. Context API, useContext Hook, and Deployment

7. APIs and HTTP Requests

8. GitHub Finder Project Start

9. Working with the GitHub API

10. User Profile and Alerts

11. Refactoring Context and Actions

12. More Advanced React Hooks

13. House Marketplace Project Start

14. Firebase Authentication and Profile

15. Get and Create Listings

16. Single Listings, Map, Slider, and Edit

17. MERN Project Start, API, and Backend Authentication

18. Front-End Authentication

19. Tickets Functionality

20. Notes Functionality and Deploy