<?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: Aditya Yadav</title>
    <description>The latest articles on DEV Community by Aditya Yadav (@adityayadav7).</description>
    <link>https://dev.to/adityayadav7</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%2F494883%2Fca6c669d-e760-4950-b2df-1fb73bccf16a.png</url>
      <title>DEV Community: Aditya Yadav</title>
      <link>https://dev.to/adityayadav7</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/adityayadav7"/>
    <language>en</language>
    <item>
      <title>Kubernetes Interview Questions</title>
      <dc:creator>Aditya Yadav</dc:creator>
      <pubDate>Wed, 01 Feb 2023 06:24:40 +0000</pubDate>
      <link>https://dev.to/adityayadav7/kubernetes-interview-questions-6b2</link>
      <guid>https://dev.to/adityayadav7/kubernetes-interview-questions-6b2</guid>
      <description>&lt;p&gt;&lt;strong&gt;1. What is Kubernetes and how does it work?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Kubernetes is an open-source platform for automating deployment, scaling, and management of containerized applications. It uses a declarative configuration to manage containers, as well as provide features such as self-healing, horizontal scaling, and service discovery.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Can you explain the architecture of a Kubernetes cluster?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;A Kubernetes cluster consists of a set of worker nodes that run containerized applications, and a control plane that manages the state of the cluster and the applications. The control plane is composed of the API server, the controller manager, and the etcd database. The worker nodes communicate with the control plane to receive instructions and report the status of containers.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. What are Pods, Replication Controllers, and Services in Kubernetes?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Pods are the smallest deployable units in Kubernetes and can contain one or more containers. Replication Controllers ensure that a specified number of pods are running at all times. Services provide stable network identities and load balancing for pods.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;4. How does Kubernetes handle network communication between Pods?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Kubernetes uses a network overlay, such as Flannel or Calico, to provide communication between pods. Pods are assigned unique IP addresses, and services can be used to load balance network traffic to pods.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;5. Can you explain the role of etcd in Kubernetes?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;etcd is a distributed key-value store that is used to store the configuration data for a Kubernetes cluster. It serves as the source of truth for the cluster state and is used by the API server to persist the state of objects such as pods and services.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;6. How does Kubernetes handle scaling of applications?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Kubernetes provides horizontal scaling by allowing users to increase or decrease the number of replicas of a given deployment. The Replication Controller or Deployment controller will then ensure that the desired number of replicas are running.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;7. What is a ConfigMap in Kubernetes and how is it used?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;A ConfigMap is a way to store configuration data as key-value pairs outside of a container image. It can be used to store configuration data for an application and can be mounted as a file or environment variables in a pod.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;8. Can you describe the process of rolling updates in Kubernetes?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Rolling updates allow a user to update an application without any downtime by incrementally updating replicas in a deployment. The Replication Controller or Deployment controller updates one replica at a time, allowing the new version to be tested before the entire deployment is updated.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;9. What are some common security concerns in Kubernetes and how are they addressed?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Some common security concerns in Kubernetes include network security, access control, and secrets management. Network security can be addressed using network policies and encryption of etcd data. Access control can be managed using Role-Based Access Control (RBAC) and secrets can be managed using secrets engines, such as Hashicorp Vault.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;10. Can you explain the difference between a deployment and a stateful set in Kubernetes?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;A Deployment is used to manage the scaling and updates of stateless applications, while a StatefulSet is used for stateful applications that require stable network identities and persistent storage. StatefulSets provide unique network identities for pods and maintain the order of pods during updates and rollbacks.&lt;/p&gt;

</description>
      <category>devops</category>
      <category>kubernetes</category>
      <category>containers</category>
    </item>
    <item>
      <title>NodeJS Basics Interview Questions</title>
      <dc:creator>Aditya Yadav</dc:creator>
      <pubDate>Sun, 29 Nov 2020 10:59:34 +0000</pubDate>
      <link>https://dev.to/adityayadav7/nodejs-basics-interview-questions-ia6</link>
      <guid>https://dev.to/adityayadav7/nodejs-basics-interview-questions-ia6</guid>
      <description>&lt;p&gt;&lt;strong&gt;What is Node.js?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Node.js is an open-source, cross-platform, back-end, JavaScript runtime environment that executes JavaScript code outside a web browser.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What is it used for?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Node.js is primarily used for non-blocking, event-driven servers, due to its single-threaded nature. Node.js is used to build different type of applications such as web applications, real-time chat applications, REST API servers etc.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What is the advantage of using node.js?&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;It provides an easy way to build scalable network programs&lt;/li&gt;
