Compose and test React with confidence and excellent developer experience
This article is used as the material given to participants before the hands-on lab at Openslava 2018 conference.
HANDS-ON LAB
Compose and test React with confidence and excellent developer experience
⏰ 8:30 Thursday, October 18, 🏫 FEI E702, Proficiency: Intermediate
One of the many significant parts of React is how it makes you think about apps as you build them. React promotes many useful patterns. In this workshop, we will explain the benefits of patterns that help us test parts of React Redux applications. We will encourage the use of a style guide for component development in isolation and focus on composability and testability of components. Forget higher order components, we will use render props and new Context API, but explain when Redux is still needed. We will discuss developer experience and project maintainability techniques on large, long-lasting projects. We will pinpoint some of the common mistakes and costs associated with fixing them. This workshop is targeting developers with an intermediate understanding of Javascript and React and how it works.
Instructors
👨🏫Marcel Mokos, bio
Expectations
- if you do not have wide experience with React, please read the following resources to better understand the content of the workshop
- if you have experience with React, look at least at the render props technique and the great video from Kent C. Dodds how to simplify reusable components both featured on the bottom.
- there will be a short high-level introduction to the design patterns used by React
- we will be using codesanbox.io, please have the latest version any modern browser but I recommend chrome
- you will not need to have a running node and editor on your local workstation. You will not go wrong if you have a node at least on LTS version 8 preferably on the latest version 10, download
- we will create presentational components, write tests for them and compose them and connect them to redux, and more
Before we start a short introduction what is React
- React is not a full-featured javascript framework
- React is a Javascript library for building user interfaces
- React has a large community that contributes many useful libraries to React ecosystem
The motivation behind creating react
React doesn’t use templates.
Traditionally, web application UIs are built using templates or HTML directives. These templates dictate the full set of abstractions that you are allowed to use to build your UI.
React approaches building user interfaces differently by breaking them into components. React uses a real, full-featured programming language to render views, which we see as an advantage over templates for a few reasons:
- JavaScript is a flexible, powerful programming language with the ability to build abstractions. This is incredibly important in large applications.
- By unifying your markup with its corresponding view logic, React can actually make views easier to extend and maintain.
- By baking an understanding of markup and content into JavaScript, there’s no manual string concatenation and therefore less surface area for XSS vulnerabilities.
Read more in the blog post Why did we build React? from June 05, 2013 by Pete Hunt.
📚 Define some vocabulary
JSX may remind you of a template language, but it comes with the full power of JavaScript. JSX produces React “elements”. JSX In Depth
An element is a plain object describing what you want to appear on the screen in terms of the DOM nodes or other components. Elements can contain other elements in their props. Creating a React element is cheap. Once an element is created, it is never mutated.
React.Component
A component can be declared in several different ways. It can be a class with a render() method. Alternatively, in simple cases, it can be defined as a function. In either case, it takes props as an input and returns an element tree as the output.
The Component Lifecycle, each component has several “lifecycle methods” that you can override to run code at particular times in the process. You can use this lifecycle diagram as a cheat sheet. In the list below, commonly used lifecycle methods are marked as bold. The rest of them exist for relatively rare use cases.
Class Properties
A defaultProps can be defined as a property on the component class itself, to set the default props for the class. This is used for undefined props, but not for null props.
Instance Properties
Props (which stands for properties) are commonly used terms for component object input argument. This is why people say that the props flow one way in React from parents to children.
The state contains data specific to the component that may change over time. The state is user-defined, and it should be a plain JavaScript object.
📚 Please see the following materials to have a better understanding of the hands-on lab
Read this blog post, Thinking in React:
📖 https://reactjs.org/docs/thinking-in-react.html
If you do not know what is render props please read the following blog:
📖 https://reactjs.org/docs/render-props.html
📹 Watch this video to understand why render props can be useful.
Kent C. Dodds how to simplify reusable components
Kent C. Dodds how to simplify reusable components (30min)
✨ I am looking forward to seeing you at the workshop ✨
📢 If you have any questions or requests please write a comment or suggest an edit.
Hands-on lab materials
🚀 https://medium.com/ableneo/decoupling-software-design-patterns-commonly-used-with-react-71ac2cac548b
