DEV Community: shanjidasultana

Backend Topics

shanjidasultana — Thu, 23 Dec 2021 10:15:37 +0000

1 . CRUD Operations : CRUD operations is backend database management system

which helps to create ,read , update and delete documents .
Create Operations: It is a creating or inserting method . It means when collection doesn’t

exists this insert operations will add or create new documents to the collection . In MongoDB

creating operations may follow this way :
db.collection.insertOne () [ It is use for inserting one new document to collections ]
db.collection.insertMany () [ It is use for inserting many new documents to collections ]
One inserting document code is here to see :
db.products.insertOne (
{
name : “ Bag ”,
price : “ 22 “ ,
rating : “ 4 ”
}
)

Read Operations: It is a query method of document collection . It finds out our searching

collections from mongoDB may or from other databases . We can search data from one or

more data from the database by using these read operations . That means it can easily

specify criteria and filter them then return these documents .
db.collection.findOne ( query things are here ) [ It is use for finding one document from collections ]
db.collection.find ([ ]) [ It is use for finding many documents from collections ]
One example is here :
db. products. find (
{ price : { $ price : 15} },
{ name : 2 }
) .limit ( 6 )

Read operations follow different query methods for searching our needs . Like
Can query one document from a database based on specific identification .
It also finds an array and returns lots of documents .
Query on Embedded or Nested documents.
Query an Array of Embedded documents.

Update Operations: Update is a operation of modify existing data documents in database
collection . It mostly like read operation because it also follow the query or specify
criteria for updating data .
For an example :
db.collection.updateOne ( query things are here ) [ It is use for updating one document from collections ]
db.collection.updateMany ([ ]) [ It is use for finding many documents from collections ]
Example :
db.products.updateMany(
{ price : { $ price :23 }} ;
{ $ set : { name : “ shoes ”}}
)

Delete Operations: It is a deleting operation it means it remove document from database
permanently . It also use the criteria of specify and filtering method for exact identifying the
document in collection . Delete operation remove data in this way :
db.collection.DeleteOne ( query things are here ) [ It is use for deleting one document from collections ]
db.collection.deleteMany ([ ]) [ It is use for deleting many documents from collections ]
db .products.deleteMany (
{ name : “ shoes”} ,
)

2. JWT : It’s full form is JSON Web Tokens . It is an internet process for securing data or information between two parties. It holds encoded JSON objects and signs using cryptographic algorithms . It helps to validate the sender’s identification and is made up of three parts which are separated by dots ( . ) and also using base64 . In decoding we will get two JSON string :
Header and payload . [ Headers contain the type of token like JWT in the case and singing algritom and payload contains the claim ]
Signature . [ It ensures that the token hasn;t been altered ]

3.Mongoose: Mongoose is an object Data Modeling library for MomgoDB and Node.js.It manages Data ,previous schema validation,and is used to translate between objects in code and the representation of those objects in MongoDB.MongoDb is schema -less Nosql document database.It means one can store JSON documents in it.The main reason of using Nosql is that it speeds up application development and reduces the complexity of developments.

Ex- {
”Id”:1,
“email”:”JhonDoe@gmail.com”,
“phone”:2125444447
}
{
”Id”:2,
“email”:”AlisaDoe@gmail.com”,
“phone”:21277444
}
{
”Id”:3,
“email”:”ElexaDoe@gmail.com”,
“Phone”:245557
}

Benefits of using Mongoose: They are-
Schemas: Mongoose defines a schema for data models so the documents follow a specific structure with predefined data types.

Validation: Mongoose has built-in validation for schema definitions.It saves us from writing a bunch of validation code that we have to write with the MongoDB driver.

Instance Method: It provides optional pre and post save operations for data models.It is easy to define hooks and custom functionality on reads and writes.It also organizes methods within schema definition.

Returning result: Mongoose makes it easier to return updated documents or query results.

4.Express js: Express is a minimal and flexible Node js web application framework that provides a set of features to develop web and mobile applications.It designed for building single-page,multi-page and hybrid web applications.It is the back end component of MERN stack which includes MongoDB for database and Node js for Javascript runtime environment.It makes it easier to organize our application’s functionality with middleware and routing.It also adds helpful utilities to Node js’s HTTP objects.It facilities the rendering of dynamic HTTP objects.It is an open source software distributed under the MIT license, which generally means that it’s free to develop and use.

React topics

shanjidasultana — Wed, 22 Dec 2021 07:00:06 +0000