&lt;li&gt;Generally fast&lt;/li&gt;
&lt;li&gt;Great concurrency&lt;/li&gt;
&lt;li&gt;Asynchronous everything&lt;/li&gt;
&lt;li&gt;Almost never blocks&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Why Node.js is single threaded?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Node.js uses a single threaded model in order to support async processing. With async processing, an application can perform better and is more scalable under web loads.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;How many types of API functions are there in Node.js?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;There are two types of API functions in Node.js:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Asynchronous, non-blocking functions&lt;/li&gt;
&lt;li&gt;Synchronous, blocking functions&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Define Asynchronous and  Non-blocking functions ?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Node.js based server never waits for an API to return data thus making it asynchronous.&lt;/p&gt;

&lt;p&gt;Non-blocking functions are used in regards with I/O operations. They immediately respond with whatever data is available and keeps on running as per the requests. In case, any answer couldn’t be retrieved then the API returns immediately with an error. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What is Event-driven programming?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Event-driven programming is building our application based on and respond to events. When an event occurs, like click or keypress, we are running a callback function which is registered to the element for that event.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What is an Event-loop?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;An event loop in Node.js handles all the asynchronous callbacks in an application. Node.js (or JavaScript) is a single-threaded, event-driven language. This means that we can attach listeners to events, and when a said event fires, the listener executes the callback we provided.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;How does Event-loop work?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Whenever functions like setTimeout, http.get, and fs.readFile are called, Node.js executed the event loop and then proceeds with the further code without waiting for the output. Once the entire operation is finished, Node.js receives the output and then executes the callback function. This is why all the callback functions are placed in a queue in a loop. Once the response is received, they are executed one by one.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fad-bot-e026e.appspot.com%2Fo%2Fblog_images%252FScreenshot%25202020-11-29%2520144250.png%3Falt%3Dmedia%26token%3D068f799c-bd61-404a-8213-388143b88f30" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fad-bot-e026e.appspot.com%2Fo%2Fblog_images%252FScreenshot%25202020-11-29%2520144250.png%3Falt%3Dmedia%26token%3D068f799c-bd61-404a-8213-388143b88f30" title="event loop" alt="alt text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What is callback functions?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;A callback is a function called at the completion of a given task, this prevent any blocking, and allows other code to be run in the meantime.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;A&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;callback&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
  &lt;span class="nc"&gt;B&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;function &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
    &lt;span class="k"&gt;if&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
      &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Error occored&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
      &lt;span class="nf"&gt;callback&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="o"&gt;+=&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nf"&gt;callback&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Explain  REPL in the context of Node.js.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;REPL in Node.js stands for Read, Eval, Print, and Loop. It represents a computer environment such as a window console or Unix/Linux shell where any command can be entered and then the system can respond with an output. Node.js comes bundled with a REPL environment by default.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Explain the purpose of module.exports?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;A module encapsulates related code into a single unit of code. This can be interpreted as moving all related functions into a file.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;module&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;exports&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="na"&gt;A&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(){&lt;/span&gt;
&lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;NAMASTE&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;},&lt;/span&gt;
&lt;span class="na"&gt;B&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(){&lt;/span&gt;
&lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Hello&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;What is callback hell?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Callback hell is heavily nested callback which makes the code unreadable and difficult to maintain.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Explain the concept of middleware in Node.js?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Middleware functions are functions that have access to the request object (req), the response object (res), and the next middleware function in the application’s request-response cycle. The next middleware function is commonly denoted by a variable named next.&lt;/p&gt;

&lt;p&gt;Middleware functions can perform the following tasks:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Execute any code.&lt;/li&gt;
&lt;li&gt;Make changes to the request and the response objects.&lt;/li&gt;
&lt;li&gt;End the request-response cycle.&lt;/li&gt;
&lt;li&gt;Call the next middleware function in the stack.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;What are the different types of HTTP requests?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;HTTP defines a set of request methods used to perform desired actions. The request methods include:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;GET:&lt;/strong&gt; Used to retrieve the data&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;POST:&lt;/strong&gt; Generally used to make a change in state or reactions on the server&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;HEAD:&lt;/strong&gt; Similar to the GET method, but asks for the response without the response body&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;DELETE:&lt;/strong&gt; Used to delete the predetermined resource&lt;/p&gt;

</description>
      <category>node</category>
    </item>
    <item>
      <title>Basic ReactJS Interview Questions</title>
      <dc:creator>Aditya Yadav</dc:creator>
      <pubDate>Sat, 21 Nov 2020 13:21:03 +0000</pubDate>
      <link>https://dev.to/adityayadav7/reactjs-interview-questions-g6f</link>
      <guid>https://dev.to/adityayadav7/reactjs-interview-questions-g6f</guid>
      <description>&lt;p&gt;&lt;strong&gt;What is React?&lt;/strong&gt;&lt;br&gt;
React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What are the feature of React?&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;JSX.&lt;/li&gt;
&lt;li&gt;Use Virtual DOM.&lt;/li&gt;
&lt;li&gt;Server-side rendering.&lt;/li&gt;
&lt;li&gt;Uni-directional data-flow.&lt;/li&gt;
&lt;li&gt;Components.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;What is JSX?&lt;/strong&gt;&lt;br&gt;
JSX stands JavaScript XML. JSX with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nx"&gt;App&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;Component&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
   &lt;span class="nx"&gt;render&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;
         &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
            &lt;span class="nx"&gt;Hello&lt;/span&gt; &lt;span class="nx"&gt;World&lt;/span&gt;&lt;span class="o"&gt;!!!&lt;/span&gt;
         &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;      &lt;span class="p"&gt;);&lt;/span&gt;
   &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;How can web browsers read JSX directly?&lt;/strong&gt;&lt;br&gt;
Broswer can read only JS file. For JSX it require Transpiler to transformed into JS file. React use Babel as Transpiler.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What is Virtual DOM?&lt;/strong&gt;&lt;br&gt;
The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What is Constructor in React?&lt;/strong&gt;&lt;br&gt;
Constructor is a special function in a JavaScript class. JavaScript invokes constructor() whenever an object is created via a class.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;super&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;What is State?&lt;/strong&gt;&lt;br&gt;
States are the heart of React components. The state is a data structure that starts with a default value when a Component mounts. It may be mutated across time, mostly as a result of user events.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A component with the state is known as stateful component.
They are responsible for making component dynamic and interactive.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;What is Props?&lt;/strong&gt;&lt;br&gt;
Props (short for properties) and it is immutable. Props are used to pass data from parent to child or by the component itself.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What is Components?&lt;/strong&gt;&lt;br&gt;
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;What are the differences between functional and class components?&lt;/strong&gt;&lt;/p&gt;
&lt;h5&gt;
  
  
  Functional Components:-
&lt;/h5&gt;

&lt;ul&gt;
&lt;li&gt;It is called as stateless component. After introduction of Hooks, functional components are equivalent to class component. We call such components “function components” because they are literally JavaScript functions.
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;Welcome&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;h1&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Hello&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/h1&amp;gt;&lt;/span&gt;&lt;span class="err"&gt;;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;ul&gt;
&lt;li&gt;Functional component take single props as a object argument with data and return a React element.&lt;/li&gt;
&lt;/ul&gt;
&lt;h5&gt;
  
  
  Class Components:-
&lt;/h5&gt;

&lt;ul&gt;
&lt;li&gt;It is called as stateful component because they can hold or manage local state.
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nx"&gt;Welcome&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;Component&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;render&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;h1&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Hello&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/h1&amp;gt;&lt;/span&gt;&lt;span class="err"&gt;;
&lt;/span&gt;  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;&lt;strong&gt;What is Higher Order Component?&lt;/strong&gt;&lt;br&gt;
A higher-order component is a function that takes a component and returns a new component. A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What are the different phases of React component’s lifecycle?&lt;/strong&gt;&lt;br&gt;
Three Phases of React components lifecycle:-&lt;/p&gt;
&lt;h4&gt;
  
  
  1. Initial Rendering Phase or Mounting:
&lt;/h4&gt;

&lt;p&gt;This is the phase when the component is about to start its life journey and make its way to the DOM.&lt;/p&gt;
&lt;h5&gt;
  
  
  componentWillMount() :-
&lt;/h5&gt;

&lt;p&gt;Executed just before rendering takes place both on the client as well as server-side.&lt;/p&gt;
&lt;h5&gt;
  
  
  render() :-
&lt;/h5&gt;

&lt;p&gt;This is the only required method in the class component. This method returns the HTML elements which are going to be rendered inside the DOM.&lt;/p&gt;
&lt;h5&gt;
  
  
  componentDidMount() :–
&lt;/h5&gt;

