React.js,PropTypes,State-props,JSX,Hooks,custom hooks…

#react #javascript #html #css

React.js,PropTypes,State-props,JSX,Hooks,custom hooks…

There are currently a number of web development frameworks in react.js.React is a free and open-source front-end JavaScript library [3] that builds user interfaces based on UI elements.It is invented by Meta (formerly Facebook) in 2013 .React is currently managed by Facebook's developers.React can be used as a base in the development of single-page or mobile applications.React depend on state management and rendering that state to the DOM.If a beginner wants to create a website with React, I will discuss about the issues that need to be known.

PropTypes: React props, which stands for “properties,” are used to send data from one component to another.React has an internal mechanism for props validation called PropTypes.Props and PropTypes are important processes because they work pass only readable features in the feedback elements.
Benefits of PropTypes : PropTypes makes it easy to catch bugs caused by passing data of data type .

State-props: Props are short for properties. Props are used to pass data between React components. Mainly react data flow between components is unidirectional . It can pass data from upper level to lower level.React maintains inheritance

Here data is being passed from the previous component to the following component through props.
State allows elements to create and manage their own data.State on the other hand is still a variable, but directly initialized and managed by the component.

JSX: JSX stands for JavaScript XML.HTML can be written or added to React via JSX.JSX can easily convert HTML tags by responding to elements.It's faster than regular JavaScript.

Here

, ,

these are all HTML tags used in React in JSX.

Hooks: Hooks are backwards-compatible,which means it does not contain any breaking changes. This page provides an overview of Hooks for experienced React users. This is a fast-paced overview.

Here, useState,useEffect are basic hooks.usestate use to declare a state in React app. UseEffect allows us to perform side effects in the function components.
**custom hooks: **A custom hook is a JavaScript function whose name starts with "use" and it can call another hook. When using react, the user can make hook calls for his work needs.
In this picture usecart is a custom hook.This hook I used to calculate the price of the product