Trainer: Vlad Zelinschi
Duration: 3 days
As React grew in popularity, so did the number of libraries and utilities meant to integrate with it. Redux is the most well-known implementation of a one-way dataflow architecture. By embracing functional programming concepts, promoting simplicity and exposing a very simple API, Redux quickly became a popular choice for managing state within React projects. On the other side, React Router dominates the routing scene and has become the de-facto solution for client-side routing in React apps.
In this training we will dissect and understand what one-way dataflow architecture is. We will grasp the need of a state manangement library and explore the advantages it brings. We will fully integrate Redux, React Router and briefly work with component libraries (Material UI). We will also talk about performance tips in order to avoid render storms and best practices about how to construct your global store. Feel free to consult the high-level agenda below.
- State in big applications
a. Architectural patterns - lifting state up for sharing information
b. Issues with state lifting in complex applications
- What is Redux?
a. Introduction to Redux
b. What problems does Redux solve?
- Redux basics
a. Concept of a pure function (small dive into functional
e. The overall data flow in a React + Redux app
- General architecture of the puppy adoption app
a. Discussing the high-level approach to building a puppy adoption app with React and Redux
a. What is an action?
b. Simple actions vs. action creators
c. Creating and dispatching an action
d. Async actions and
e. Testing the actions / action creators
a. What is a reducer?
b. Creating a reducer
c. Testing the reducer
d. Combining multiple reducers (talk about
- Small introdution to HOCs
a. What is a HOC?
b. How can HOCs be useful?
c. Example of HOCs in the wild
a. What is the store?
b. Connecting a React component to the store
react-reduxinside the application
e. Closing the loop on the data flow
- Implementing the puppy adoption application
a. Listing all the puppies
b. Implement adopt/un-adopt
c. Implement filtering
d. Implement deletion
e. Adding ability to add more puppies via a form
- React Router
a. Introduction to Single Page Apps (SPAs)
b. React Router basics
c. Parameterized routes, query data, redirects
d. Accessing route information anywhere via
e. Adding the individual puppy view in the application
- Component libraries
a. What are component libraries and why are they useful?
b. Examples of component libraries
c. Integrating Material UI components in the puppy adoption app
- Performance in React
a. An overview of the reconciliation algorithm
b. Using keys in React
c. Binding functions the right way
d. Build for production
e. Introduction to pure components
g. Avoiding render storms (nested state best practices)
h. Avoiding computed mappings in Redux
i. Profiling your React app and identifying performance bottlenecks
- Tweaking and improving the puppy adoption application
a. Identify potential performance issues
b. Codebase overhaul
a. Actions and async action creators
b. Reducers and immutability
d. Connecting components to the store
e. Visualizing the data flow inside a React + Redux app
f. React Router
g. Component libraries
h. Performance best practices
- Video projector
- WiFi access (students need to be able to clone Git repositories and download npm packages from the internet)
- Flipchart + flipchart sheets OR writing board (please inform us if this is something you cannot provide)
- Markers for writing - different colors (please inform us if this is something you cannot provide)
- Ability to plug to power source for every computer in the room (extension cords if needed, etc.)
- Every student will have his/her own laptop. For best results, it is not advisable to multiple people working on the same machine
- Node v8.9.4 or greater installed (https://nodejs.org/en/download/)
- Git v2.16.0 installed (https://git-scm.com/downloads)
- 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,
npm (interacting with the
package.json), Git (basic commands) and that they have basic React knowledge (JSX, VDOM, state, props, event management, component lifecycle hooks, 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 and trying technologies such as Redux, React Router and implementing performance best practices in UIs built upon this technical stack.