React is a library developed by Facebook that deals with rendering your UI in a very smart and performant way. It’s gained a lot of traction due to its simplicity and proposed mindset which empowers developers to have a modular, component-based approach on their frontend architectures.
This training covers a lot of React related concepts, setting the base for understanding applications built on this technical stack. The focus will be on code examples (live coding, application building) and practicality. Feel free to consult the high-level agenda below.
This training targets beginner and intermediate developers who do not have any (or have very basic) experience with React and who want to learn how to build UIs using this technology.
Included below are the main topics covered in this training. The duration is 3 days.
- What is React?
a. Talk about differences between frameworks and libraries
b. What problems is React trying to solve
c. Platforms that are impacted by React (Web, VR, Native)
- What sets React apart?
a. Updating UI philosophy
b. JSX, VDOM, state, props, overall data flow
- Spin up a simple React app in 3 minutes
a. Create React App (CRA) small intro
b. Installing CRA
c. Create a React project using CRA
d. Start the project
e. General overview of the project’s structure
f. Pros/cons of CRA
a. A markup/templating language
c. Differences from HTML
- Writing our first React component
a. Writing using ES6 classes
b. Writing using functions (preferred, in the context of hooks)
- VDOM (Virtual DOM)
a. What is VDOM?
b. How React employs VDOM behind the scenes
- React props
a. What are props in React?
b. Immutability of props
- Dealing with events in React
a. Responding to user events
b. List of predefined handlers in React
- React state
a. What is state and how is it different than props?
b. Changing the state & re-renders
- React component lifecycle hooks
a. Hooks that trigger when component first gets created
b. Hooks that trigger when component’s state changes
c. Hooks that trigger when component’s props change
d. React component lifecycle hooks diagram
- Fetching data from the server
a. The useEffect hook
b. Fetching data and updating the state
- Building a puppy adoption application
a. Initializing the app with CRA
b. Building the component to display the list of puppies
c. Adding in filters
d. Add CRUD operations
- Testing React components
a. Introduction to Jest and Enzyme
b. Types of rendering in Enzyme
c. What to test in a React component
d. Setting up tests in CRA
e. Practice with shallow rendering and state testing
- React architectural patterns, antipatterns and best practices
a. Lifting state up for sharing info between components
b. Aggressive componentization
c. Container vs. Presentational components
d. How the testing strategy adapts to container vs. presentational
e. Local component state vs. state higher up in the chain
f. Spreading props in render and destructuring props parameter
g. Using React children prop
h. Mutating DOM (anti-pattern) & when is it necessary
- Approaching UIs by thinking in React
a. Identifying components from UI and aggressive componentization
b. Identifying state shape and level in component hierarchy
c. Thinking only about state changes over time
- Tweaking and improving the puppy adoption application
a. Moving to Container vs. Presentational approach
b. Split work between multiple components
c. Introduction of React.memo, React.lazy, Suspense and their benefits
About the trainer
Vlad Zelinschi is a pragmatic software architect, lover of the web and caffeine addict. He cares about surrounding himself with thoughtful leaders. He's the CTO of Strongbytes, Google Developer Expert on Web Technologies since October 2016 and a certified trainer. He's part of JSHeroes Community and actively acting as an advisor for a couple of well known Romanian conferences such as Codecamp and NDR.
What our clients are saying
Great workshop! Vlad was an excellent teacher and fostered an open and communicative environment. He explained all the fundamentals needed to begin working on a React project but he also took the time to detail the philosophy behind React and to talk about the inner workings of the Virtual DOM. I found this, along with the "thinking in react" discussion, to be really insightful. We also covered best practices and common pitfalls and I really appreciated the focus on this aspect as well as on practical exercises.