Topic - 1: React PropTypes
Props and PropTypes are two most important concepts in React. Props are used to pass read only data from parent component to child component. If we pass any wrong data as props, it can lead to bugs and unexpected errors in our application. So we should check the prop type to avoid these kinds of bugs. But JavaScript does not provide any built-in type checking facility. That's why many developers use TypeScript for type checking. But React has a built-in props type validation mechanism which is called propTypes.
Before React version 15.5.0 propTypes was a part of the React package. But in the later version of React, we need to add a dependency called prop-types to use PropTypes.
Topic - 2: JSX
JSX stands for JavaScript syntax extension. It’s a syntax extension to JavaScript that helps us to write HTML code in JavaScript. Instead of putting JavaScript into HTML, JSX allows us to put HTML in JavaScript.
If a JavaScript contains JSX, that file needs to be translated into regular JavaScript before the file gets to the browser. So before sending the code to the browser, a transpiler like Babel will translate the HTML code into regular JavaScript code.
Topic - 3: Component Life Cycle
Every React component goes through a cycle of life. Lifecycle of a component are some series of methods that are invoked in different stages of the component’s life. A React component goes through three stages of its life -
Mount : Creation or birth of a component.
Update : Change or growth of a component.
Un-mount : Removed or death of a component.
Topic - 4: React Hooks
Hooks are a new feature introduced in React 16.8. It allows us to use state and other React features in a functional component, which was not possible before React 16.8. Hooks are actually some functions that are hooked into React features like state and lifecycle methods. Hooks cannot be used in class components.
Topic - 5: React Virtual DOM
A virtual DOM is a representation or copy of a real DOM. For every DOM object React creates a virtual DOM. So, whenever we make any changes to the code, React will compare the virtual DOM with the Real DOM and it will re-render only the modified DOM element.
Top comments (0)