React Essentials & Advanced Course
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 one-way 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 modern web development industry, while also making your new skill relevant for mobile development using React-Native. 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.
לחצו כאן React שמהווה דרישת קדם לקורס Javascript לקורס
Course Objectives
- Be able to create Reactive User Interfaces with React.js & Redux
- Have a Strong foundation building modular blazing fast web applications.
- Ship with confidence top tier fully testable applications and modules.
This course is a good fit for both junior web developers as well as experienced developers from other development environments, wanting to take their front-end expertise to the next level and master the leading framework and techniques available today.
- Good working knowledge and experience with HTML, CSS and JavaScript including ES6 / ES7
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
- Hands on exercises
Routing with React Router 4
- Overview
- Routing Basics
- Router, Route & Link
- Histories
- Nested routes
- Route parameters
- Query String Parameters
- Redirects
- Confirming Navigation
Context API & React Hooks
- What are hooks & what is the fuss all about?
- Using various native hooks
- Custom Hooks
- The context API in conjunction with hooks
- An alternative to global state management
- Extensive demos
- Hands on Exercises
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

- על פי דרישה מועד פתיחה
- 09:00-16:30
ימים ושעות
- 40
שעות אקדמיות
- מתקדם
רמת הקורס
- עברית/English
שפת הדרכה
לבדיקת התאמה לקורס
ממליצים
לפתיחה והורדת סילבוס