PropTypes

PropTypes is a validator in React that checks the type and specifies the value of a property. It displays a warning in the console for invalid data.

JSX

JSX is an acronym for JavaScript XML. It is a syntax extension of JavaScript that allows developers to include HTML in React JS. While it may look like HTML, it is actually transformed into JavaScript. This is a unique feature of React JS.

State vs Props

React JS has two important attributes: state and props. The state is utilized to hold and manage data, while Props are used to pass data. It's important to note that state data is only usable within the same component, whereas props can pass data from a parent to a child component.

Component lifecycle

React components have a lifecycle that goes through three phases: create, read, update, and delete. These phases correspond to the CRUD operations, which are implemented in databases or RESTful APIs through HTTP methods.

• Mounting: Mounting is a process of adding elements to the Document Object Model (DOM).
• Updating: When any changes are made to the components, the system re-renders the changes.
• Unmounting: When the components finish rendering, they are removed from the DOM.

Hooks

Hooks in React allow developers to use state and other features without writing a class. They are made of pure JavaScript code, making it easier to write DRY code.

• useState
• useEffect
• useRef
• useContext
• useReducer
• useMemo
• useCallback

Custom hook

A custom hook is a JavaScript function created by a developer to perform specific tasks based on their requirements. It enables them to write DRY (+) code, making their workflow more efficient. While React Hooks are built-in and provided by React, custom hooks are created by developers themselves.

Context API

JavaScript is a language that runs on a single thread and is asynchronous. This means that in React, data can only be sent from parent to child. However, when we need to send data from several layers down (4-5 or more), it can be difficult and disorganized to send data through props. To solve this problem, we can use the Context API. The Context API is a component that uses React's useContext hook and wraps every component, acting as a parent to the other components. This makes it easy to send data to any component without having to use props drilling.