Masterclass: React component patterns

Date: 9-10 May 2018, Iasi
Days: 2 (16 hours)

Target audience: Frontend developers with basic React and Redux knowledge required willing to make the leap to more advanced levels.

Training fee: €330/participant plus VAT, only 15 seats available
To book your seats, please contact us by email ([email protected]) or phone (+40 741 103 133).


1. Stateless functions
a. What are stateless functions?
b. When to use
c. Drawbacks
2. JSX spread attributes
3. Destructuring arguments
4. Conditional rendering
a. If
b. Unless
c. If / Else block
5. Arrays as children
a. Usage with functional methods (mapfilter, etc.)
b. Explanation of React keys
6. Controlled vs. uncontrolled components
a. What are controlled components?
b. What are uncontrolled components?
c. Dealing with controlled vs. uncontrolled
d. When to use controlled vs. uncontrolled
e. Drawbacks
7. Container vs. presentational components
a. What are container components?
b. What are presentational components?
c. Reasons behind the split
d. Practice with container vs. presentational in simple React
e. Practice with container vs. presentational in React + Redux
8. State hoisting
a. Advantages of hoisting state
b. Drawbacks and possible gotchas
9. Provider / Consumer pattern
a. New context API in React 16
b. When to use Provider / Consumer pattern
c. Drawbacks
10. Higher Order Components
a. What are HOCs?
b. Practice with HOCs
c. Example of HOCs in the wild (withRouter, connect, etc.)
d. When to use HOCs
e. Drawbacks
11. Functions as child components
a. What are functions as child components?
b. Practice with functions as child components
c. Differences between functions as child components and HOCs
d. When to use functions as child components
e. Drawbacks
12. Short recap

This agenda represents the contents for a 2 days (16 hours) based training, covering a great number of React related concepts, knowledge and practical applications. Although the training content can be tweaked on a per case by case basis, for maximum results we recommend sticking with the complete agenda.

1. Every student will have his/her own laptop. For best results, it is not advisable to multiple people working on the same machine
2. Node v8.9.4 or greater installed (
3. Git v2.16.0 installed (
4. An IDE/code editor of choice (Sublime Text, Atom, Visual Studio Code, WebStorm, etc.)

This training assumes the participants are already familiar with ES6 concepts
(classes, destructuring, default parameters, arrow functions, let/const, etc.), basic JavaScript knowledge and syntax, npm (interacting with the npm ecosystem, package.json), Git (basic commands) and that they have basic React and Redux knowledge (JSX, VDOM, state, props, event management, component lifecycle hooks, actions, reducers, store, mapStateToProps, mapDispatchToProps etc.). Thus, the aforementioned concepts will not be discussed or detailed during the training.

This training targets intermediate developers who would like to upgrade their
React knowledge by finding out more about React component patterns, when
and how to apply them and gain architectural knowledge useful in scaling
applications based on this technical stack.

The trainer
Vlad is a pragmatic software engineer, Google Developer Expert and an avid caffeine consumer. He loves surrounding himself with ever smiling people and he’s constantly pushing his limits in order to become a better professional. He always keeps an eye opened to the ever-changing landscape of technologies he’s interested in. A true believer in the power of sharing your knowledge and becoming a better individual through collaboration and feedback, Vlad regularly speaks at conferences and meetups where he shares his passion for everything tech related.

Vlad is co-organizer of CluJSers, being actively involved in the development of several tech communities and acting as an advisor for a couple of well known
Romanian conferences such as Codecamp and JSHeroes. In October 2016 he
joined the Google Developer Experts group as the second professional in the world with knowledge revolving around the React ecosystem. Shortly after, he founded KRAK3N, his own consultancy company and has been, since then, helping clients and individuals build amazing products, deliver business value, solve complex JavaScript challenges, learn and apply React and embrace Agile methodologies in their work environments.

His teaching experience is vast, Vlad being responsible for mentoring over 100 people while working for companies such as Yonder, 3PillarGlobal or acting as a Fullstack JavaScript Instructor for Viking Code School. For more information about him, feel free to follow him on Twitter, read his personal website, consult his company website or explore a short list of talks he has given so far.


Training fee: €330/participant plus VAT, only 15 seats available
To book your seats, please contact us by email ([email protected]) or phone (+40 741 103 133).


Browse more masterclasses here.