Saturday-Sunday, 5 weeks (40 hours). Price: 450 leva.
Schedule & Enrollment
Course duration: Duration of the course is 40 astronomical hours total. Training will be conducted in 10 sessions by 4 astr. hours.
- Experience using ECMAScript 6, 7 & 8 new features: Classes, Promises, lambda functions, iterators and generators, rest/spread, async/await
- Implementing reusable presentation components using React JS v16
- Е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.
The course provides practical experience using React JS v16 Redux and MobX web component and application development frameworks. The main topics that will be covered during the course are:
- 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.)
- 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+ – New life-cycle methods. Dependency Injection (DI) of custom application services using React Context. Refs to components. Development of purely functional components using React Hooks: useState, useEffect, useContext. Additional React Hooks: useReducer, useCallback, useMemo, useRef, useImperativeHandle, useLayoutEffect, useDebugValue. (4 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, PureRenderMixin and shallowCompare() 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.)
- 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: firstname.lastname@example.orgSchedule & Enrollment