React concepts you should know
--
Some essential React knowledge you need to master to become a professional developer:
- React Fragment
React Fragments are React components that are used to return multiple children nodes without using an extra DOM node.
Example: Without Fragment
In this example, an extra useless <div> DOM node is being used to return children.
Example: With Fragment
No additional DOM node is used and, it returns the children node.
2. Lists:
Lists are mainly used for displaying menus on a website. In regular Javascript, we can use arrays for creating lists. We can create lists in React in a similar manner as we do in regular JavaScript.
We can traverse and update any list in regular JavaScript. We can use the map() function in JavaScript for traversing the lists.
Example:
3. Keys:
A “key” is a special string attribute we need to include when creating lists of elements in React. Keys are essential for React because, without the key, we’re unable to keep track of each element that is being traversed with the map().
Example:
4. What is Higher Order Component:
HOC is a pattern where a function takes a component as an argument and returns a new component. HOC is used to share common functionality between components. HOC is actually not a component, it is a function. It transforms a component into another component and adds additional data or functionality.
Example:
const NewComponent = (BaseComponent) => {
// ... create new component from old one and update
return UpdatedComponent
}5. Keep Component small:
Small React components are easier to understand, test, and maintain. The exact size will depend upon many different factors, but in general, it is a good practice to keep it simpler. Don’t worry how big your project is, divide the website into smaller parts, and write components for them.
6. Use the React and Redux dev tools
The React dev tools let you inspect the rendered tree of React elements, which is incredibly useful for seeing how things actually look in the browser. The Redux dev tools are even more impressive, which lets you see every action that has happened, the state changes that they caused. You can add it either as a dev dependency or as a browser extension.
7. Why refs are needed:
Refs are a function to access the DOM element and the React element that you might have created on your own. They are used if we want to change the value of a child component, without making use of props and all. They can also be used to add callback functions inside them.
8. Component Lifecycle methods:
- componentWillMount is executed before rendering, on both the server and the client-side.
- componentDidMount is executed after the first render only on the client-side. This is where DOM or state updates should occur.
- componentWillReceiveProps is invoked as soon as the props are updated before another render is called.
- shouldComponentUpdate returns a true or false value. This will determine if the component will be updated or not. This is set to true by default. If you are sure that the component doesn’t need to render after state or props are updated, you can return a false value.
- componentWillUpdate is called just before rendering.
- componentDidUpdate is called just after rendering.
- componentWillUnmount is called after the component is unmounted from the dom.
9. Web accessibility:
The Web is an increasingly important resource in many aspects of life. It is essential that the Web should be accessible in order to provide equal access and equal opportunity to people with diverse abilities.
Accessibility of a web component is the assumption that the component is available and usable to all.
10. ARIA
Accessible Rich Internet Applications (ARIA) is a set of attributes that define ways to make Web content and Web applications more accessible for users with disabilities. There is a large set of built-in HTML attributes to define ‘roles’ for an element, to provide more information to users using assistive technology or providing nice ways to split a page up.
