Hello and welcome to the “ReactJS - The Beginner Masterclass [NEW]” Course! Starting from the very basic level, this course transforms you into an expert in React. js, a versatile open-source framework that is used when developing graphical interfaces for applications with the help of JavaScript. In addition, you will be learning about components and their properties, state management, and others right from the basic level through the advanced level, including React hooks and component lifecycle. You will also discover how to cook your own hooks and apply context for good state-handling mechanisms, which will help you deliver truly scalable and maintainable applications.
This course is very enriching in showing different ways of using the use effect hook, mainly in the consumption of APIs, recommendations for data retrieval, and error management at the same time. You will use all the theories learned in practical applications in projects like building a functional Grocery List app and the Random Quotes app. The course ‘ReactJS - The Beginner Masterclass [NEW]’ By the end of this course, you’ll be able to build fully optimized, responsive GUIs regardless of your experience level or prior knowledge of web development. Come and embrace what you can do in this application using React. js!
Before joining this course, “ReactJS - The Beginner Masterclass [NEW],” you should understand HTML, CSS, and JavaScript. Although it is not necessary, Information about ES6 syntax can be useful. You will also require a computer connected to the internet to be able to join the coding exercises online.
ReactJS - The Beginner Masterclass [NEW] Table of Contents:
- Introduction & Course Prerequisites 02:16
- Build a Simple React App - Part 1 10:37
- Build a Simple React App - Finalize 10:18
- Important Message 02:49
- Get the Source Code 00:05
- The Old vs New Way of Building Web Apps - SPA 06:48
- Why React JS - Motivation for Using React JS 09:20
- What is React JS - How React Works 05:40
- Setup Development Environment - Install VS Code and Chrome Browser and NodeJS 04:05
- Install VS Code Extensions for React Development 04:40
- Create and Run a React Project with Vite - Full Overview 07:16
- React Project Files and Folder Walkthrough 05:14
- Create Our First React Component 04:47
- JSX and How React Treats the DOM - Deep Dive 08:40
- JSX Compilation Process - Babeljs - Demo 01:52
- Understanding the Main Project Files 04:37
- Writing JavaScript Inside of JSX Code - The Book Component 04:41
- Introduction to Props - Refactor Book Component to Use Props 09:48
- Adding an Array of Books & Pulling Data from an Array - Manually 04:02
- Using the Map Function to Show Book List Items 05:19
- Understanding the React Key Prop 04:16
- Props and One-Way Data Flow Concept in React 08:34
- Destructuring Props 02:06
- CHALLENGE: User Profile Card Challenge & Solution 04:46
- Section Summary 01:18
- Introduction to State Management - Forms and Interactivity in React 00:44
- Restructuring the Project - UserProfile Components 05:12
- Pulling Book Data from a Different Data File 10:03
- Introduction to State in React - The Wrong Way to Change State 09:34
- Using React Hook - useState to Fix State Management Issues 11:57
- How State Works in React - Overview 01:58
- Hands-On - Random Quote App - Setup 04:53
- Hands-On Random Quote App - Full Setup & Final 08:46
- How State Works in React - Review 01:56
- Styling Components in React - CSS Files Overview 04:37
- Installing Bootstrap and Using it in RandomQuotes App 07:04
- Adding Another Piece of State - Random Color 07:17
- Lifting State Up - React Patterns Overview 04:19
- Lifting State Up - Hands-On - RandomQuote App 06:39
- Lift State Up - Hands-On - Review - A Simple Counter App 11:05
- Introduction to Forms in React - Overview 00:19
- Setting Up a Simple Form 03:11
- The onSubmit Event Handler and preventDefault Method 02:34
- Controlled Elements 08:26
- Adding Form Inputs - Show the List Items on Page 06:10
- Multi-Input Form Setup - Hands-On 08:26
- Multi-Form Input and the handleChange Event Handler 07:53
- onHandle Submit - Add Simple Validation and Show the Person Card 08:11
- The Grocery List App - Demo 02:21
- Hands-On: GroceryList Component - Adding Dummy Data & Show on the List 05:00
- Hands-On - Creating the Footer and Nav Components 04:03
- Styling the GroceryList Item 04:15
- Add Grocery Form 09:26
- Fix - Color Form Issues 01:18
- Adding Bootstrap Icon 02:40
- Passing the toggleBought Event as Prop 04:17
- Implementing the Toggling - Testing in the Console 10:19
- Changing the Circle Color and List Item Text when Clicked 04:42
- Adding the handleRemoveItem Prop and Function to Remove an Item 04:51
- Adding Stats in the Footer Component 05:18
- Section Summary 01:31
- Connecting to the Backend and useEffect - Overview 06:31
- Fetching Data from an API the Wrong Way 07:40
- Fetching Data from an API with useEffect Hook 03:48
- Setting Up Loading State 04:08
- Using the Dependency Array & Adding Values to Control the Component Lifecycle 11:32
- The Project Setup 03:29
- Setup NavBar Component 05:00
- Create the Footer Component 01:47
- Pulling in Books from an API 06:22
- Set Up the URL Search Query 02:20
- Setup SearchBar and Props 08:02
- Making Sure the SearchTerm State is Updating Correctly - Debugging 03:25
- Showing Books on Screen 09:30
- Adding Loading State and Indicator 05:08
- Clearing the Search Form 01:08
- Setup the API-Client - Implementing FetchBooks Function 11:59
- Introduction to Custom Hooks & Creating a Custom Hook - useBooks 14:01
- Adding the AbortController Interface 07:06
- The Book Details Component - Part 1 04:48
- Conditional Rendering with && - Testing SelectedBook 03:14
- Show Book Details in a Modal View 06:39
- Handling Missing Fields from the API 09:37
- Build and Setup Vercel and Deploying the App 07:53
- Connecting to Github Repo and Automate Deployment Workflow 02:01
- The BookSearch App - Summary 02:00
- Course Wrap-Up 02:40
Who is this course for?
- Good for learners starting with the framework of ReactJS.
- Designed for web developers who are targeting the enhancement of their knowledge of ReactJS.
Click on the links below to Download ReactJS - The Beginner Masterclass [NEW]!
در حال پاسخ به :