React JS + Redux + GraphQL

Начало: 29.04.2017, съботно-неделен, 5 седмици (40 часа). Цена: 450 лева.

Траян Илиев - Certified Java SE 6 Programmer

Тренингът се води от Траян Илиев, Oracle® и OMG® сертифициран разработчик на софтуер с 15+ години опит като преподавател за компании като VMware, Software AG, Telenor и др. Траян има множество презентации на международни конференции за разработчици: Voxxed Days, jPrime, jProfessionals, BGOUG, BGJUG на теми като React, Redux, Angular 2, Ionic 2, SOA & REST, high-performance reactive JavaScript & Java programming.

График и записване


Целева аудитория: уеб разработчици и студенти с  практически опит при използване на CSS и JavaScript

График и продължителност на курса: Продължителността на курса е 40 астрономически часа и ще се проведе в рамките на 5 седмици – 10 занятия по 4 ч.  в събота и неделя от 14.00 до 18.15 ч.

 Очаквани резултати:

  • Придобиване на опит с новите възможности на ECMAScript 6 и 7: Classes, Promises, ламбда функции, итератори и генератори, rest/spread, async/await
  • Имплементиране на многократно-използваеми презентационни компоненти с React JS
  • Практически опит в разрботката на single page web applications (SPA) с React Router
  • Планиране на представянето  на състоянието и добрите практики осигуряващи лесна поддръжка, разширяемост и performance оптимизации с използване на immutability и Redux
  • Асинхронни преходи между състояния и data-flows с redux-thunk, redux-promise, redux-observable
  • Test-driven development на React и Redux компоненти с използване на Jest, redux-mock-store, React Test Utils, Enzyme.
  • Извличане/промяна на данни, кеширане, pagination и infinite scrolling, optimistic UI, query batching, subscriptions, prefetching и server-side rendering с GraphQL и Apolo Client.

Описание на курса:

