DEV Community: Joy Dey

CRUD

Joy Dey — Wed, 22 Dec 2021 17:16:58 +0000

CRUD is a short form of Create, Read, Update and Delete. These are the basic operations to perform with the database system. To interact with a database, we used crud operations. CRUD is used for anything related to databases and database systems. Software, Web Development can not be imagined without these operations nowadays. The CRUD also appears in the discussion of REST APIs. In HTTP, the GET, PUT and DELETE methods are crud operations as they can manipulate the states of target resources. For Database, we are showing this operation with MongoDB, which is a NoSQL database system.

Create Operation

Create or insert operations add new documents to a collection. If the collection does not exist, insert operations will create a new collection in the database.
MongoDB provides some methods to insert data in the database

db.collection.insertOne() New in version 3.2
db.collection.insertMany() New in version 3.2

Read Operation

Read operations retrieve data from the collection of databases. The query is a collection of documents.
There are some methods that we can use to read or find the data from the database

db.collection.find()

Update Operation

Update operations updates or modify existing data from the data collections. We use some update methods to update or modify data the content in the database.

db.collection.updateOne() New in version 3.2
db.collection.updateMany() New in version 3.2
db.collection.replaceOne() New in version 3.2

Delete Operation

Delete operations remove or delete data from the data collections. The methods of delete operation in nosql are -

db.collection.deleteOne() New in version 3.2
db.collection.deleteMany() New in version 3.2

React Life Cycle - Mounting

Joy Dey — Tue, 21 Dec 2021 17:23:26 +0000

React a lifecycle is an event that is used to operate components throughout the duration of the Document Object Model. It has mainly three phases -

Mounting - It means putting elements on the dom.
Updating - Whenever the components state and props are changed, the component updated
Unmounting - When a component is removed from the dom, then this lifecycle method happens

Today we are discussing the mounting phase.

Mounting
In mounting, there are some built-in methods called. they are-

1. constructor() - when the component is initiated, The constructor method is called before anything else. In this method, props are passed as an argument. To inherit methods from its parent, we should call super(props) before anything else.

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  render() {
    return (
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
    );
  }
}

2. render()- render method outputs the HTML to the Browser DOM.

class Header extends React.Component {
  render() {
    return (
      <h1>This is the content of the Header component</h1>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

3. componentDidMount() - The componentDidMount method is called after the component is rendered.

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({favoritecolor: "yellow"})
    }, 1000)
  }
  render() {
    return (
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));