Complete JavaScript, XML, AJAX and React Bootcamp - Hands-On
- Description
- Curriculum
- FAQ
- Reviews
Hello and welcome to this exciting new course, where we explore some of the most powerful front-end development languages used in modern web development. In this course you will learn to harness the power of JavaScript, XML, AJAX, and React to build highly interactive web pages from scratch. We start with an introduction into the document object model, followed by an in-depth guide to the essentials of JavaScript. In the JavaScript section you will learn a number of concepts instrumental towards your journey as a developer. This includes working with variables, arithmetic operators, objects, functions, arrays, events, and loops. You will also learn the importance of JavaScript placement, while working with both internal and external JavaScript code components. Students learn the importance of operator precedence when performing simple and complex arithmetic operations. Furthermore, you will have the opportunity to work with conditional statements to perform comparisons between different operations. Once you have a handle on the foundations, we’ll dive into a number of JavaScript development projects where you will have an opportunity to apply your new skills with practical hands-on exercises. This includes building an automated background color changer, and photo gallery complete with mouse overs and image transitions.
In the second section of the course we will explore XML and AJAX to demonstrate the power of asynchronous page updates. This means building web components that automatically update on a web page, without having to manually refresh. You will have an opportunity to work with both XML and AJAX in conjunction with JavaScript to build modern web app components such as a search suggest feature, and a pre-populated select menu.
Once you have a foundational understanding of JavaScript and AJAX, we will dive into working with React, a powerful JavaScript library used for front-end UI development. The React section starts off with a hands-on project where you’ll learn how to work with functional React components, props, Callback functions, OnClick Events, and the React State hook to build a fully functional calculator. From there we will dive into project number two, where you will build a connect-4 clone. Here we will cover more intermediate concepts including passing props, de-structuring, passing arguments to click events, various styling methods, and handling callbacks. You will also learn about the React key property, React lifecycle events, and conditional rendering. By the end you will have built a complete multi and single player connect-4 game board with built-in AI capabilities.
In the final section of the course we further unleash the power of React by building out a complete e-commerce site with multiple product categories, a product showcase, shopping cart feature, and much more. Here, we introduce a number of integral new concepts including: JSON server, Fetch API, and installing React router. These essential building blocks will be used to render the product categories, style the product list, and configure the product details page. From there we dive into styled components, refactoring the shop layout, and exploring the concept of “context” in React. In the final stages of the project students will configure the shopping cart basket, and the checkout feature. We will also implement a product search feature, followed by in-depth exercises on validating input forms in React.
As you can see this course covers a tremendous bit of ground. Best of all it’s co-authored by Tim Maclachlan – a renowned senior full-stack developer with over 20 years of commercial development experience. As a multi-faceted developer, Tim specializes in algorithmic, analytical and mobile development. To date, he’s written hundreds of applications and worked in a number of industries from commercial aviation and military, to banking and finance. Tim has a genuine passion for teaching others how to become better coders and looks forward to interacting with his students.
With that said, we hope you’re just as excited about this course as we are, if so – hit that enroll button and let’s get started.
-
3IntroductionVideo lesson
-
4JS PlacementVideo lesson
-
5External JavaScriptVideo lesson
-
6JavaScript OutputVideo lesson
-
7JavaScript InnerHTMLVideo lesson
-
8JavaScript CommentingVideo lesson
-
9JavaScript ConstantsVideo lesson
-
10JavaScript Variables IntroductionVideo lesson
-
11JavaScript Assignment OperatorVideo lesson
-
12JavaScript Arithmetic OperationsVideo lesson
-
13JavaScript Arithmetic Operations ContinuedVideo lesson
-
14JavaScript Operator PrecedenceVideo lesson
-
15JavaScript Data TypesVideo lesson
-
16JavaScript ObjectsVideo lesson
-
17JavaScript Object OutputVideo lesson
-
18JavaScript StringsVideo lesson
-
19JavaScript String LengthVideo lesson
-
20JavaScript Special CharactersVideo lesson
-
21JavaScript Random NumbersVideo lesson
-
22JavaScript Min and Max FunctionVideo lesson
-
23JavaScript Math Round FunctionVideo lesson
-
24JavaScript ArraysVideo lesson
-
25JavaScript Array AttributesVideo lesson
-
26JavaScript Arrays - Pop - Push - Shift - UnshiftVideo lesson
-
27JavaScript Changing and Deleting ElementsVideo lesson
-
28JavaScript Splicing an ArrayVideo lesson
-
29JavaScript Sorting an ArrayVideo lesson
-
30JavaScript Joining ArraysVideo lesson
-
31JavaScript Conditional StatementsVideo lesson
-
32JavaScript ComparisonsVideo lesson
-
33JavaScript BooleansVideo lesson
-
34JavaScript For LoopsVideo lesson
-
35JavaScript For-In LoopVideo lesson
-
36JavaScript While LoopsVideo lesson
-
37JavaScript Do-While LoopVideo lesson
-
38JavaScript Break and ContinueVideo lesson
-
39JavaScript FunctionsVideo lesson
-
40JavaScript EventsVideo lesson
-
41JavaScript Project 1 - BG Color ChangerVideo lesson
-
42JavaScript Project 2 - Photo GalleryVideo lesson
-
43JavaScript Project 2 - CompletionVideo lesson
-
54Project OverviewVideo lesson
-
55Hello ReactVideo lesson
-
56Tools NeededVideo lesson
-
57Code PenVideo lesson
-
58Intro to JSXVideo lesson
-
59Functional Components in ReactVideo lesson
-
60Why Components?Video lesson
-
61Intro to Props in ReactVideo lesson
-
62React Components, Props and CallbacksVideo lesson
-
63Building the calculator visualsVideo lesson
-
64OnClick Events in ReactVideo lesson
-
65Passing Parameters in Callback FunctionsVideo lesson
-
66Using React State HookVideo lesson
-
67Implementing the calculator - DisplayVideo lesson
-
68Implementing the calculator - OperatorsVideo lesson
-
69Debugging in ReactVideo lesson
-
70Project SummaryVideo lesson
External Links May Contain Affiliate Links read more