If you'd prefer a video with animated examples, you can check out the video that I made on this topic on my YouTube channel:
React uses a virtual DOM to track changes in the document object model, and only updates the changed parts in the real DOM. It supports both client-side and server-side rendering and it uses unidirectional data flow with props. We can create composable or reusable UI elements with it.
React component with JSX:
An Element is a plain object describing DOM nodes or other components. They describe what you want to render in the browser. Elements can contain other Elements in their props. Creating a React element is cheap. After its creation, it is never mutated.
A component on the other hand can be declared in several different ways. It can be an ES6 class with a render method or a simple function. Components can have an inner state unlike elements.In both cases it takes its input object called props and returns a JSX tree.
We can create components using functions or ES6 classes. If we choose to use the ES6 class approach we need to extend the Component or PureComponent classes provided by React.
The other approach, which is getting more and more popular, is to create a component by using a function. We can create it with the function keyword or by creating a function expression, even with arrow functions.
The short answer is if you are using a fresh version of React, it is up to you. However before the release of version 16.8, if your component needed state or you wanted to do something in a specific life cycle of the component you had to use class based components. Hooks came with version 16.8 and they started to conquer the world at a fast pace. Now you can do everything using hooks, no need for class based components.
A React component is considered pure if it renders the same output for the same state and props. If we declare Pure components, React will only re-render the component when the state or the props change, which results in rendering and performance boost.
When using class based components we can create Pure components by extending the PureComponent class instead of the Component. This way React will implement the shouldComponentUpdate lifecycle method, and will do a shallow comparison of the props and state to determine if it should re-render.
The state is private data of the component, which can change during its lifetime. If the state of the component changes the component re-renders.
While using class based components, state is represented by an object, and we can modify it with the setState method.
In functional components we can use the useState Hook. It gives back 2 variables in an array, the first one is the stateful data and the second one is the setter for it. We can set the default state, by providing it in the useState function call.
Props are input data to components, they can be primitive values or objects. They are unidirectional, which means props can only be passed down from parent to child. Props are passed to components on creation. We can provide them in JSX with a naming convention similar to HTML tag attributes. The child components receive all the provided props in the props object. In class based components we can reach them in this.props, in functional components they are passed as parameters, and we can extract them from there.
By directly modifying the state, the component won’t be aware of the state change, and therefore won’t re-render. We should use the setState method instead, it schedules an update to a component's state object, and when the state changes the component will re-render.
🚨 Bad way of updating state, directly:
✅ Setting state asynchronously:
The setState method is asynchronous, and the callback we provide in the arguments gets invoked when the state modification is done and the component gets re-rendered. It is used to make any post-modification changes, but we should use the componentDidUpdate lifecycle method instead.
In HTML, event names are all lowercase by convention, but in React, more precisely in JSX, event names are written in camelCase. Also note that the callback function is provided between doublequotes in HTML, but within curly braces in React.
In HTML, false can be returned to prevent default behavior, whereas in React preventDefault has to be called explicitly.
The last difference is that in HTML, the callback function has to be called, so you have to write the parentheses at the end, while in react we only pass the reference of the callback function.
You can pass an arrow function which returns the desired function call with the parameters provided.
Or you can achieve the same behavior by calling the bind method on the passed callback function. The first value is the desired ‘this’ value, but starting from the second parameter, all further parameters will be passed to the function.
SyntheticEvent is a cross-browser wrapper around the browser's native event. It's API is the same as the browser's native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers.
You can use inline conditional expressions to conditionally render React components or elements. You can use the ternary operator, which is a simplified if else statement that always returns a value. If you choose this approach, you need to provide the condition first, then after a question mark you have to provide what should be returned when the condition evaluates to true, and you can define what should be returned otherwise after a colon.
If you don’t need the else branch of the if statement you can use the short circuit evaluation of the AND operator. If the left side of the AND operator evaluates to true it returns its left side operand. We can use this behavior if we want to render something when a specific condition is true and we don’t want to render anything if the condition evaluates to false.
When we render multiple components based on arrays, we use key props. Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity.The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys.When you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort. You shouldn’t use indexes for keys if the order of items may change.
List with keys:
I create education content covering web-development on several platforms, feel free to 👀 check them out.
I also create a newsletter where I share the week's or 2 week's educational content that I created. No bull💩 just educational content.