Saturday-Sunday, 5 weeks (40 hours). Price: 450 leva.
Course duration: Duration of the course is 40 astronomical hours total. Training will be conducted in 10 sessions by 4 astr. hours.
Expected results:
- Experience using ECMAScript 6 & 7 new features: Classes, Promises, lambda functions, iterators and generators, rest/spread, async/await
- Implementing reusable presentation components using React JS v.16 (Fiber)
- Еxperience building single page web applications (SPA) using React Router
- Planning state representation and management, best practices for maintainability and performance optimization using immutability & Redux
- Asynchronous state transitions and data-flows with redux-thunk, redux-promise, redux-observable
- Test-driven development of React and Redux components using Jest, redux-mock-store, React Test Utils, Enzyme
- Transparent and scalable derived state management with MobX – observable state, actions, reactions, async actions and flows.
- Data query/mutation, automatic caching, pagination and infinite scrolling, optimistic UI, query batching, subscriptions, prefetching and server-side rendering using GraphQL & Apolo Client.
Course Description:
The course provides practical experience using React JS v16 (Fiber), Redux and MobX web component and application development frameworks. The main topics that will be covered during the course are:
- 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.)
- 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.)
- 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 simple Todos application with create-react-app. Stateful components – react states, setting initial state, updating state. Events in React, managing DOM events. Using React Developer Tools Chrome extension . (3 h.)
- 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.)
- Components composition in depth – ownership, this.props.children, React.Children utilities, child reconciliation, stateful children and dynamic children using keys. Transferring props. Using 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 & Fetch API. (2 h.)
- React rendering lifecycle and life cycle callbacks. Bidirectional owner-child component communication using callbacks passed as properties. (1 h.)
- Working with forms – interactive props, controlled and uncontrolled components. Form building using higher-order React components. (3 h.)
- Novelties in React.js v16+ (Fiber) – New life-cycle methods. Dependency Injection (DI) of custom application services using React Context. Refs to components. (2 h.)
- React Router v4 – <BrowserRouter>, <HashRouter>, <MemoryRouter>. Defining routes using <Route> – component, render & children properties. Properties provided to the rendered component – match, location and history. Index routes and exact matching. Route parameters – props.match.params. Route templates and optional route parameters. Path-to-RegExp matching. Applying withRouter HОC. <Link>, active links with <NavLink>. Simultaneous navigation to multiple components. Choosing single route with <Switch>. Route redirection with <Redirect>. Path-less routes. Recursive routes. Routing animations. Programmatic navigation. Defining hooks – componentDidMount/ componentWillMount, componentDidUpdate/ componentWillUpdate и componentWillUnmount . <Prompt> component. Code splitting & lazy loading of routed modules. (4 h.)
- Performance optimization using immutability – shouldComponentUpdate() component method and PureComponent to boost performance. Immutability Helpers addon. Cloning ReactElements. (1 h.)
- Animations & I18n – using TransitionGroup and CSSTransition. Internationalization (i18n) and localization (l10n) with React. (1 h.)
- 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.)
- 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.)
- Transparent and scalable derived state management with MobX – observable state (objects, arrays, maps, boxed values), @observable, common decorators, reacting to changes using computed (derived) values, functional reactive programming (FRP). Bridging reactive and imperative programming using Reactions – @computed, autorun, when, reaction, @observer. Custom reactions. Modifying state using Actions – bound actions, async actions and flows, Object api. MobX utility functions. (4 h.)
- 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.
For more information, please send us an e-mail at: office@iproduct.org
Schedule & Enrollment