Course Curriculum
This program will work as a gateway for candidates to understand the concepts and architecture of React. The program aims at providing basic learning for HTML/CSS/JavaScript/TypeScript, learn state management using Redux, learn how Redux works in the React environment, learn advanced concepts of React including Hooks.
Week 1
Technical Skills:
Introduction to HTML
Tags, Attribute and Elements, Headings, Paragraphs, and Formatting Text, Div and Span tag for Grouping, Lists and Links ,Images, image mapping and Tables, hyperlink, url and url encoding, frame, form, header (title, base, styles, link, script and meta)
Introduction CSS
Syntax, single, multiple style sheets, value length, percentage
Applying CSS to HTML, Selectors, Background cursor, Properties and Values, CSS Color and Backgrounds, List Table, CSS Box Model ,CSS Margins, Padding, and Borders, CSS Text and Font Properties, CSS Display Positioning, CSS Floats.
Week 2
Technical Skills:
Introduction to JS, Applying JavaScript (internal and external), Understanding JS Syntax, Introduction to Document and Window Object, Variables and Operators, Data Types and Num Type Conversion, Math and String Manipulation, Objects and Arrays, Date and Time, Conditional Statements, Switch Case , Looping in JS, Functions, Event handing , DOM Manipulation
Week 3
Technical Skills:
Fundamental of typescript, basic types, creating types, working with generic types, Creating strongly-typed function component props, Creating strongly-typed function component state, Creating strongly-typed class components, Creating strongly-typed component events and event handlers, Creating strongly-typed context, Creating strongly-typed refs, Creating React projects with TypeScript using Create React App, Creating a React and TypeScript project manually.
Week 4
Technical Skills:
Introduction to ES6+, Function Scope, Block Scope, Constants, var vs let, let const and var, exercise on function scope, block scope and constant, Arrow Functions-flat arrow syntax, context binding, default argument, hacks in ES6, Classes-prototypal inheritance in ES6, inheritance, super, shadowing, creating abstract classes, getters and setters, static methods.
Introduction to Capstone Project
Week 5
Technical Skills:
Destructuring, Object Property, short hand notation, deeper destructuring, destructuring functions and pitfalls, spread operators and rest parameters, objects in ES6, equality, mixins, computed object keys, tail call optimisation, symbol, the for-of loop, string and template literals, sets, map, iterators and generators in depth, ES6 promises, configuring ES6 with web pack, The Reflects API.
Capstone Project Continues
Week 6
Technical Skills:
Fundamental of React- Hello React, Exploring a React Project Directory Structure, react component, introducing jsx, react jsx, list in react, react component instantiation, react DOM, react component definition (advanced), handler function in jsx, react props, react state, callback handler in jsx, lifting state in react, react controlled components, prop handling (advanced), react side-effect, react custom hooks (advanced), react fragment, reusable react component, react component composition, imperative react, inline handler in jsx, complex javascript in jsx, react asynchronous data, react conditional rendering, react advanced state, react impossible state, Data fetching with react, data re-fetching in react, memoized handler in react (advanced), explicit data fetching, third party libraries, asyn/await in react (advanced), form in react.
Capstone Project Continues
Week 7
Technical Skills:
React legacy-react class component, react class component:state, imperative react, styling in react, CSS in react, SVGs in react, React Maintenance, performance-avoiding first render and heavy computation, typescript in react, unit testing to integration testing, react project structure
React world (Advanced)-Sorting, challenge-reverse sort, last searches, challenge-avoiding duplicates, paginated fetch, deploying a React application, build process, deploy to firebas.
Capstone Project Continues.
Week 8
Technical Skills:
Getting to know Redux (Theory), First Redux ApplicaMon, Understanding State Updates with AcMons, Building Skypey: A More Advanced Example, Building Skypey: Designing the State Object, Building Skypey: The User Component, Building Skypey: The Empty Screen, The Chat Window, Header, Messaging, The Skypey App. This module takes a bottom-up approach, enforcing the basic aspects of Redux before incorporating them together in a creative and interactive way. It begins with a short theoretical section before moving on to application based problems.
Capstone Project Presentation