Backend basics

Zannatul Fahmida — Thu, 23 Dec 2021 15:36:06 +0000

CRUD operations: CRUD operations are to create, read, update, and delete documents.
Create or insert operations add new documents to a collection. If the collection does not currently exist, insert operations will create the collection. Create or insert operations uses the POST method.

The read function is similar to a search function. It allows users to search and retrieve specific records in the table and read their values. Users may be able to find desired records using keywords, or by filtering the data based on customized criteria. Read function uses the GET method.
The update function is used to modify existing records that exist in the database. To fully change a record, users may have to modify information in multiple fields. Update function uses the PUT method.
The delete function allows users to remove records from a database that is no longer needed. Delete function uses the DELETE method.

JWT: JWT full form is JSON Web Token. It is an industry standard RFC 7519 method which secures two parties. It guarantees data ownership but not encryption.
JWT is a useful technology for API authentication and server-to-server authorization. JWT claims to be encoded as a JSON object that is digitally signed using JSON Web Signature (JWS) and/or encrypted using JSON Web Encryption (JWE). JWT can be used between two parties to exchange information. JWT is digitally-signed and can be used in a secure public/private key pair. Information is verified using the public key on the other end. JWT can contain user information in the payload and can be used in the session to authenticate the user. Once authenticated, users can access protected resources in an application using the JWT included in the request. So, every request will be authenticated by verifying the JWT.

Mongoose: Mongoose is an Object Data Modeling (ODM) library for MongoDB and Node.js. It manages relationships between data, provides schema validation, and is used to translate between objects in code and the representation of those objects in MongoDB.
MongoDB is a schema-less NoSQL document database. It can store JSON documents in it, and the structure of these documents can vary as it is not enforced like SQL databases. This is one of the advantages of using NoSQL as it speeds up application development and reduces the complexity of deployments. A huge benefit of using a NoSQL database like MongoDB is that it is constrained to a rigid data model. Add or remove fields, nest data multiple layers deep, and have a truly flexible data model that meets our needs today and can adapt to our ever-changing needs. But being too flexible can also be a challenge. If there is no consensus on what the data model should look like, and every document in a collection contains vastly different fields, then it will have a bad time.
A schema defines document properties through an object where the key name corresponds to the property name in the collection. While Mongo is schema-less, SQL defines a schema via the table definition. A Mongoose schema is a document data structure that is enforced via the application layer. A schema definition should be simple, but its complexity is usually based on application requirements. Schemas can be reused and they can contain several child-schemas too. In the example above, the value of the email property is a simple value type. However, it can also be an object type with additional properties on it.
MongoDB Schema Validation makes it possible to easily enforce a schema against your MongoDB database, while maintaining a high degree of flexibility, giving you the best of both worlds. In the past, the only way to enforce a schema against a MongoDB collection was to do it at the application level using an ODM like Mongoose, but that posed significant challenges for developers.
Models are higher-order constructors that take a schema and create an instance of a document equivalent to records in a relational database.
A Mongoose model is a wrapper on the Mongoose schema. A Mongoose schema defines the structure of the document, default values, validators, etc., whereas a Mongoose model provides an interface to the database for creating, querying, updating, deleting records, etc.
Mongoose has a flexible API and provides many ways to accomplish a task. Most of the operations can be done in more than one way either syntactically or via the application architecture.

React Basics

Zannatul Fahmida — Wed, 22 Dec 2021 14:41:10 +0000

PropTypes: Props are used to pass information to any component. Prop-types are used to document the intended types of properties passed to components. React will check props passed to components against those definitions, and warn in development if they don’t match. The PropTypes utility exports a wide range of validators for configuring type definitions.
Below are the validators for the basic data types:
PropTypes.any: The prop can be of any data type.
PropTypes.bool: The prop should be a Boolean.
PropTypes.number: The prop should be a number.
PropTypes.string: The prop should be a string.
PropTypes.func: The prop should be a function.
PropTypes.array: The prop should be an array.
PropTypes.object: The prop should be an object.
PropTypes.symbol: The prop should be a symbol.

const isEmail = function (propValue, key, componentName, location, propFullName) {
    const regex = /^((([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,})))?$/;

    if (!regex.test(propValue[key])) {
        return new Error(`Invalid prop `${ propFullName }` passed to `${ componentName }`. Expected a valid email address.`);
    }
}

Component.propTypes = {
    emails: PropTypes.arrayOf(isEmail)
}

State-props: Props and state are both plain JavaScript objects. State is managed within the component like variables declared within a function. State allows components to create and manage their own data. Using state components cannot pass data but they can create and manage it internally.

import React, { useState } from 'react';
const AddPlants = () => {
    const [name, setName] = useState('');
    return (
        <div>
            <TextField
                sx={{ width: { xs: '100%', md: '50%' }, mb: 2 }}
                id="standard-basic1"
                label="Plant Name"
                name="name"
                onBlur={(e) => setName(e.target.value)}
                variant="standard"
            />
            <ul>
                <li>{name}</li>
            </ul>
        </div>
    )
}

Props are used to pass information to any component. React’s data flow between components is uni-directional which means it passes data from parent to child only. Data from props is read-only.

import React, { useState } from 'react';
const AddPlants = (props) => {
    const {name, id, price} = props.plants;
    return (
        <div>
            <ul>
                <li>{name}</li>
                <li>{id}</li>
                <li>{price}</li>
            </ul>
        </div>
    )
}

JSX: JSX full form is JavaScript XML. Using JSX we can write HTML in React. JSX makes it easy to write and add HTML in React. It converts HTML tags into react elements.

const myelement = <h1>React is times better with JSX</h1>;

Component Lifecycle: Each component has several “lifecycle methods” that we can override to run code at particular times in the process. A React Component can go through four stages of its life those are given below:
Mounting: Mounting is the stage of rendering the JSX returned by the render method itself. This method creates and inserts an instance of a component into the DOM.
Updating: Updating is the stage when the state of a component is updated and the application is repainted. This method happens when props or states are changed.
Unmounting: As the name suggests Unmounting is the final step of the component lifecycle where the component is removed from the page.
Error Handling: This method is called when there is an error during rendering, in a lifecycle method, or in the constructor of any child component.

Hooks: Hooks allow us to "hook" with react features. It can be called only inside react function components and at the top level of a component. It cannot be conditional. Some hooks are given below:
useState
useEffect
useContext
useReducer
useCallback
useMemo
useRef
useImperativeHandle
useLayoutEffect
useDebugValue

DEV Community: Zannatul Fahmida

Backend basics

React Basics