React Essentials & Advanced

FT102


4 Days

Download Full Syllabus Request a Quote
All Our Courses Now Also LIVE

Course Outline

React is a JavaScript library for building user interfaces. It simplifies complex arbitrary DOM manipulations by using a "virtual DOM" and its reconciliation diff algorithm, allowing you to easily transition your DOM into any arbitrary state, regardless of the current state. React implements oneway reactive data flow which reduces boilerplate and is easier to reason about than traditional data binding. Redux takes care of application architecture implementing Flux – a pattern Facebook uses for building client-side web applications.

It complements React's view components by utilizing a unidirectional data flow and managing the state of your application. Learning React and Redux will put you at the very front of the modern web development industry, while also making your new skill relevant for mobile development using ReactNative. This course will get you up and running with the essentials of React components, and creating systems architectures with Redux. You will be able to build scalable apps that run in a browser, then leverage this knowledge to build native Mobile or desktop apps. Whether you are new to React, or if you've started learning it already and need a thorough understanding of React.js & Redux - this course is the leap forward you are after.

Upcoming Meetings

Modules

React.js Introduction
  • React overview
  • JSX, React DOM & babel
  • Project setup with create-react-app
React Components Basics 1
  • Structure
  • The render method
  • Class based components
  • Function components
  • Props
  • PropTypes
  • Conditional rendering
  • Hands on exercise
Implementing CSS with Styled Components
  • Motivation
  • Inline styling vs global styles vs css-in-js
  • Sass/Less vs Styled Components
  • Basic Syntax and examples
  • Styling props
  • Extending styles
  • Polished.js
  • Hands on exercises
React Components Basics 2
  • Managing component state in class components
  • Managing component state in Function components
  • Handling events
  • Using refs
  • Rendering tree - Virtual dom diff algorithm behaviour
  • Hands on exercise
Component Lifecycle
  • Overview
  • Mounting and unmounting components
  • Updating props
  • Other phases usage\
  • Hands on exercise - porting an external lib using lifecycle methods
  • Class components lifecycle methods
  • Related React Hooks in Function components
Lifting up state
  • Parent / child relationship
  • Unidirectional data flow
  • Updating nested components
  • Rendering Collections and lists
  • Hands on exercises - filtering lists and master details
The Redux Architecture
  • Flux overview
  • Redux overview
  • App state mutation
  • Store api
  • Reducers & Pure functions
  • Views
  • Actions
  • Fetching remote data
  • Testing Redux elements
  • Using Middleware
  • Lots of best-practices structure & insights
  • Hands on exercises
Routing with React Router 5
  • Overview
  • Routing Basics
  • Router, Route & Link
  • Histories
  • Redirects
  • Route parameters
  • Query String Parameters
Unit testing with jest
  • TDD intro
  • Unit testing tools overview - test runners, assertion libraries & utilities
  • Jest features
  • Installation & setup
  • Matchers API
  • Async tests
  • Mocking
  • Code coverage
Performance tips & best practices

Prerequisites

  • Good working knowledge and experience with HTML, CSS and JavaScript including ES6 / ES7

Upcoming Meetings

Learning React & Redux will put you at the very front of the modern web development industry”
Download Full Syllabus

Target Audience

    • Israel
    • Poland
    • USA
    • Russia
    • India
    Skip to content