What you'll learn
The purpose of ReactJS
Building a Simple React Web Page
The Tools Needed to work with React
Introduction to Codepen
Introduction to JSX, Functional Components, and React Props
Foundations of Callbacks, and onclick Events
The React State Hook
Building the Calculator
Debugging in React
Document Object Model (DOM)
javascript Arithmetic Operators, Data Types, Arrays, Loops, Events
javascript Variables, Operator Precedence, Objects, Functions
javascript Foundations
Requirements
Basic Knowledge of HTML and CSS
Basic Computer Skills
Description
This course takes you step-by-step through the process of building a fully functional calculator in React. React, also known as React JS, is a powerful javascript library used for building custom, interactive user interfaces using UI components. Some of the most well known examples of organizations using React for their front-end include Netflix, Facebook, and Airbnb. Developed and maintained by Meta along with a community of independent developers, React remains free and open-source. React is a component based library built entirely on javascript, which makes it perfect for designing complex UI's. With React, developers can build encapsulated components that efficiently manage their own state and render UI updates specifically when data changes. For example, think of the automated content refresh feature you see on a twitter feed, or facebook like button. Here the state of the UI component changes on the page, without having to manually refresh when the data is updated. This is just one small, yet powerful feature of React.Through a complete hands-on project, this course will teach you all the fundamental principles of React that you must know to become a proficient React developer. We start right from the basics, including the tools needed to get started. From there we dive into JSX, functional components, props, callbacks, and various onclick events. By this stage, the calculator will have a complete visual display, coupled with functional arithmetic operations. Students then move on to passing parameters in Callback functions, using the React State Hook, and debugging.In addition to the hands-on React module, we also offer a comprehensive overview of javascript for those who need a refresher. Here we start with introducing students to the document object model (DOM) which defines the logical structure of HTML documents. From there we dive into javascript to demonstrate various methods in which DOM elements can be manipulated to add interactivity to static components. We start right from the basics, which includes javascript placement, and data output. From there we move on to variable declaration, arithmetic operations, operator precedence, data types, and objects. Once the foundations are covered, we move on to more complex operations using Arrays, Conditional Statements, javascript comparison operators, booleans and loops. Here students will learn to unleash the true power of javascript to render different outcomes based on user interaction. We will explore the use of functions to efficiently handle repetitive tasks and javascript events to handle output based on actions and occurrences. The section will conclude with a hands-on project where students will implement their knowledge to build a web based photo gallery and background color changer. As you can see this course covers a tremendous bit of ground. Best of all it features 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.
Overview
Section 1: The Document Object Model (DOM)
Lecture 1 DOM Introduction
Lecture 2 DOM Manipulation
Section 2: javascript Development
Lecture 3 Introduction
Lecture 4 JS Placement
Lecture 5 External javascript
Lecture 6 javascript Output
Lecture 7 javascript InnerHTML
Lecture 8 javascript Commenting
Lecture 9 javascript Constants
Lecture 10 javascript Variables Introduction
Lecture 11 javascript Assignment Operator
Lecture 12 javascript Arithmetic Operations
Lecture 13 javascript Arithmetic Operations Continued
Lecture 14 javascript Operator Precedence
Lecture 15 javascript Data Types
Lecture 16 javascript Objects
Lecture 17 javascript Object Output
Lecture 18 javascript Strings
Lecture 19 javascript String Length
Lecture 20 javascript Special Characters
Lecture 21 javascript Random Numbers
Lecture 22 javascript Min and Max Function
Lecture 23 javascript Math Round Function
Lecture 24 javascript Arrays
Lecture 25 javascript Array Attributes
Lecture 26 javascript Arrays - Pop - Push - Shift - Unshift
Lecture 27 javascript Changing and Deleting Elements
Lecture 28 javascript Splicing an Array
Lecture 29 javascript Sorting an Array
Lecture 30 javascript Joining Arrays
Lecture 31 javascript Conditional Statements
Lecture 32 javascript Comparisons
Lecture 33 javascript Booleans
Lecture 34 javascript For Loops
Lecture 35 javascript For-In Loop
Lecture 36 javascript While Loops
Lecture 37 javascript Do-While Loop
Lecture 38 javascript Break and Continue
Lecture 39 javascript Functions
Lecture 40 javascript Events
Lecture 41 javascript Project 1 - BG Color Changer
Lecture 42 javascript Project 2 - Photo Gallery
Lecture 43 javascript Project 2 - Completion
Section 3: Introduction
Lecture 44 Skills Required
Lecture 45 What is React?
Section 4: Project: Build a Calculator in React
Lecture 46 Project Overview
Lecture 47 Hello React
Lecture 48 Tools Needed
Lecture 49 Code Pen
Lecture 50 Intro to JSX
Lecture 51 Functional Components in React
Lecture 52 Why Components?
Lecture 53 Intro to Props in React
Lecture 54 React Components, Props and Callbacks
Lecture 55 Building the calculator visuals
Lecture 56 onclick Events in React
Lecture 57 Passing Parameters in Callback Functions
Lecture 58 Using React State Hook
Lecture 59 Implementing the calculator - Display
Lecture 60 Implementing the calculator - Operators
Lecture 61 Debugging in React
Lecture 62 Project Summary
Students interested in learning how to build interactive web pages using javascript,Students interested in learning ReactJS,Students interested in front-end UI Development using React,Students interested in learning javascript Foundations


Homepage

https://www.udemy.com/course/build-a-calculator-in-react-javascript-foundations/