Hooks:

Hooks are a new addition in react.Hooks can be used in a few components without rewriting any existing code.They don’t replace the knowledge of react concepts.Even hooks provides more direct API to the react concepts are props,state,context,refs,life cycles etc.Hooks are always utilized in a useState and other react features without writing a class.Some of the hooks are–

useState: The state is bound to change at the same point.This could be the value of the variable.,an object or any types of data that exists in the component.For this we have to use a react hook called useState.It can be used once or many times.

useEffect: Another hook is useEffect. It carries out an effect in each every time there is a state change.UseEffects are used when we need to reach into the outside world.Such as fetching data from an API or working with the DOM.It accepts a callback functions which will runs every time after the first render by default.
useRef: Refs are a special attribute in react components.UseRef allows us to use react refs.When we want to interact directly with an element such as to clear its value or focus as with an input then we use the useRef hook.

useContext: In react we want to avoid the problems of creating multiple props to pass data two or more levels from a parent component.For this context is helpful for passing props down multiple levels of child components from a parent component and sharing data across our app.This hook removes the unusual looking render props pattern that was required in consuming react context before.
useReducer: It is a hook for state management like useState and confines upon a kind of function called a reducer.Reducers are simple and pure functions that take a previous object and an action object and return a new state object.

Custom Hooks: When we want to share logic between two javascript functions we extract it to a third function.Javascript function which is created for not rewriting the same code again is a custom hook .A custom hook is javascript functions whose name starts with “use” and that may call other hooks.It a mechanism to reuse stateful logic.Sometimes in our project we need to write a certain part of code again and again but using custom hooks we can make it easily .By creating custom hooks we can make it . Same code can be reused without typing it again . That means when we want to share the same logic between other javascript functions we can make a custom hook. Usually reusable codes are written in hooks and it is a separate function . Some official documentations rules are here which we need to follow for making hook :
Never call hooks from inside a loop,condition or nested function.
Only call hooks from react components.
Never call a hook from a regular function.
First of all component names should be started with small letter keyword use .
It is same as creating function js
It may call other hooks.
An example like useFriendStatus .
Function useFriendStatus ( friendId) {
Const [ isOnline ,setIsonline ] =useState( null)
return isOnline
}

JSX: Fundamentally JSX just provides syntactic sugar for the React.vreateElement(component,props,...children) function.JSX defines Javascript Syntax Extension.It allows writing expression in {}.To insert a lerge block of HTML we have to write it in a parenthesis (). It stands for javascript XML which can be used to write HTML or XML like text code .It provides you to write and add HTML/XML in the same file where you write javascript code and then the preprocessor will transform these expression into javascript code.Jsx is not valid javascript browser can’t understand it directly for this we need a transpiler like babel, typescript to compile JSX into a browser compatible version.

4 . React Virtual DOM and Diffing Algorithm : DOM is a rendering method by browser of a web page . But its manipulation system is very slow so for these there comes new changes which solve this problem and that virtual dom . It is just like a copy of the original dom which is kept in memory and it also has the same property as a real dom . It means it can easily handle updates because when we make updates and make any changes in virtual dom react components first compares it to the snapshot of virtual dom which was taken before the update and then it replaces the original DOM nodes with the Update node .In For processing there use one algorithm which is known as diff algorithm .

Here react compares the update of a new virtual dom to pre-update virtual dom and identify the update and then update the changes to the real DOM . But sometimes we change some dom elements but at this time also it will re-render all the components which were not changed . So for solving this, react has key attributes which solve this problem because using a key in children helps to identify the changes of pre-updated virtual DOM and marks the new one and add it to the real DOM . It decreases extra re-render of unchanged components . One more thing these keys should be different in sibling components .

5 . React Components Lifecycle : Every Component has a lifecycle but in coding we can override it . Let’s see some of these :

componentDidMount : It is only executed only after first rendered on the client side . It is usually used in functions which delay in execution and also in javascript integration frameworks .

componentWillMount : componentWillMount a component lifecycle which is executed before rendering client and server side .

componentWillUpdate : It is that type component lifecycle which is called before rendering .

componentWillReceiveProps: componentWillReceiveProps is a method which invokes props as soon as possible before another render is called .

shouldComponentUpdate : shouldComponentUpdate is a component lifecycle which helps to return true and false values but it will always return true by default .

componentDidUpdate : It is that type component lifecycle which is called after rendering .

componentWillUnmount : After component unmounted from dom is called .