Start: 14.10.2017, Saturday-Sunday, 5 weeks (40 hours). Price: 450 leva.
Schedule & Enrollment
Course duration: Duration of the course is 40 astronomical (54 study) hours total. Training will be conducted in 10 sessions by 4 astr. hours.
- 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
- Е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
- 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 and Redux 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 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.)
- 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 – Dependency Injection (DI) of custom application services using React Context. Using addons. Two way binding helpers addon. Refs to components. (2 h.)
- 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.)
- Performance optimization using immutability – shouldComponentUpdate() component method, PureRenderMixin and shallowCompare() to boost performance. Immutability Helpers addon. Cloning ReactElements. (1 h.)
- Testing react components with ReactTestUtils addon – events simulation, mocking, shallow rendering. (3 h.)
- Animation addon – ReactCSSTransitionGroup and ReactTransitionGroup. Internationalization (i18n) and localization (l10n).(2 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.)
- 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