The course provides practical experience using React JS and Redux web component and application development frameworks. The main topics that will be covered during the course are:

  1. Novelties in ECMAScript 6 (ECMAScript 2015, Harmony) – class and constructor syntax, static methods, inheritance, let and var, function lambdas (=>), template literals, destructuring assignment, default and rest parameters, spread operator, Promises. ES6 development using Babel and Webpack. Writing reusable components as ES6 classes. Defining and loading JavaScript modules – requirements for code modularity, module systems, loaders, and JS design patterns: CommonJS and ES 6 modules. Configuring, building and deploying ES6 projects. Integration with build tools – babel, npm, webpack, loaders, plugins, lazy loading & code splitting, cache busting, tree shaking.(4 h.)
  2. Introduction to Single Page Applications (SPA) development Model-View-Controller (MVC), Model-View-Presenter (MVC), Model-View-ViewModel (MVVM) – MV* patterns. Setting up a build system, defining front and back-end architecture (roter, models, views), application design and development (views, APIs and models, router config). React main features and advantages – simple (just the View) and superfast, component oriented development using pure JavaScript (ES 6), virtual DOM, one-way reactive data flow, MVC framework agnostic. (1 h.)
  3. Building React components and applications.  Development workflow, project setup and configuration – package.json, babel (ES 6), webpack. Building simple React components and application. Top level API: React, ReacrDOM, ReactDOMServer. React.createElement() and ReactDOM.render() methods. Using JSX in React. Showing dynamic values. Composing components using properties. Building sample Comments application using official React.js tutorial. Stateful components – react states, setting initial state, updating state. Events in React, managing DOM events. Using React Developer Tools Chrome extension . (3 h.)
  4. JSX in depth – differences with HTML, transformation to JavaScript, namespaced components, expressions, child expressions and comments, props mutation anti-pattern, spread attributes, using HTML entities, custom attributes, if-else, immediately-invoked function expressions (IIFE). (2 h.)
  5. Components composition in depth – ownership, this.props.children, React.Children utilities, child reconciliation, stateful children and dynamic children using keys. Transferring props. Using mixins and ES6 classes. Stateless (pure) functions as components. Where should we put state – common patterns. Integration with other JavaScript libraries. Using markdown__html, dangerouslySetInnerHTML. Ajax requests using Axios. (2 h.)
  6. React rendering lifecycle and life cycle callbacks. Bidirectional owner-child component communication using callbacks passed as properties. (1 h.)
  7. Working with forms – interactive props, controlled and uncontrolled components. Form building using higher-order React components. (3 h.)
  8. Novelties in React.js Dependency Injection (DI) of custom application services using React Context. Using addons. Two way binding helpers addon. Refs to components. (2 h.)
  9. React Router – routes and components, named components, route parameters, index route, links, index links. Nested routes – nested UI components and routing URLs. Active links. NavLink wrapper component. Decoupling the UI from the URL by using routes without paths. Using route redirection to preserve changed routes. Controlling navigation and application state using onEnter and onLeave hooks. Route patterns and optional route params. Simultaneous navigation in multiple viewports using named routing components. Histories – browserHistory vs. hashHistory. Server-side support needed when using HTML 5 History API. Navigating routes programmatically. Using custom History implementations – coding state as route query parameters. Configuring Router programmatically using RouteConfig objects and setting RouteLeaveHooks to validate navigation. (4 h.)
  10. Performance optimization using immutabilityshouldComponentUpdate() component method, PureRenderMixin and shallowCompare() to boost performance. Immutability Helpers addon. Cloning ReactElements. (1 h.)
  11. Testing react components with ReactTestUtils addon – events simulation, mocking, shallow rendering. (3 h.)
  12. Animation addonReactCSSTransitionGroup and ReactTransitionGroup. Internationalization (i18n) and localization (l10n).(2 h.)
  13. Redux – predictable state container for JavaScript apps. Predecessors: Flux design pattern – unidirectional data flow, main components (Action creators, Actions, Dispatcher, Stores, Views and Controller-Views). Building example TODO application using Flux. Redux – combining Flux reactive uni-directional data flows with event sourcing principles and state reduction. Three main principles of Redux – single source of truth (single store); state is read-only (only actions can change state); changes are made using pure functions – reducers: (state, action) => state. Redux main components – Actions, Action Creators, Reducers, Stores. Interaction between Redux components – designing state representation, handling Actions using separate Reducers, combing reduces into single Root Reducer using combineReducers() helper function, registering listeners via Store.subscribe(), dispatching Actions using Store.dispatch(), unidirectional data flow. Connecting Redux with React using React Redux bindings. Presentational and container components. Implementing TODO application using React and Redux. (4 h.)
  14. Advanced Redux – nested API responses normalization using normalizr. Implementing async actions using redux-thunk, redux-promise/ redux-promise-middleware, or redux-observable. Asynchronous data-flows using applyMiddleware(), examples. Using redux-devtools. Building SPA with Redux and React Router. Extended Redux routing support using Redux Router and React Router Redux libraries. Server rendering with Redux. Computing derived data and memoizzation using Reselect. Implementing Undo History. Testing Redux components using Jest, redux-mock-store, React Test Utils, Enzyme. (4 h.)
  15. Fetching data using GraphQL (Apolo). Introduction to GraphQL – queries, mutations, fragments, variables, directives, schemas and types. Using Apollo Client – Redux-based, flexible, production-ready, fully-featured GraphQL client for React platform. React-Apollo integration: queries and mutations, getting updates from the server, controlling the Store, multiple clients. Recipies for authentication, pagination, optimistic UI, using fragments, prefetching data, integrating with Redux, server-side rendering, Webpack integration. Using apollo-client-devtools. (4 h.)

The workshop contains lecture materials and lab exercises. Lectures and exercises will be conducted in parallel and will not be divided in separate sessions in order to achieve immediate reinforcement of theoretical discussions with practical examples and exercises.

During the workshop participants will get practical experience using ReactJS and Redux frameworks as well as developer tools like create-react-app, react-devtools and redux-devtools to develop and test (single page) web applications. The learning is conducted in small groups – up to 10 participants using problem-oriented methodology. During the course there will be opportunity for discussion of additional questions the participants are interested in.

. pdf Viewing detailed program of the course in PDF format

For more information, please send us an e-mail at:

Schedule & Enrollment