Frontend Development With React
5 days
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.
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
Audience
Software developers who want to get into Frontend development with React.
Course Content
Practical
JavaScript
- Type of 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
- DE structuring 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?
- XMLHTTP Request
- 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
- Indexed DB
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
