In contrast to jQuery, which communicates with the model of the document through a single interface, React works through a "virtual" DOM. React does not know about modifications made to the DOM beyond React and makes updates using its internal representations. React is the best choice to build code blocks that can be reused to create UI components and stack them over each other to reduce the number of times the DOM must be re-drawn upon changes to its state.
The React part of the course starts with a hands-on activity where you will learn to use functional React components, including props, Callback functions, OnClick Events, and React State hook. React State hook to construct an efficient calculator. Then we'll dive into the second project, which will be constructing the connect-4 clone. In this project, we will go over advanced concepts like the passing of props and destructuring and passing arguments to events that click, different ways of styling, and how to handle callbacks. We will also cover how to use the React principal property React Lifecycle Events and rendering with conditional. At the end of the course, you'll be able to build a complete multi-player and single-player connect-4 game with integrated AI features.
In the last section of the course, we use React's power by creating an entire e-commerce website with various categories of products, a display, a shopping cart feature, and more. This section will introduce various new concepts like JSON server and Fetch API, as well as install a React router. These building blocks are essential and are utilized to render the categories of products and the product listing style and set up the page for product information. Then we will look at the styles of components, restructure the shop's layout, and investigate the notion of "context" in React. In the last stages of the project, students will design the shopping cart's basket and checkout function. We will also introduce the ability to search for products and do in-depth exercises to validate input forms using React.
As you can tell, this course covers a lot of subject matter. The best part is that it was co-written with Tim Maclachlan - a renowned senior full-stack developer with more than 20 years of experience in the field of commercial development. As a multi-faceted developer, Tim is an expert in analytical, algorithmic, and mobile application development. He has written hundreds of apps and worked in various fields, from aviation, commercial, and military to finance and banking. Tim is a true enthusiast for teaching others to improve their code writing skills and is looking forward to working in a classroom with students.
Content of the Course:
- Know what is the Document Object Model (DOM)
- Modify Web Page Components by using the DOM
- Learn to compute and work with Arithmetic Operators
- Learn to work with arrays, including Multi-Dimensional arrays
- Learn to Splice, Sort, and Join arrays
- Learn to embed the jQuery Library into Web Development Projects
- Explore the jQuery Syntax and Selectors
- Learn how to work using the jQuery Events
- Learn to toggle components in jQuery.
- Learn to animate objects using the jQuery language.
- Learn to use Callback Functions in jQuery.
- Learn to build Interactive Navigation Components with jQuery.
- Find out about the Get Content Method in jQuery
- Learn to build Front-End UI elements with the help of React Library
- Examine the foundations of React
- Learn about the tools required for React Projects
- Learn how to make use of Code Pen for Testing Front-End Development Projects
- Learn to use Components, Props, and Callbacks in the React programming language.
- Learn how to use Events as well as React State Hook and React State Hook
- Learn to debug React Projects
- Learn Global inline, dynamic, and dynamic Styles of React UI Components
- Utilize React Key Property, React Key Property and React Lifecycle Events
- Learn React's Conditional Rendering feature.
- Deploy React Projects to Netlify and increase the speed of growth
- Discover the Basics of JSON Server and Fetch API
- Learn how to create an Calculator and Connect-4 Clone and a fully customized E-Commerce Website using React.
- Learn React Router
- Create an E-Commerce Search Feature using React
- Learn how to validate forms in React.