In my opinion, learning new front-end framework gets easier once you can start building basic apps with it. However, you still need to learn a library like React to build something with it. Most important is to learn design patterns to lay the correct foundation for your app.
Design Patterns in React
React shares a lot of similarities with other front-end frameworks Angular and Vue, but it also has unique features that make it the most popular library in the world.
The idea behind React is to reuse component to speed up the development process. But that doesn’t mean simply defining a static component and sticking it in different places. That wouldn’t be very useful. React components are dynamic, they receive data via props. So you can customize React components’ content, appearance, and even functionality.
Composition
Many React components can also be customized via composition. That means using various React features (like children prop) to add custom features to otherwise generic bits of UI.
There are other design patterns that frequently come up when building apps in React. Understanding what’s happening – and why we do certain things the way we do them – will be helpful in gaining deeper understanding of React. You will also find it easier to read others code and suggest improvements to make the code simpler and most importantly, free of errors.
Parent-child component relationship
First is to understand how components relate to one another. React apps are essentially component trees, with one parent component at the top. Some child components have child components of their own, so a component can be both a parent and child component.
Only few components can maintain internal data about the app. For example – should the application be in ‘active’ state? Or should you enable the dark mode? React recommends to store this kind of information in the parent component, often called ‘single source of truth’. This practice is necessary to ensure consistency of data.
Conditional rendering
Another common pattern is conditional rendering. Templating language of React allows you to embed ternary operator inside the structure of your component. You can use these expressions to set a condition to render a component, and also specify what needs to be rendered if the condition is false. Sometimes you will also use nested ternary operators in React. They're used to check multiple conditions.
Conditional rendering allows you to conditionally contents of the page. For example, you can customize the error message the user sees according to their actions. Or you can customize what the user sees depending on his authentication status. Render a dashboard to a user who’s authenticated, and render a welcome page to guest users. Possibilities are endless.
Props
Render props allow you to pass data into components. You can think of them as arguments to a function. All functions return different values depending on arguments passed into them. You wouldn’t want a function that always returns the same thing. Except in case of components, you define a shell of UI and pass it props to customize its contents, functionality, and more.
Without props, component reusability would be impossible in React.
Controlled components
In the old days, you could directly access values in a DOM element and even programmatically change them. React has very specific rules about user interactions and DOM. Most of the time, user inputs are stored in the state, and input elements also get their value from the state. Elements in this two-way bind are called controlled components. In other words, input elements where state controls their value.
Usually you need an event handler to access current input and store it in the state. When there’s an user interaction, event handlers receive an instance of SyntheticEvent – an object that contains bunch of useful information about the event. It also stores information about the element that triggered the event.
Event handlers can usually access current input on e.target.value, where e stands for SyntheticEvent.
By default, event handlers receive only one argument. But you can work around that and pass parameters to onClick in React.
Virtual DOM
React does not allow us to work with DOM because it is too heavy. Instead, React has its internal image of DOM – called virtual DOM. This is just a JavaScript shadow copy of the real DOM. So React uses virtual DOM to keep track of contents and elements on the page. Every time there’s a change to state or props, React will re-render the component and all of its children to ensure the virtual DOM reflects changes on the page.
You do not have to concern yourself with how React settles differences virtual DOM and real DOM. The library handles it internally so you never have to force it to display the newest information. This is why Facebook is able to show new notifications without refreshing the page.
Hooks
Before hooks, it was normal to use class components for ‘smart’ functionality and functional components for presentation. The introduction of hooks in React 16.8 changed that.
These days, most React developers use functional components for practically everything. They are easier to write and useState, useEffect, useRef and other hooks allow you to implement dynamic features in functional components.
You can also create your own hooks to easily implement dynamic features in React.
Overall, you need to learn how to use hooks to get the best React has to offer.
Summary
React is an innovative library that effectively uses novel concepts and ideas to deliver consistent performance and fast speed. In this article, we learned about common design patterns in React. Being aware of these will help you build interactive applications that work like a charm.
Top comments (0)