Overview: Today in this article we are going to know about some core features of React
PropTypes
PropTypes is a library that helps in finding the error in props. Like if we need to send data to the other component in the string, but if we accidentally send the data in number then we will not get the output that we are expecting and it will be tough to identify the problem we were made but by using this propTypes library we will get the error if we send string except number. In propTypes we can set the types of the prop just like this
import PropTypes from "prop-types";
function DisplayData ({name, age}){
return Hello there this is ${name} and my age is ${age}
}
DisplayData.propTypes = {
name: PropTypes.string, // here the type can be a number , boolean,string, func, object, array symbol
age: PropTypes.number
}
// by doing this if we send data in name and age in different type than if will console an error . we can also add isRequired so that if we use the prop in anywhere but the data is not send via prop then it will console an error we can use this like that
name: PropTypes.string.isRequired,
// we can also check the node, elemet etc here
State-props
The state is used for managing data we can keep our data in the state we can update the data or modify the data, and the state is internal and is controlled by itself. States control the internal data changes. In react we can use or make a state in functional component using the useState hook. Props are used to send data from one component to another component. Props are external and controlled by anything that renders the component. we can’t modify the props it is only readable which means we can only read it we can’t make any change to it.
import React, { useState } from 'react';
const FunctionalComponent = (props) => {
const [texts, setTexts] = useState('');
return (
hello there {props.name}
)
}
// this is the way to make a state in functyional component
// and we can use the props like that. and it should be send the data from another component otherwise we cant get the value
// this is the way to make a state in functyional component
JSX
The full form of JSX is Javascript XML. It allows us to write the HTML directly but it’s not HTML. It looks like HTML and gets transformed to Javascript using Babel.JSX makes the development and debugging process very easy and handy. Here is an example how we can write JSX in our react app.
import React from 'react';
const Home = () => {
return (
Hello world
Hello There This is an peragraph tag
)
}
// This is JSX its look like HTML but its not HTML it will be transfromed to this via babel
React.createElement("div", null, /#PURE/React.createElement("h1", null, "Hello world"), /#PURE/React.createElement("p", null, "Hello There This is an peragraph tag"));
Component Lifecycle
The lifecycle of a react component means the groups of methods that are invoked in a different stage of the component’s existence. Each component in React has a lifecycle that goes through three main phases Mounting, Updating, and Unmounting. When the components are mounted on the DOM (birth). They grow by updating and then unmount on DOM (death) this is the React component lifecycle.
Hooks
Hooks allow us to make a hook with the react state, lifecycle features using the functional component. React functional components allow us to use the hooks because the Class components are no longer needed and the hooks replace the class component. There are multiple hooks available in react library such as useState, useEffect, useReducer, useRef, useContext, useMemo, useCallbeck, etc. We can also make our own hooks to reuse our code. The most used hooks are useState by using this we can manage our state in a component used can also share the state using props. useEffect this hook is used for making or doing the side effects in a component,
custom hooks
Custom hooks are just a Javascript function created to reuse the stateful logic. We can create multiple custom hooks for our components to reuse them
import React, { useState, useEffect } from 'react';
export const useData = () => {
const [allData, setALlData] = useState([]);
useEffect(() => {
fetch('https://heroku/amateur-pgotograpger')
.then(response => response.json())
.then(data => setALlData(data))
}, []);
return {
allData,
setALlData
}
}
//this is an example of custom hook we can make multiple of hooks like that to reuse them in our multiple componenets
context API
Context API provides a way to pass data through components without doing the prop drilling. It allows us to make global variables, and we can call them or use them where we want using use context. In react component state if we want to share the state we can only share the state from parent to the child or if we want to share the state in multiple components then we have to do the lifting the state up and we have to send the data using the prop dilling which is not good for our web app. But using the context API we don’t need to do the prop dilling to pass data we can call the state using the context API hook use context then we can use the state. To create a context API
we need the createContext hook and to use that we need useContext.
Virtual DOM and diffing- algorithm
A virtual DOM is a lightweight Javascript representation of the real DOM. It has the same properties as real DOM. But the real DOM manipulating is slow whereas the virtual DOM manipulating is much faster than that Because by using the virtual DOM, we can find out what is changed and with that, we can apply only those changes to real DOM instead of replacing the entire DOM. And the diff algorithm compares two sequences and finds out the changes after that it updates the real DOM.
Top comments (0)