Let's Explore React

Md Tanber — Thu, 23 Jun 2022 10:01:57 +0000

First of all React is one of the best javascript framework. It gives the best-rendering performance, clean code, rich user interface, etc. React build single-page applications. Now lets learn some react topics.

PropTypes: propTypes means in the component we can write what type of props is this. As a data type is a string, number, boolean, or anything we can pass these props types.

What is the difference between State-props:
Props only send the value. It is read-only. can not change the value by props. And we can send anything like hardcoded value, dynamic value, object, function.

State
Props
State can get initial value from parent component
Props also can get initial values from the parent component.
State can not change by parent component
Props can be changed by parent component
State can set default value in the component.
Props also can set default values in components.
State cab change inside the component
Props can not be changed inside component.
State can not be changed in child component
Props can be changed in the child component.

Explain the Component Lifecycle.

=> Lifecycle method happened three ways
Mounting: In mounting, we maintain some order. These are
contractor()
Static getDerivedStateFromPorps()
render()
componentDivMount()

Updating: In updating also maintain some orders. there are
Static getDerivedStateFromPorps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDivUpdate()

Unmounting: when the component deletes from the DOM. Then it is called
componentWllUnmount()

What is hooks in react? Hooks is create a connection with our application to react. We use some hooks: useState: this hook is used to update any value. if anything changes or needs to update In the application useState hooks can update this. useEffect: by this hook, we can load data or fetch data in UI. it’s also like an impure function.if Loaded data is not loaded from the server it can not be rendered.
There are more hooks like this that are building a connection with code and rendering in UI.

Virtual DOM and diffing- algorithm? Virtual DOM: virtual DOM is most like real DOM.in real DOM we trigger any element by methods like getElementById or getElementByClassName and then change the code. Sometimes if needed to change somewhere then all structures should be changed this was very time-consuming and most difficult. But now VIrtual DOM is made our life easier. In virtual DOM initially set a DOM. when we change code then automatically create a new DOM and compare the previous DOM and then update the DOM.this this is created a Tree which is rendered from the root and his parent is app.js. All component is stored in app.js and finally rendered in UI by root. This tree most looks like real DOM. All processes are happened by diff algorithms. It means when anything changes in code then it is compared with virtual DOM and then they create a Diff algorithm. and then reference change or update in UI.

#mongoose #blog

Md Tanber — Fri, 15 Apr 2022 12:09:16 +0000

Mongoose is a Node. js-based Object Data Modelling (ODM) library for MongoDB. Currently, I am learning mongoose because I found some advantages in it. The Mongoose module is one of the most powerful external modules of NodeJS. Mongoose is used to translate the code and its representation from MongoDB to the Node.js server. Collection validation of the MongoDB database can be done easily. In mongoose, a predefined Structure can be
implemented on the collection. Constraints can be applied to documents of collections using Mongoose. Mongoose module built on the top of MongoDB driver and provides an easy abstraction of the query and defines a query. The Mongoose module provides several functions in order to manipulate the documents of the collection of the MongoDB database.
These are the reasons why I’m learning Mongoose for databases. We can use Mongoose for our team project. Because MongoDB allows us to add our team members via invitation. Which we can find in our MongoDB profile and by accepting that each team member can use the database. There are different kinds of roles.

DEV Community: Md Tanber

Let's Explore React

#mongoose #blog