Companies Home Search Profile

React Front to Back 2022

Focused View

Brad Traversy

20:01:49

121 View
  • 00001 Welcome to the Course.mp4
    02:04
  • 00002 What is React.mp4
    08:33
  • 00003 Environment Setup.mp4
    05:53
  • 00004 Code Repos.mp4
    02:01
  • 00005 Introduction to Feedback Project.mp4
    02:51
  • 00006 Create React App.mp4
    07:04
  • 00007 Initializing React.mp4
    07:14
  • 00008 Intro to JSX.mp4
    07:07
  • 00009 Dynamic Values and Lists in JSX.mp4
    05:26
  • 00010 Conditionals in JSX.mp4
    05:10
  • 00011 Creating Your First Component and Props.mp4
    08:02
  • 00012 Adding Styles to a Component.mp4
    05:36
  • 00013 State and useState Hook.mp4
    08:24
  • 00014 Managing Global State.mp4
    08:31
  • 00015 Card Component and Conditional Styles.mp4
    10:18
  • 00016 Events and Prop Drilling.mp4
    10:20
  • 00017 Feedback Stats Component and Reactivity.mp4
    07:34
  • 00018 Form Input and State.mp4
    06:05
  • 00019 Custom Button Component.mp4
    05:30
  • 00020 Real-Time Validation.mp4
    04:36
  • 00021 Rating Select Component.mp4
    07:09
  • 00022 Add Feedback.mp4
    07:24
  • 00023 Fade Animation with Framer Motion.mp4
    03:54
  • 00024 Creating Routes React Router 5.mp4
    08:24
  • 00025 Upgrading to React Router 6.mp4
    02:34
  • 00026 Creating Links v5 and v6.mp4
    05:15
  • 00027 NavLink and useParams.mp4
    06:41
  • 00028 Navigate and Nested Routes.mp4
    06:53
  • 00029 Create a Context and Provider.mp4
    06:37
  • 00030 Get Global State with the useContext Hook.mp4
    04:44
  • 00031 Moving Functions to Context.mp4
    07:28
  • 00032 Edit Feedback Event.mp4
    05:49
  • 00033 Side Effects with useEffect.mp4
    07:34
  • 00034 Update Feedback Item.mp4
    05:16
  • 00035 Deploy to Netlify.mp4
    05:25
  • 00036 APIs and Requests Explained.mp4
    06:28
  • 00037 Setting Up JSON-Server Mock Backend.mp4
    07:49
  • 00038 Run Client and Server with Concurrently.mp4
    02:39
  • 00039 Fetch Data from JSON-Server Backend.mp4
    04:58
  • 00040 Spinner Component.mp4
    05:35
  • 00041 Add Feedback and Setting a Proxy.mp4
    05:28
  • 00042 Update and Delete from JSON-Server.mp4
    04:18
  • 00043 Introduction to GitHub Finder Project.mp4
    02:37
  • 00044 Set Up Tailwind and Daisy UI.mp4
    08:28
  • 00045 Navbar Component.mp4
    09:07
  • 00046 Footer Component.mp4
    03:35
  • 00047 Pages and Routes.mp4
    07:40
  • 00048 GitHub API and Getting Token.mp4
    07:08
  • 00049 UserList Component.mp4
    10:18
  • 00050 Loading Spinner.mp4
    03:09
  • 00051 Display Users.mp4
    06:49
  • 00052 Set Up GitHub Context.mp4
    09:20
  • 00053 Reducers and useReducer Hook.mp4
    09:19
  • 00054 Clean Up Fetch Users.mp4
    03:43
  • 00055 User Search Component.mp4
    10:28
  • 00056 Search Users.mp4
    04:33
  • 00057 Clear Users.mp4
    03:28
  • 00058 Alert Context and Reducer.mp4
    08:10
  • 00059 Alert Component.mp4
    07:44
  • 00060 Get Single User.mp4
    09:42
  • 00061 User Profile Top.mp4
    11:34
  • 00062 User Profile Stats.mp4
    08:45
  • 00063 Get User Repos.mp4
    10:07
  • 00064 Repo Items.mp4
    08:26
  • 00065 Move SearchUsers to Actions File.mp4
    06:21
  • 00066 Move getUser to Actions File.mp4
    07:49
  • 00067 Cleaning Up Our Actions and Axios.mp4
    07:53
  • 00068 Deploy to Vercel.mp4
    02:32
  • 00069 Introduction to Section.mp4
    00:47
  • 00070 useRef Example 1 - Create DOM Reference.mp4
    08:21
  • 00071 useRef Example 2 - Get Previous State.mp4
    05:18
  • 00072 useRef Example 3 - Memory Leak Error Fix.mp4
    09:45
  • 00073 useMemo Example.mp4
    10:45
  • 00074 useCallback Example.mp4
    07:13
  • 00075 Custom Hook 1 - useFetch.mp4
    09:14
  • 00076 Custom Hook 2 - useLocalStorage.mp4
    15:11
  • 00077 Introduction to House Marketplace Project.mp4
    04:42
  • 00078 App and Firebase Setup.mp4
    06:59
  • 00079 Enable Authentication and Create Rules.mp4
    07:57
  • 00080 Dummy Data and Indexes.mp4
    11:50
  • 00081 Pages and Routes.mp4
    06:49
  • 00082 Navbar Component.mp4
    10:05
  • 00083 Sign In and Sign-Up Forms.mp4
    14:58
  • 00084 Register User.mp4
    05:30
  • 00085 Save User to Firestore.mp4
    04:54
  • 00086 User Sign In.mp4
    08:27
  • 00087 Alerts with React Toastify.mp4
    04:56
  • 00088 User Logout.mp4
    05:40
  • 00089 Display and Update User Details.mp4
    13:27
  • 00090 PrivateRoute Component and useAuthStatus Hook.mp4
    14:53
  • 00091 Forgot Password Page.mp4
    09:18
  • 00092 Google OAuth.mp4
    14:00
  • 00093 Explore Page.mp4
    05:00
  • 00094 Fetch Listings from Firebase.mp4
    15:09
  • 00095 Listing Item Component.mp4
    11:45
  • 00096 Offers Page.mp4
    03:31
  • 00097 Start Create Listing Page.mp4
    12:50
  • 00098 Create Listing Form.mp4
    17:40
  • 00099 Get Coords with Geocoding API.mp4
    16:36
  • 00100 Uploading Images to Firebase.mp4
    11:53
  • 00101 Save Listings to Firestore.mp4
    08:04
  • 00102 Quick Note and Change.mp4
    02:08
  • 00103 Fetch Single Listing.mp4
    08:05
  • 00104 Listing Details.mp4
    11:00
  • 00105 Contact Landlord Page.mp4
    12:33
  • 00106 Leaflet Map.mp4
    07:32
  • 00107 Listings Page Slider.mp4
    07:04
  • 00108 Explore Slider.mp4
    13:31
  • 00109 Profile Listings and Delete.mp4
    12:45
  • 00110 Load More Pagination.mp4
    08:31
  • 00111 Edit Listing Icon.mp4
    05:22
  • 00112 Edit Listing.mp4
    12:44
  • 00113 Clear Up Console Warnings.mp4
    03:39
  • 00114 Deploy to Vercel.mp4
    03:19
  • 00115 Introduction to Project.mp4
    02:01
  • 00116 What Is the MERN Stack.mp4
    04:32
  • 00117 MongoDB Setup.mp4
    05:09
  • 00118 Server File Structure.mp4
    05:53
  • 00119 Basic Express Server Setup.mp4
    06:27
  • 00120 Add Routes and Controller.mp4
    05:59
  • 00121 Error and Exception Handling.mp4
    11:44
  • 00122 Connect to the Database.mp4
    06:02
  • 00123 Register User.mp4
    10:07
  • 00124 Login and Create JWT.mp4
    09:15
  • 00125 Protect Routes and Authentication.mp4
    13:26
  • 00126 Front-End Folder Setup.mp4
    09:04
  • 00127 Header and Initial Pages.mp4
    08:04
  • 00128 Home Login and Register UI.mp4
    15:09
  • 00129 Redux Setup and Auth Slice.mp4
    08:44
  • 00130 Hook Register Form to Redux.mp4
    09:42
  • 00131 Register User.mp4
    21:02
  • 00132 Logout User.mp4
    08:15
  • 00133 User Login.mp4
    07:56
  • 00134 Ticket Model and Routes.mp4
    11:10
  • 00135 Get and Create Tickets Backend.mp4
    06:24
  • 00136 Single Ticket Update and Delete Backend.mp4
    09:22
  • 00137 Route Guard.mp4
    10:02
  • 00138 New Ticket Form.mp4
    08:37
  • 00139 Add Tickets to Redux.mp4
    05:10
  • 00140 Create Ticket Functionality.mp4
    16:13
  • 00141 Fetch Tickets from Backend.mp4
    08:54
  • 00142 Listing Tickets in UI.mp4
    06:43
  • 00143 Single Ticket Display.mp4
    15:24
  • 00144 Close Ticket Functionality.mp4
    09:45
  • 00145 Notes Backend.mp4
    13:32
  • 00146 Fetch Notes through Redux.mp4
    09:00
  • 00147 Display Notes.mp4
    07:55
  • 00148 Note Form Modal.mp4
    10:21
  • 00149 Submit a Note.mp4
    05:33
  • 00150 Deploy to Heroku.mp4
    12:07
  • React-Front-to-Back-master.zip
  • 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

    More details


    User Reviews
    Rating
    0
    0
    0
    0
    0
    average 0
    Total votes0
    Focused display
    Category
    Brad Traversy
    Brad Traversy
    Instructor's Courses
    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 like Angular as well as server side technologies like Node.js, PHP and Python. Brad has mastered explaining very complex topics in a simple manner that is very understandable. Invest in your knowledge by watching Brad's courses.
    Packt is a publishing company founded in 2003 headquartered in Birmingham, UK, with offices in Mumbai, India. Packt primarily publishes print and electronic books and videos relating to information technology, including programming, web design, data analysis and hardware.
    • language english
    • Training sessions 150
    • duration 20:01:49
    • Release Date 2023/02/26