React For Beginners - From Html Css & Javascript To React.Js
Published 7/2023
MP4 | Video: h264, 1280x720 | Audio: AAC, 44.1 KHz
Language: English | Size: 6.19 GB | Duration: 13h 24m
Complete React Guide including (incl Hooks, React Router, Redux, Styled Components)
What you'll learn
React Fundamentals: learn the basic concepts of React, including components, JSX (JavaScript XML), state, props, and the component lifecycle
Component-based Architecture: React is based on a component-based architecture, and students will learn how to design and create reusable components.
React Router: a library that enables navigation and routing in React applications. Set up routes, handle URL parameters, and create nested routes.
State Management: React provides various techniques for managing application state.
Hooks: React Hooks revolutionized how developers write React components. Students will learn about different hooks, such as useState, useEffect, useContext, etc
Forms and User Input: learn how to handle form submission, validation, and user input using React.
Styling in React: learn various approaches to styling React components, including CSS modules, inline styles, CSS-in-JS libraries like styled-components
Asynchronous Data Fetching: learn data fetching data from APIs. learn techniques to handle asynchronous operations using features like the fetch API & axios.
Deployment and Build Processes
Requirements
Basic HTML CSS and JavaScript
Description
Welcome to my comprehensive React course for beginners! If you're someone who has experience with HTML, CSS, and JavaScript and wants to take your web development skills to the next level, then this is the course for you.Throughout this course, I'll guide you through the basics of React, including how to build and structure React components, use React hooks, and create multiple projects to help you practice your newfound skills.To start off, we'll take a look at what React is and why it's such an important tool in the web development industry. React is a JavaScript library used for building user interfaces, and it's become incredibly popular over the years due to its flexibility and ease of use. In fact, many companies, such as Facebook, Instagram, and Airbnb, use React to build their web applications.With that in mind, we'll dive into the basics of React, including how to set up your development environment, create a basic React component, and how to render that component to the browser. From there, we'll explore the various React components that you can use, such as function components and class components, and how to structure your components in a way that makes sense for your application.Next, we'll delve into React hooks, which are functions that let you use state and other React features without writing a class. We'll go through the various hooks, including useState, useEffect, useContext, and more, and show you how to use them in your applications to make your code more concise and easier to read.Finally, we'll round out the course with multiple projects that you can work on to apply your newfound knowledge. These projects will include creating a simple to-do list application, a movie search application, and a weather app. By the end of the course, you'll have a solid understanding of how to build React applications and the confidence to create your own projects.In conclusion, our React course for beginners is the perfect way to take your web development skills to the next level. With our comprehensive approach, we'll guide you through the basics of React, teach you how to use React components and hooks, and provide you with multiple projects to practice your skills. React is an important tool in the web development industry, and with this course, you'll be well on your way to becoming a proficient React developer.Here is a list of all the hooks available in React and I will be teaching in this course, along with a short description of what they do:useState: Allows you to add state to a functional component by providing a state variable and a function to update it.useEffect: Allows you to perform side effects (such as fetching data or updating the DOM) after a component has rendered or before it's about to unmount.useContext: Allows you to access data stored in a context object without having to pass props down through multiple levels of components.useReducer: Allows you to manage complex state in a predictable way, by taking in a reducer function and an initial state value.useCallback: Allows you to memoize a function, which can help with performance by preventing unnecessary re-renders of child components.useMemo: Allows you to memoize a value, which can help with performance by preventing unnecessary calculations.useRef: Allows you to create a mutable reference to a value or DOM element, which can be useful for accessing the DOM directly or persisting values across renders.useLayoutEffect: Similar to useEffect, but runs synchronously after all DOM mutations have completed, which can be useful for manipulating the DOM directly.useImperativeHandle: Allows you to customize the instance value that's exposed to parent components when using ref.useDebugValue: Allows you to add a label to a custom hook, which can be useful for debugging and tracing the flow of data in your application.These hooks are some of the most commonly used ones in React, and can be incredibly powerful when used correctly. By understanding how each hook works and when to use it, you can build more complex and performant applications with ease.Dear aspiring developers,Welcome to the extraordinary world of React.js! My name is Norbert B.M I am a self tough web developer and Today, we gather here to embark on a transformative journey that will take you from the realms of HTML, CSS, and JavaScript to the captivating universe of React.In this course, I have crafted a learning experience tailored specifically to guide you through this remarkable transition. My primary focus is to bridge the gap between your existing knowledge and the intricacies of React.js. Together, we will lay a solid foundation upon which you can build your expertise and create captivating web applications.React.js, with its elegance and power, opens up new possibilities in the realm of web development. It empowers you to craft highly interactive, efficient, and scalable user interfaces. This revolutionary library will change the way you approach building websites, elevating your skills to new heights.Throughout this course, we will embark on an immersive journey, gradually introducing you to React.js concepts and techniques. We will start by revisiting and reinforcing your understanding of HTML, CSS, and JavaScript, ensuring a strong footing for the adventure ahead.As we progress, we will delve into the fundamental building blocks of React.js, such as components, states, and props. You will learn how to break down complex user interfaces into modular pieces, enabling reusability and maintainability in your codebase.Through practical exercises and engaging projects, you will witness firsthand the transformative power of React.js. I will be by your side, offering my expertise, guidance, and support every step of the way. My real-world experiences will illuminate the path, providing valuable insights and best practices.While this journey may present challenges, I believe in your potential to overcome them. I have carefully designed this course to provide a nurturing and inclusive environment where you can learn, explore, and grow. Together, we will unravel the mysteries of React.js, unlocking the doors to a world of endless possibilities.So, my fellow learners, are you ready to embark on this transformative journey? Are you prepared to witness your skills evolve and witness the magic of React.js unfold before your eyes? If so, then join me as we set forth on this exhilarating adventure.Embrace the power of React.js, and let us embark on this extraordinary voyage together!I am Norbert BM, see you in the course!
Overview
Section 1: Introduction
Lecture 1 Welcome to the course
Lecture 2 What is React & why learn it ?
Lecture 3 React DEMO
Lecture 4 What you need to know before React
Lecture 5 Environmental Setup for React JS
Lecture 6 Links & Resources
Section 2: React Basics
Lecture 7 Section overview
Lecture 8 Traditional HTML CSS & JS Website
Lecture 9 Adding React to your website
Lecture 10 Render a react component
Lecture 11 What is JSX
Lecture 12 JSX Dynamic Values and Variables
Lecture 13 Functions and Events in JSX
Lecture 14 Using Images
Section 3: Create React App
Lecture 15 Section overview
Lecture 16 How to create a React Application
Lecture 17 React Structure explained
Lecture 18 How to start run and stop a react development server
Section 4: How to use Style in React
Lecture 19 Section overview
Lecture 20 Using the style attribute in React
Lecture 21 Using CSS in React
Section 5: React Components and Props
Lecture 22 Section overview
Lecture 23 What are Components and how to create a react components
Lecture 24 What are Props
Lecture 25 Children Prop
Lecture 26 Create a reusable Card Component
Lecture 27 Using Icons in React
Lecture 28 Using Bootstrap in React
Lecture 29 Create a Button Component
Lecture 30 Function props aka event handlers
Section 6: Project: E-Learning Platform
Lecture 31 Section overview
Lecture 32 Create the App
Lecture 33 Create a Title Component
Lecture 34 Header Component with child props
Lecture 35 Button component with click event handlers
Section 7: React State and useState Hook
Lecture 36 Section overview
Lecture 37 What is State and how to useState in React
Lecture 38 Example with useState Hook
Lecture 39 Create a Modal Comp and apply useState
Lecture 40 Extend components and state
Lecture 41 Using List in React
Lecture 42 useState on Lists
Section 8: Working with DATA and the React useEffect Hook
Lecture 43 Section overview
Lecture 44 Create a Testimonial component
Lecture 45 Working with JSON data
Lecture 46 What is useEffect and how to use it
Lecture 47 Dependency Array of useEffect
Lecture 48 Update testimonials with useEffect
Lecture 49 Add Star rating with useState and map
Section 9: Element Reference with React useRef Hook
Lecture 50 Section overview
Lecture 51 What is useRef and how to use it
Lecture 52 Page navigation with useRef
Lecture 53 Scroll Back To Top Button with useRef
Section 10: Forms submissions in React
Lecture 54 Section overview
Lecture 55 Forms label and inputs
Lecture 56 Form group component
Lecture 57 Input values and changing values
Lecture 58 Referencing inputs with useRef
Lecture 59 Form submission and reset
Lecture 60 Simple Login and Form validation
Lecture 61 Create a Registration Form Component
Lecture 62 Simple Form registration
Section 11: Error handling in React
Lecture 63 Section overview
Lecture 64 Throw error using try catch
Lecture 65 Waiting for server response
Lecture 66 Error by data fetching
Lecture 67 Custom Error Boundaries Component
Section 12: Refactoring React App
Lecture 68 Section overview
Lecture 69 Why should you refactor your code
Lecture 70 Refactoring the Header Component
Lecture 71 Refactored the Categories Section
Lecture 72 Refactored the Offers Section
Section 13: Navigating with React Router
Lecture 73 Section overview
Lecture 74 What is React Router
Lecture 75 How to install and adding a Router
Lecture 76 Create the Root Route
Lecture 77 Handling Not Found Errors
Lecture 78 Creating Routes
Lecture 79 Nested Routes, children and Outlet
Lecture 80 Client side Routing
Lecture 81 Active Link Styling
Lecture 82 The index Route
Lecture 83 Resources
Section 14: App Data Sharing with React useContext
Lecture 84 Section overview
Lecture 85 The Problem with Prop drilling
Lecture 86 What is useContext and why use it
Lecture 87 React useContext Hook example
Lecture 88 Create a Dark Theme
Lecture 89 Toggle Dark Theme
Lecture 90 Change Arrow Icon on Dark Theme
Lecture 91 Toggle Categories on Dark Theme
Lecture 92 Toggle Offers on Dark Theme
Section 15: React Styled Components
Lecture 93 Section overview of React Styled Components
Lecture 94 About React Styled Components
Lecture 95 Pros and cons of React Styled Components
Lecture 96 React Styled Components example
Lecture 97 Create a ModalStyle Component
Section 16: Project - Employee Payroll App
Lecture 98 Project overview
Lecture 99 Project setup
Lecture 100 Creating project components
Lecture 101 App Routing / Navigation system
Lecture 102 App Root, Index and Error page
Lecture 103 App Navigation with routs
Lecture 104 Page wrapper styled component
Lecture 105 App Contact form
Lecture 106 Contact form validation
Lecture 107 Contact form Successful submission
Lecture 108 Home page component
Lecture 109 Create a Login form component
Lecture 110 Login with useContext
Lecture 111 Display Personal and Logouton Authentication
Lecture 112 Login validation with styled component and context
Lecture 113 Create a Personal List component
Lecture 114 Personal Data and Storage
Lecture 115 Add Search functionality
Lecture 116 Display Personal Detail
Lecture 117 Source Code
Beginner Web Developers: If you are new to web development or have basic knowledge of HTML, CSS, and JavaScript, this course can be a great starting point for learning React. It provides a solid foundation and introduces you to the key concepts and techniques used in building React applications.,Front-end Developers: If you are already familiar with front-end development and want to expand your skills by learning React, this course can help you enhance your knowledge and enable you to build more interactive and dynamic user interfaces.,JavaScript Developers: If you have experience with JavaScript but have not yet worked with React, this course can help you dive into the world of React and learn how to leverage its features and benefits in your projects.,UI/UX Designers: If you are a UI/UX designer who wants to have a better understanding of how to implement your designs in code and create interactive prototypes, learning React can be valuable. This course will teach you the necessary skills to bring your designs to life using React.,Backend Developers: If you have experience with backend development and want to expand your skill set to include front-end development using React, this course can help you bridge that gap and understand how to integrate React components into your existing projects.,Anyone Interested in React: If you have a general interest in React and want to explore its capabilities and possibilities, this course can serve as a comprehensive introduction. It is designed to cater to individuals with varying levels of programming experience.
Fikper
Code:
https://fikper.com/kP9ap29ria/.React.for.Beginners.-.From.HTML.CSS..JavaScript.to.React.js.part1.rar.html
https://fikper.com/mKBVDhe9ic/.React.for.Beginners.-.From.HTML.CSS..JavaScript.to.React.js.part2.rar.html
https://fikper.com/T2nhEFIvgS/.React.for.Beginners.-.From.HTML.CSS..JavaScript.to.React.js.part3.rar.html
https://fikper.com/ngZl0KHD2J/.React.for.Beginners.-.From.HTML.CSS..JavaScript.to.React.js.part4.rar.html
https://fikper.com/RgI8r8tXxs/.React.for.Beginners.-.From.HTML.CSS..JavaScript.to.React.js.part5.rar.html
Code:
https://rapidgator.net/file/e5a4d362af5e0aad2aa5ad8a2c361206/.React.for.Beginners.-.From.HTML.CSS..JavaScript.to.React.js.part1.rar
https://rapidgator.net/file/69495470bb042d93b029b650b8b259b0/.React.for.Beginners.-.From.HTML.CSS..JavaScript.to.React.js.part2.rar
https://rapidgator.net/file/943e55fd6cf8b0bfe893fed294a0c6e6/.React.for.Beginners.-.From.HTML.CSS..JavaScript.to.React.js.part3.rar
https://rapidgator.net/file/a09b23eb8b1c0c8656b18b1ab128e5e6/.React.for.Beginners.-.From.HTML.CSS..JavaScript.to.React.js.part4.rar
https://rapidgator.net/file/6f3a3ad08704880c519abc5895f18c44/.React.for.Beginners.-.From.HTML.CSS..JavaScript.to.React.js.part5.rar
Code:
https://turbobit.net/12jga6izgwya/.React.for.Beginners.-.From.HTML.CSS..JavaScript.to.React.js.part1.rar.html
https://turbobit.net/zvnmythpxo2o/.React.for.Beginners.-.From.HTML.CSS..JavaScript.to.React.js.part2.rar.html
https://turbobit.net/99y9okzq24cx/.React.for.Beginners.-.From.HTML.CSS..JavaScript.to.React.js.part3.rar.html
https://turbobit.net/pfomzyt8ffcy/.React.for.Beginners.-.From.HTML.CSS..JavaScript.to.React.js.part4.rar.html
https://turbobit.net/6sh1vgla5ftg/.React.for.Beginners.-.From.HTML.CSS..JavaScript.to.React.js.part5.rar.html