DEV Community: fardinh136

CRUD Operations discussion.

fardinh136 — Thu, 23 Dec 2021 17:22:18 +0000

CRUD stands for Create, Read, Update, and Delete. These are the four most basic operations that can be performed with most traditional database systems and they are the backbone for interacting with any database. CRUD is also sometimes used to describe user interface conventions that facilitate viewing, searching, and changing information using computer-based forms and reports. Many HTTP services also model CRUD operations through REST or REST-like APIs.
For example: to get the product whose ID is 30, the client sends a GET request for http://hostname/api/products/30

The ability to create, read, update and delete items in a web application is crucial to most full-stack projects. For example, if we're creating a store front, blog posting page, to-do list or social media clone, without CRUD actions we'll get stuck very quickly.
A customer may use CRUD to create an account and access that account when returning to a particular site. The user may then update personal data or change billing information. On the other hand, an operations manager might create product records, then call them when needed or modify line items.

Component Life Cycle discussion.

fardinh136 — Wed, 22 Dec 2021 16:40:08 +0000

 Components are created, then grows by updating, and then die. This is referred to as a component lifecycle. There are different lifecycle methods that React provides at different phases of a component's life.
Lifecycle methods are special methods built-in to React, used to operate on components throughout their duration in the DOM. For example, when the component mounts, renders, updates, or unmounts. The most important lifecycle method is the render method.
Every React Component has a lifecycle of its own, lifecycle of a component can be defined as the series of methods that are invoked in different stages of the component's existence.
The componentWillMount() method is the first to be called. It's invoked once and immediately before the initial rendering occurs, hence before React inserts the component into the DOM.
So lifecycle can be handy sometimes when we don't want React to render our state or prop changes. Anytime setState() is called, the component re-renders by default. The shouldComponentUpdate() method is used to let React know if a component is not affected by the state and prop changes.

JSX Discussion.

fardinh136 — Wed, 22 Dec 2021 16:37:09 +0000

 JSX stands for JavaScript XML. It is simply a syntax extension of JavaScript. It allows us to directly write HTML in React (within JavaScript code). Instead of separating the markup and logic in separated files, react uses components for this purpose.
So basically JSX is a statically-typed, object-oriented programming language designed to run on modern web browsers.
The quality of applications becomes higher when being developed using JSX, since many errors will be caught during the compilation process.
Hypertext Markup Language (HTML) is the standard language for documents that determine the structure of a web page. JSX, on the other hand was created as a syntactic sugar for React.

state and props in JavaScript.

fardinh136 — Wed, 22 Dec 2021 16:33:36 +0000

 Props are used to pass data. Props are used to pass data from parent to child or by the component itself. They are immutable and thus will not be changed. Data from props is read-only, and cannot be modified by a component that is receiving it from outside.
But State is used for mutable data, or data that will change. State is for managing data. State data can be modified by its own component, but is private so it cannot be accessed from outside the box.

PropTypes in JavaScript.

fardinh136 — Wed, 22 Dec 2021 16:31:24 +0000

PropTypes exports a range of validators that can be used to make sure the data we receive is valid. PropTypes are a mechanism to ensure that components use the correct data type and pass the right data, and that components use the right type of props, and that receiving components receive the right type of props.