Frontend development with React

Course Overview

Server-side developers (Java, .NET and others) usually find the web platform a mess. Some parts look quite interesting and advanced and some parts look like they were invented a decade ago.

Becoming a FED (Front End Developer) is a journey. First, we discover the power (and limitations) of the JavaScript programming language. Second, we explore browser APIs like DOM, AJAX, and HTML5 features. Last, we integrate them all into a modern client-side framework like React.

During this 5-day course, we will learn and deep dive into every major concept that is a must for a serious FED that wants to create React applications. At the end of the course, you will be able to develop rich client-side web applications using the latest web technologies.

  • Who should attend

    Software developers who want to get into Frontend development with React.

  • Prerequisites

    • Good familiarity with one of the OOP popular languages like Java or C#.
    • Basic familiarity with JS.
    • Basic familiarity with WEB world including HTTP, CSS, HTML.

Course Content

  • Practical JavaScript
    • Typeof operator.
    • Undeclared vs. uninitialized.
    • Implicit variable declaration.
    • Strict vs. abstract comparison.
    • Arrays pitfalls.
    • Where to declare variables.
    • Apply & call.
    • Self-executing function.
    • Module pattern.
    • Strict mode.

     

    Advanced JavaScript
    • From module to class.
    • Module pattern memory consideration.
    • Function as a constructor.
    • New operator.
    • Prototype.
    • Prototypical inheritance.
    • Instanceof.
    • What is ‘this’.
    • Understanding JS concurrency.

     

    ES6+ & Typescript
    • Block scoped variables.
    • Arrow Function.
    • Template String.
    • Computed Properties.
    • Destructuring Assignment.
    • Modules.
    • Classes.
    • Iterators.
    • Generators.
    • Map/Set & friends.
    • Promise.
    • Async / Await.

     

    The DOM
    • What is a DOM.
    • DOM query.
    • DOM manipulation.
    • Event Handling.
    • Event propagation.
    • DOM selection, traversal & creation.
    CSS
    • The Big Three.
    • CSS Versions.
    • Linking vs. Embedding vs. Inline.
    • Importing.
    • Cascading.
    • CSS Selectors.
    • Pseudo class & Pseudo element.
    • How to calculate specificity.
    • !important.
    • Inheritance.
    • Box Model.
    • box-sizing.
    • Colliding Margin.
    • Inline vs. Block Element.
    • Line Box.
    • Floating.
    • Positioning.
    • Which size unit to use.
    • FlexBox.
    • Grid Layout.

     

    Ajax
    • What is AJAX?
    • XMLHttpRequest.
    • Threading Model.
    • Fetch API.
    • Cache Killer.
    • Working with JSON.
    • JSON Limitations.
    • Same Origin Policy.
    • JSONP.
    • CORS.
  • HTML5
    • What is HTML5?
    • What’s New.
    • History API.
    • Web Storage.
    • Form Validation.
    • Web Workers.
    • Service Workers.
    • Offline Web Applications.
    • Web Sockets.
    • IndexedDB.
    Introducing React
    • Setup.
    • Components vs elements.
    • Introduction to Virtual DOM.
    • Creating elements.
    • Rendering elements.
    • Introduction to JSX.

     

    Understanding React
    • Functional vs class components.
    • Hooks.
    • Lifecycle methods.
    • Stateless vs Stateful components.
    • Reactive component.
    • Updating a component.
    • Validation.
    • Collection Component.
    • Components interaction.
    • Forms.
    • Tooling.
    • Testability.
    Advanced Components
    • Build complex components.
    • JSX Gotchas.
    • Context API.
    • Refs.
    • Immutability.
    • Reconciliation.
    • HOC.
    • State Management with Redux.
    • Motivation & Principles.
    • Actions.
    • Reducers.
    • Store.
    • Data Flow.
    • Integrate with React.
    • Async Actions & Flow.
    • Middleware.
    • API.
    React Router
    • Configuration.
    • Route Matching.
    • History.
    • Index & Links.
    • Dynamic Routing.
    • Confirming Navigation.
    • Component Lifecycle.
    • Bundling.
    • Redux Integration.

     

    Styling in React
    • The challenge.
    • CSS modules.
    • CSS in JS.
    • Styled components.
    • Global styles.
    • Theming.

Want to learn Front end development using React?