<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Showvro Roy</title>
    <description>The latest articles on DEV Community by Showvro Roy (@showvro).</description>
    <link>https://dev.to/showvro</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F779052%2Fadce6850-105c-4baa-8f34-538824200ed1.jpeg</url>
      <title>DEV Community: Showvro Roy</title>
      <link>https://dev.to/showvro</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/showvro"/>
    <language>en</language>
    <item>
      <title>Some Node-Mongo Concept Intermediate Exploration</title>
      <dc:creator>Showvro Roy</dc:creator>
      <pubDate>Thu, 23 Dec 2021 17:44:19 +0000</pubDate>
      <link>https://dev.to/showvro/some-node-mongo-concept-intermediate-exploration-5e7l</link>
      <guid>https://dev.to/showvro/some-node-mongo-concept-intermediate-exploration-5e7l</guid>
      <description>&lt;p&gt;&lt;strong&gt;JWT Token:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;JWT stands for JSON Web Token. We use this for securely transmitting information between parties. Though it is digitally signed that’s why it is more than secure and this information can be verified and trusted also.&lt;/p&gt;

&lt;p&gt;JWT authentication is a token-based stateless authentication mechanism. It is popularly used as a client-side-based stateless session, this means the server doesn’t have to completely rely on a database to save session information.&lt;br&gt;
There are three parts of the jwt token header, payload, and signature.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Header&lt;br&gt;
The header consists of two parts:&lt;br&gt;
The signing algorithm being used&lt;br&gt;
The type of token, which is in this case mostly “JWT”&lt;br&gt;
Example:&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;code&gt;{ "alg": "HS256", "typ": "JWT" }&lt;/code&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Payload&lt;br&gt;
The payload usually contains the claims and additional data like issuer, expiration time, and audience.&lt;/p&gt;

&lt;p&gt;Signature&lt;br&gt;
To create the signature part you have to take the encoded header, the encoded payload, a secret, the algorithm specified in the header, and sign that.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;CRUD operation:&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Create-Operation:&lt;br&gt;
In MongoDB when we can add new documents to a collection. If the collection does not exist, create operations also create the collection. We can insert one or many documents&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;code&gt;db.collection.insertOne()&lt;/code&gt;&lt;br&gt;
&lt;code&gt;db.collection.insertMany()&lt;/code&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Read Operation:&lt;br&gt;
Read operations retrieve documents from a collection; i.e. query a collection for documents. We can find the document using the read operation.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;code&gt;db.users.find({})&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;We can find multiple or single elements using the find operation.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Update Operations: &lt;br&gt;
By using update operation we can update any document or replace any. We use this operation in MongoDB to update&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;code&gt;db.collection.updateOne()&lt;/code&gt;&lt;br&gt;
&lt;code&gt;db.collection.updateMany()&lt;/code&gt;&lt;br&gt;
&lt;code&gt;db.collection.replaceOne()&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Delete Operation:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;When we need to delete any document from the database we use delete operation to delete that element.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;db.collection.deleteOne()&lt;/code&gt;&lt;br&gt;
&lt;code&gt;db.collection.deleteMany()&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Node js: Node.js is an open-source server environment. It is free and it runs on different browsers. It is also javascript.it uses asynchronous programming. It creates dynamic page content.&lt;/p&gt;

&lt;p&gt;Explore Express: &lt;br&gt;
Express.js is an open-source web application framework&lt;br&gt;
We can build a web application quickly and easily. Express js uses javascript that’s why it’s become easier for programmers and developers to build web applications. It is important to learn javascript and HTML to be able to use Express.js.&lt;br&gt;
Express.js supports javascript which is a widely used language that is very easy to learn and is also supported everywhere.&lt;br&gt;
Features of Express.js:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Faster Server side development, 2. Middleware, 3.Routing, 4. Templating, 5. Debugging&lt;/li&gt;
&lt;/ol&gt;

</description>
      <category>node</category>
      <category>mongodb</category>
      <category>javascript</category>
      <category>react</category>
    </item>
    <item>
      <title>Intermediate Exploration of some React library concepts</title>
      <dc:creator>Showvro Roy</dc:creator>
      <pubDate>Wed, 22 Dec 2021 17:19:25 +0000</pubDate>
      <link>https://dev.to/showvro/intermediate-exploration-of-some-react-library-concepts-1ni9</link>
      <guid>https://dev.to/showvro/intermediate-exploration-of-some-react-library-concepts-1ni9</guid>
      <description>&lt;p&gt;&lt;strong&gt;React Props&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;When we call a child component in a parent component that time we pass data to the child component by props passing. Props bare object or any types value. We pass the state date to the child component by props. Props mean properties. For example, we have a parent component named &lt;code&gt;Person&lt;/code&gt;. From here we pass name and age data to child component &lt;code&gt;Student&lt;/code&gt; by props. This prop is &lt;code&gt;name&lt;/code&gt; and &lt;code&gt;age&lt;/code&gt;. Props are mutable.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;React State&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;A state is an object of a component. We can store our component data in the state. We can change the data of state. The state holds the data of the component and its changes by the render of the component. For example, first, we create a state like that—&lt;/p&gt;

&lt;p&gt;&lt;code&gt;const [count, setCount] = useState(0);&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Here we define state initial value 0. Then we create a function and this function implements the state increment value. So the state will be changed if the increment function call. Here count is a variable of state and sets count is a setter function of the state. The state is immutable.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;JSX&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;JSX stands for JavaScript notation. It is a syntax of extension JavaScript which allows the direct HTML code in React. It is very easy to make a template using JSX in React. We write the code in react components these statements are JSX.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Component Lifecycle&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Every component has several life cycles that are rendered at a particular time in the process. React let's define components as classes or functions. I give you examples of functional component basis life cycle methods. React functional components have a function that creates a section of the web page. The component has a state to hold data. When changing the state that time whole component will render. The component can call another child component for displaying state data pass by props. The component has all statements that are JSX statement that looks like HTML. It is created easily HTML template by JSX.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Props&lt;/li&gt;
&lt;li&gt;useState()&lt;/li&gt;
&lt;li&gt;useEffect()&lt;/li&gt;
&lt;li&gt;JSX &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Hooks&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Hooks are like the best features in React. It’s didn’t use the in-class component. Hooks are default features in reacting like that are methods. React has many built-in hooks.&lt;br&gt;
Those are - &lt;/p&gt;

&lt;p&gt;• useState()&lt;br&gt;
• useEffect()&lt;br&gt;
• useParams()&lt;br&gt;
• useContext()&lt;br&gt;
• useRef()&lt;br&gt;
• useReducer()&lt;/p&gt;

&lt;p&gt;We can create our custom hooks. Hooks like that function and in the function create a state then return the state of the function. Then which component needs the custom hook that time it uses import in the component. Custom hook example —&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import React, {useState} from `react`;

const useAuth = () =&amp;gt; {
    const [user, setUser] = useState({});
    return {user, setUser};
}

export default useAuth;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Context API&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Context api is like that store of the state that is set in the tower of components. If any component needs data at that time import the state from context can use data. We can’t pass child component to parent component data. So context API helps the usage data child component to any component.&lt;/p&gt;

</description>
      <category>react</category>
      <category>props</category>
      <category>state</category>
      <category>lifecycle</category>
    </item>
  </channel>
</rss>