&lt;p&gt;Executed on the client side only after the first render.&lt;/p&gt;
&lt;h4&gt;
  
  
  2. Updating Phase:
&lt;/h4&gt;

&lt;p&gt;Once the component gets added to the DOM, it can potentially update and re-render only when a prop or state change occurs. That happens only in this phase.&lt;/p&gt;
&lt;h5&gt;
  
  
  componentWillReceiveProps() :–
&lt;/h5&gt;

&lt;p&gt;Invoked as soon as the props are received from the parent class and before another render is called.&lt;/p&gt;
&lt;h5&gt;
  
  
  shouldComponentUpdate() :–
&lt;/h5&gt;

&lt;p&gt;Returns true or false value based on certain conditions. If you want your component to update, return true else return false. By default, it returns false.&lt;/p&gt;
&lt;h5&gt;
  
  
  componentWillUpdate() :–
&lt;/h5&gt;

&lt;p&gt;Called just before rendering takes place in the DOM.&lt;/p&gt;
&lt;h5&gt;
  
  
  render() :-
&lt;/h5&gt;

&lt;p&gt;This is the only required method in the class component. This method returns the HTML elements which are going to be rendered inside the DOM.&lt;/p&gt;
&lt;h5&gt;
  
  
  componentDidUpdate() :–
&lt;/h5&gt;

&lt;p&gt;Called immediately after rendering takes place.&lt;/p&gt;
&lt;h4&gt;
  
  
  3. Unmounting Phase:
&lt;/h4&gt;

&lt;p&gt;This is the final phase of a component’s life cycle in which the component is destroyed and removed from the DOM.&lt;/p&gt;
&lt;h5&gt;
  
  
  componentWillUnmount() :–
&lt;/h5&gt;

&lt;p&gt;Called after the component is unmounted from the DOM. It is used to clear up the memory spaces.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What is Redux?&lt;/strong&gt;&lt;br&gt;
Redux is an open-source JavaScript library for managing application state. It is most commonly used with libraries such as React or Angular for building user interfaces.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;List down the components of Redux.&lt;/strong&gt;&lt;br&gt;
Redux is composed of the following components:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Action&lt;/strong&gt; – It’s an object that describes what happened.&lt;br&gt;
&lt;strong&gt;Reducer&lt;/strong&gt; –  It is a place to determine how the state will change.&lt;br&gt;
&lt;strong&gt;Store&lt;/strong&gt; – State/ Object tree of the entire application is saved in the Store.&lt;br&gt;
&lt;strong&gt;View&lt;/strong&gt; – Simply displays the data provided by the Store.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--WxdQJzsv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://miro.medium.com/max/875/1%2Ach4GUTtpaEm8sx9O9t9PzA.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--WxdQJzsv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://miro.medium.com/max/875/1%2Ach4GUTtpaEm8sx9O9t9PzA.gif" alt="alt text" title="Redux dataflow"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What are the advantages of Redux?&lt;/strong&gt;&lt;br&gt;
Advantages of Redux are listed below:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Predictability of outcome&lt;/strong&gt; :– 
Since there is always one source of truth, i.e. the store, there is no confusion about how to sync the current state with actions and other parts of the application.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Maintainability&lt;/strong&gt; :– 
The code becomes easier to maintain with a predictable outcome and strict structure.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Server-side rendering&lt;/strong&gt; :– 
You just need to pass the store created on the server, to the client side. This is very useful for initial render and provides a better user experience as it optimizes the application performance.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Developer tools&lt;/strong&gt; :– 
From actions to state changes, developers can track everything going on in the application in real time.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Community and ecosystem&lt;/strong&gt; :– 
Redux has a huge community behind it which makes it even more captivating to use. A large community of talented individuals contribute to the betterment of the library and develop various applications with it.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Ease of testing&lt;/strong&gt; :– 
Redux’s code is mostly functions which are small, pure and isolated. This makes the code testable and independent.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Organization&lt;/strong&gt; :– 
Redux is precise about how code should be organized, this makes the code more consistent and easier when a team works with it.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;What is React Router?&lt;/strong&gt;&lt;br&gt;
React Router is a powerful routing library built on top of React, which helps in adding new screens and flows to the application. It maintains a standardized structure and behavior and is used for developing single page web applications. React Router has a simple API.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Router&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Route&lt;/span&gt; &lt;span class="nx"&gt;path&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;/&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;component&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;Home&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/Router&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
      <category>react</category>
      <category>redux</category>
      <category>router</category>
    </item>
  </channel>
</rss>
