<?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>Forem: Bhuvana Sri R</title>
    <description>The latest articles on Forem by Bhuvana Sri R (@bhuvanasri).</description>
    <link>https://forem.com/bhuvanasri</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%2F3350057%2F9e507427-5765-4b82-8f62-f7ddeec31ae7.jpg</url>
      <title>Forem: Bhuvana Sri R</title>
      <link>https://forem.com/bhuvanasri</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/bhuvanasri"/>
    <language>en</language>
    <item>
      <title>Features of Java</title>
      <dc:creator>Bhuvana Sri R</dc:creator>
      <pubDate>Sat, 08 Nov 2025 06:16:33 +0000</pubDate>
      <link>https://forem.com/bhuvanasri/features-of-java-5bf</link>
      <guid>https://forem.com/bhuvanasri/features-of-java-5bf</guid>
      <description>&lt;p&gt;Java, a widely used programming language, possesses a range of features that contribute to its popularity and versatility. Key features include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Object-Oriented: Java is a fundamentally object-oriented language, leveraging concepts like classes, objects, inheritance, polymorphism, encapsulation, and abstraction to structure code and promote reusability and modularity.&lt;/li&gt;
&lt;li&gt;Platform Independent: This is a cornerstone feature, often summarized by "Write Once, Run Anywhere." Java code is compiled into bytecode, which can then be executed on any system equipped with a Java Virtual Machine (JVM), regardless of the underlying operating system or hardware architecture.&lt;/li&gt;
&lt;li&gt;Simple: Java's syntax is designed to be relatively straightforward and easy to learn, particularly for those familiar with C/C++. It omits complex features like explicit pointers and operator overloading to enhance simplicity.&lt;/li&gt;
&lt;li&gt;Secure: Java incorporates robust security features, including a bytecode verifier, automatic memory management (garbage collection), and the absence of explicit pointers, which collectively contribute to secure application development and execution.&lt;/li&gt;
&lt;li&gt;Robust: Java emphasizes reliability and error handling. It employs strong type checking, exception handling mechanisms, and automatic garbage collection to prevent common programming errors and enhance application stability.&lt;/li&gt;
&lt;li&gt;Multithreaded: Java natively supports multithreading, allowing programs to execute multiple parts concurrently. This feature is crucial for developing interactive and responsive applications, especially in areas like GUI development and server-side programming.&lt;/li&gt;
&lt;li&gt;High Performance: While Java is an interpreted language, its use of Just-In-Time (JIT) compilation converts bytecode into native machine code at runtime, significantly improving performance compared to purely interpreted languages.&lt;/li&gt;
&lt;li&gt;Distributed: Java's networking capabilities and support for technologies like Remote Method Invocation (RMI) facilitate the creation of distributed applications that can communicate and interact across networks.&lt;/li&gt;
&lt;li&gt;Dynamic: Java is designed to be dynamic, capable of loading classes and linking them dynamically at runtime. This flexibility allows for dynamic updates and extensions to applications.&lt;/li&gt;
&lt;li&gt;Portable: Closely related to platform independence, Java's portability means that compiled Java programs can be easily moved and executed across different environments without requiring modifications.&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>programming</category>
      <category>java</category>
    </item>
    <item>
      <title>DataTypes in Java</title>
      <dc:creator>Bhuvana Sri R</dc:creator>
      <pubDate>Thu, 16 Oct 2025 07:08:22 +0000</pubDate>
      <link>https://forem.com/bhuvanasri/datatypes-in-java-p18</link>
      <guid>https://forem.com/bhuvanasri/datatypes-in-java-p18</guid>
      <description>&lt;h2&gt;
  
  
  What is a Data Type?
&lt;/h2&gt;

&lt;p&gt;A data type in Java defines the type of data a variable can store. It tells the compiler whether the variable will hold a number, a character, true/false, or an object.&lt;/p&gt;

&lt;h2&gt;
  
  
  Two Types of Data Types :
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Primitive DataType&lt;/li&gt;
&lt;li&gt;Non-Primitive DataType&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Primitive DataType:
&lt;/h2&gt;

&lt;p&gt;Primitive data types are the basic, built-in types in Java used to store simple values like numbers, characters, and true/false.&lt;/p&gt;

&lt;p&gt;The 8 primitive types are:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;- byte – small integers&lt;/li&gt;
&lt;li&gt;- short – medium integers&lt;/li&gt;
&lt;li&gt;- int – large integers&lt;/li&gt;
&lt;li&gt;- long – very large integers&lt;/li&gt;
&lt;li&gt;- float – decimal numbers (less precise)&lt;/li&gt;
&lt;li&gt;- double – decimal numbers (more precise)&lt;/li&gt;
&lt;li&gt;- char – single character&lt;/li&gt;
&lt;li&gt;- boolean – true or false&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Non-Primitive DataType
&lt;/h2&gt;

&lt;p&gt;Non-primitive data types, also called reference types, are types derived from classes. They are used to store objects or more complex data rather than simple values.&lt;/p&gt;

&lt;p&gt;Examples:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;String → stores text&lt;/li&gt;
&lt;li&gt;Arrays → stores multiple values of the same type&lt;/li&gt;
&lt;li&gt;Classes and Objects → store user-defined data&lt;/li&gt;
&lt;li&gt;Interface → defines a contract for classes&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>programming</category>
      <category>tutorial</category>
      <category>beginners</category>
      <category>java</category>
    </item>
    <item>
      <title>Java</title>
      <dc:creator>Bhuvana Sri R</dc:creator>
      <pubDate>Thu, 16 Oct 2025 06:42:38 +0000</pubDate>
      <link>https://forem.com/bhuvanasri/java-2cnh</link>
      <guid>https://forem.com/bhuvanasri/java-2cnh</guid>
      <description>&lt;h2&gt;
  
  
  1. What is Java?
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Java is a high-level, object-oriented, and platform-independent programming language. It is widely used for developing web, mobile, and enterprise applications because it’s reliable, secure, and runs on any platform without modification.&lt;/li&gt;
&lt;li&gt;It also has strong community support and is used in many real-world applications, including Android development. Learning Java helps me build a strong foundation in object-oriented programming concepts and prepares me for various software development roles.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  2. Why do you prefer Java over other languages?
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;I prefer Java because it’s simple, secure, and platform-independent.&lt;/li&gt;
&lt;li&gt;It’s widely used in real-world projects like web and Android development, and it helps me build a strong foundation in object-oriented programming.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  3.Where is Java used?
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Java is used in web applications, mobile apps (especially Android), desktop software, enterprise systems, cloud applications, and IoT devices.&lt;/li&gt;
&lt;li&gt;It’s popular because it works on any platform and is used by many large companies worldwide.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  4.What is the main feature of Java?
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;The main feature of Java is that it is platform-independent — meaning you can “write once and run anywhere.”&lt;/li&gt;
&lt;li&gt;This is possible because of the Java Virtual Machine (JVM), which allows Java programs to run on any operating system.&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>java</category>
      <category>programming</category>
    </item>
    <item>
      <title>Types of Error in Java</title>
      <dc:creator>Bhuvana Sri R</dc:creator>
      <pubDate>Wed, 15 Oct 2025 05:24:45 +0000</pubDate>
      <link>https://forem.com/bhuvanasri/types-of-error-in-java-3nal</link>
      <guid>https://forem.com/bhuvanasri/types-of-error-in-java-3nal</guid>
      <description>&lt;p&gt;In Java, errors are problems that occur during the execution or compilation of a program. They can be broadly categorized into three main types:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Compile-time Errors&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;These errors occur when you try to compile the program — before it runs.&lt;br&gt;
They are usually syntax or semantic errors detected by the Java compiler (javac).&lt;/p&gt;

&lt;p&gt;Examples:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Missing semicolon (;)&lt;/li&gt;
&lt;li&gt;Using an undeclared variable&lt;/li&gt;
&lt;li&gt;Misspelling a keyword&lt;/li&gt;
&lt;li&gt;Type mismatch&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Example Code:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;public class Example {
    public static void main(String[] args) {
        int a = 5
        System.out.println(a);
    }
}

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

&lt;/div&gt;



&lt;p&gt;Error: Missing semicolon (;) → Compile-time error&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Runtime Errors&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;These occur while the program is running, after successful compilation.&lt;/li&gt;
&lt;li&gt;They cause the program to crash or behave unexpectedly.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Examples:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Dividing by zero → ArithmeticException&lt;/li&gt;
&lt;li&gt;Accessing invalid array index → ArrayIndexOutOfBoundsException&lt;/li&gt;
&lt;li&gt;Null object access → NullPointerException&lt;/li&gt;
&lt;li&gt;File not found → FileNotFoundException&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Example Code:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;public class Example {
    public static void main(String[] args) {
        int a = 10 / 0;
        System.out.println(a);
    }
}

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

&lt;/div&gt;



&lt;p&gt;Error: ArithmeticException: / by zero → Runtime error&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Logical Errors&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;These occur when the program runs successfully but produces the wrong output.&lt;/li&gt;
&lt;li&gt;The compiler and runtime won’t catch them — they are human mistakes in logic.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Examples:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Using the wrong formula&lt;/li&gt;
&lt;li&gt;Incorrect loop conditions&lt;/li&gt;
&lt;li&gt;Wrong variable used in calculation&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Example Code:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;public class Example {
    public static void main(String[] args) {
        int a = 10, b = 5;
        System.out.println("Sum = " + (a - b)); // Logical mistake
    }
}

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

&lt;/div&gt;



&lt;p&gt;Output: Sum = 5 → Incorrect result due to logic error&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>java</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>React Question</title>
      <dc:creator>Bhuvana Sri R</dc:creator>
      <pubDate>Mon, 06 Oct 2025 04:11:53 +0000</pubDate>
      <link>https://forem.com/bhuvanasri/react-question-11g5</link>
      <guid>https://forem.com/bhuvanasri/react-question-11g5</guid>
      <description>&lt;p&gt;1)What is the difference between a functional component and a class component in React?&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A functional component in React is a simple JavaScript function that returns JSX and uses Hooks like useState or useEffect for state and lifecycle management. It’s easy to read and faster to write.&lt;/li&gt;
&lt;li&gt;A class component is the older way of building components using the ‘class’ keyword. It uses a render method and the ‘this’ keyword to show data.&lt;/li&gt;
&lt;li&gt;Functional components are now preferred because they make the code cleaner, simpler, and more efficient.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;2)How does JSX work internally? Why do we need it instead of plain JavaScript?&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;JSX stands for JavaScript XML. It allows us to write HTML-like code inside JavaScript, which makes the code easier to read and write. Internally, JSX doesn’t run directly in the browser — it’s converted by tools like Babel into normal JavaScript code using React’s createElement() function.&lt;/li&gt;
&lt;li&gt;We use JSX instead of plain JavaScript because it makes code easier to read, write, and maintain. Without JSX, we’d have to write long and complex JavaScript code for every element, which is harder to manage. So, JSX helps developers build user interfaces faster and more clearly.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;3)What is Virtual DOM and how does React use it for rendering?&lt;/p&gt;

&lt;p&gt;The Virtual DOM is a lightweight copy of the real DOM. When something changes in a component, React updates the Virtual DOM first, compares it with the previous version, and then updates only the parts that actually changed in the real DOM. This makes rendering faster and more efficient.&lt;/p&gt;

&lt;p&gt;4)Explain props vs state with an example.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Props are used to pass data from a parent component to a child component and are read-only, meaning the child can’t change them.&lt;/li&gt;
&lt;li&gt;State is data that is managed inside a component and can change over time, causing the component to re-render.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;5)What is lifting state up in React? Give an example.&lt;br&gt;
//(To Be Disscussed)&lt;br&gt;
Lifting state up means moving a shared state to the closest common parent component so that multiple child components can access and update it through props.&lt;/p&gt;

&lt;p&gt;6)If you need to store a previous state value before update, how would you handle that?&lt;/p&gt;

&lt;p&gt;To store a previous state value before it updates, I use the useRef() hook. It keeps a mutable value that doesn’t re-render the component. I update the ref inside a useEffect after each render, and then I can access the previous state value from ref.current.&lt;/p&gt;

&lt;p&gt;7)What is the difference between useRef and useState? When would you choose one over the other?&lt;/p&gt;

&lt;p&gt;useState is used when we want to store data that affects the UI — updating it triggers a re-render. useRef, on the other hand, stores a mutable value that persists across renders but does not cause re-rendering. I’d use useState for things like counters or input values, and useRef for storing previous state, DOM elements, or values I don’t want to trigger a re-render.&lt;/p&gt;

&lt;p&gt;8)How can you use useRef to focus an input field when a button is clicked?&lt;/p&gt;

&lt;p&gt;We can use useRef to get direct access to a DOM element. By attaching the ref to an input and calling inputRef.current.focus() inside a button click handler, we can focus the input field programmatically without re-rendering the component.&lt;/p&gt;

&lt;p&gt;9)Does changing the value of a useRef variable cause re-render? Why?&lt;/p&gt;

&lt;p&gt;In React, useRef is a hook used to store a mutable value or directly access a DOM element without causing a re-render. When we update a useRef variable, React doesn’t re-render the component because it doesn’t track changes to the .current property. It’s mainly used to keep data between renders or to reference elements in the DOM efficiently.&lt;/p&gt;

&lt;p&gt;12)What is the difference between using useEffect with:&lt;br&gt;
no dependency array [],empty dependency array [],specific dependency [count]&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;No dependency array: runs after every render.&lt;/li&gt;
&lt;li&gt;Empty dependency array []: runs only once after the initial render.&lt;/li&gt;
&lt;li&gt;Specific dependency [count]: runs on initial render and whenever the specified variable (count) changes.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;15)You have a form with multiple inputs. How would you manage state for each field efficiently?&lt;br&gt;
//(To Be Discussed)&lt;br&gt;
When you have a form with multiple inputs, the most efficient way is to use a single state object to store all field values instead of using separate useState hooks for each input. This keeps your code scalable and easy to manage.&lt;/p&gt;

&lt;p&gt;16)If a React component is re-rendering too many times, how would you optimize it?&lt;br&gt;
//(To Be Discussed)&lt;br&gt;
React component optimization means reducing unnecessary re-renders to improve performance, using techniques like React.memo, useMemo, useCallback, and splitting components.&lt;/p&gt;

&lt;p&gt;17)Explain controlled vs uncontrolled components with useRef and useState.&lt;br&gt;
//(To Be Discussed)&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Controlled components use React state (useState) to manage input values, so React is the single source of truth and can validate or manipulate input dynamically.&lt;/li&gt;
&lt;li&gt;Uncontrolled components use refs (useRef) to access values directly from the DOM, without updating state on every change.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Controlled → dynamic forms, validation.&lt;br&gt;
Uncontrolled → simple forms, access on submit only.&lt;/p&gt;

</description>
      <category>help</category>
      <category>react</category>
      <category>javascript</category>
      <category>beginners</category>
    </item>
    <item>
      <title>useState in react</title>
      <dc:creator>Bhuvana Sri R</dc:creator>
      <pubDate>Wed, 01 Oct 2025 09:27:55 +0000</pubDate>
      <link>https://forem.com/bhuvanasri/usestate-in-react-4bmd</link>
      <guid>https://forem.com/bhuvanasri/usestate-in-react-4bmd</guid>
      <description>&lt;h2&gt;
  
  
  What is useState in React?
&lt;/h2&gt;

&lt;p&gt;useState is a React Hook that allows you to add and manage state in functional components. It returns the current state value and a function to update it. When the state changes, the component automatically re-renders to reflect the new data.&lt;/p&gt;

&lt;h2&gt;
  
  
  Syntax of useState :
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const [stateVariable, setStateFunction] = useState(initialValue);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;stateVariable – The current state value.&lt;/li&gt;
&lt;li&gt;setStateFunction – A function used to update that state.&lt;/li&gt;
&lt;li&gt;initialValue – The starting value of the state.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Example: Basic Counter Using useState
&lt;/h2&gt;



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

function Counter() {
  // Declaring a state variable 'count' with an initial value of 0
  const [count, setCount] = useState(0);

  return (
    &amp;lt;div&amp;gt;
      &amp;lt;h2&amp;gt;Count: {count}&amp;lt;/h2&amp;gt;
      &amp;lt;button onClick={() =&amp;gt; setCount(count + 1)}&amp;gt;Increment&amp;lt;/button&amp;gt;
    &amp;lt;/div&amp;gt;
  );
}

export default Counter;

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

&lt;/div&gt;



</description>
      <category>webdev</category>
      <category>programming</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Hook in React</title>
      <dc:creator>Bhuvana Sri R</dc:creator>
      <pubDate>Wed, 01 Oct 2025 09:18:16 +0000</pubDate>
      <link>https://forem.com/bhuvanasri/hook-in-react-58b4</link>
      <guid>https://forem.com/bhuvanasri/hook-in-react-58b4</guid>
      <description>&lt;h2&gt;
  
  
  what is Hook ?
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;In React, a Hook is a special function that lets you “hook into” React features like state and lifecycle methods inside functional components.&lt;/li&gt;
&lt;li&gt;Before hooks were introduced, features like state and lifecycle could only be used in class components. With hooks, you can now use these powerful features directly in functional components — making them more powerful and easier to use.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Commonly Used Hooks
&lt;/h2&gt;

&lt;p&gt;Here are the most commonly used built-in hooks:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;useState() – Adds state to a functional component.&lt;/li&gt;
&lt;li&gt;useEffect() – Runs side effects (e.g., API calls, DOM updates, timers).&lt;/li&gt;
&lt;li&gt;useContext() – Accesses context values without using props.&lt;/li&gt;
&lt;li&gt;useRef() – Accesses or stores a DOM element or mutable value.&lt;/li&gt;
&lt;li&gt;useMemo() / useCallback() – Optimize performance by memoizing values or functions.&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>javascript</category>
    </item>
    <item>
      <title>React - Components and props</title>
      <dc:creator>Bhuvana Sri R</dc:creator>
      <pubDate>Wed, 01 Oct 2025 09:03:32 +0000</pubDate>
      <link>https://forem.com/bhuvanasri/react-components-and-props-781</link>
      <guid>https://forem.com/bhuvanasri/react-components-and-props-781</guid>
      <description>&lt;h2&gt;
  
  
  Components :
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;In react , components is a reusable and independent piece of UI. &lt;/li&gt;
&lt;li&gt;Think of its like a function or building block that return html with javascript logic.&lt;/li&gt;
&lt;li&gt;Components make your code modular , reusable and easy to maintain.&lt;/li&gt;
&lt;li&gt;They can accept props (data) and manage state (their own data).&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Types of Components:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Functional Components – These are simple JavaScript functions that return JSX. (Most commonly used today)&lt;/li&gt;
&lt;li&gt;Class Components – These are ES6 classes that extend React.Component and include a render() method. (Older style)&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Example – Functional Component:
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;function Welcome(props) 
{
  return &amp;lt;h1&amp;gt;Hello, {props.name}!&amp;lt;/h1&amp;gt;;
}

function App() 
{
  return (
    &amp;lt;div&amp;gt;
      &amp;lt;Welcome name="Dharshini" /&amp;gt;
      &amp;lt;Welcome name="Keerthi" /&amp;gt;
      &amp;lt;Welcome name="Bhuvana" /&amp;gt;
    &amp;lt;/div&amp;gt;
  );
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Props (Properties) :
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Props stands for properties.&lt;/li&gt;
&lt;li&gt;They are like function parameters in JavaScript.&lt;/li&gt;
&lt;li&gt;Props are used to pass data from a parent component to a child component.&lt;/li&gt;
&lt;li&gt;They are read-only, meaning a child component cannot modify them.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Props Example :
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;function Child(props) 
{
  return &amp;lt;h2&amp;gt;My favorite color is {props.color}&amp;lt;/h2&amp;gt;;
}
function Parent() 
{
  return &amp;lt;Child color="Blue" /&amp;gt;;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
      <category>javascript</category>
      <category>react</category>
      <category>webdev</category>
      <category>programming</category>
    </item>
    <item>
      <title>React Introduction</title>
      <dc:creator>Bhuvana Sri R</dc:creator>
      <pubDate>Mon, 15 Sep 2025 02:56:19 +0000</pubDate>
      <link>https://forem.com/bhuvanasri/react-introduction-543e</link>
      <guid>https://forem.com/bhuvanasri/react-introduction-543e</guid>
      <description>&lt;h2&gt;
  
  
  What is react ?
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;React is a javascript library used to build the UI(user interfaces) especially single-page applications(SPAs)&lt;/li&gt;
&lt;li&gt;where content updates dynamically without reloading the page.&lt;/li&gt;
&lt;li&gt;React focuses only on the ** view layer** (UI rending) and makes it easy to build reusable,component-based UIs.&lt;/li&gt;
&lt;li&gt;React follows a component-based architecture, meaning the UI is divided into ** small, reusable pieces** called components.&lt;/li&gt;
&lt;li&gt;It uses a Virtual DOM (Document Object Model) for faster rendering and better performance.&lt;/li&gt;
&lt;li&gt;React is declarative, meaning you describe what you want the UI to look like, and React updates the** real DOM** for you.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Why React?
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Reusable Components&lt;/li&gt;
&lt;li&gt;Write once, reuse anywhere → saves time and effort.&lt;/li&gt;
&lt;li&gt;Virtual DOM = Faster Performance&lt;/li&gt;
&lt;li&gt;React only updates the parts of the page that change, not the entire page.&lt;/li&gt;
&lt;li&gt;Component-Based Architecture&lt;/li&gt;
&lt;li&gt;Easier to develop, maintain, and scale large applications.&lt;/li&gt;
&lt;li&gt;Strong Community &amp;amp; Ecosystem&lt;/li&gt;
&lt;li&gt;Backed by Facebook and has a huge developer community, with many libraries/tools.&lt;/li&gt;
&lt;li&gt;Cross-Platform Development&lt;/li&gt;
&lt;li&gt;With React Native, you can build mobile apps using the same React concepts.&lt;/li&gt;
&lt;li&gt;SEO Friendly&lt;/li&gt;
&lt;li&gt;React supports server-side rendering, which helps in better search engine optimization.&lt;/li&gt;
&lt;li&gt;Easy to Learn for JavaScript Developers&lt;/li&gt;
&lt;li&gt;If you know JavaScript + ES6, you can quickly pick up React.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Difference between Library and frameworks:
&lt;/h2&gt;

&lt;h2&gt;
  
  
  Library:
&lt;/h2&gt;

&lt;p&gt;library is a set of read-made function that I can call when I need them,so I control the flow .&lt;/p&gt;

&lt;h2&gt;
  
  
  frameworks:
&lt;/h2&gt;

&lt;p&gt;A framework already has a structure and controls the flow of the application — I just follow its rules.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Javascript -async &amp; await</title>
      <dc:creator>Bhuvana Sri R</dc:creator>
      <pubDate>Mon, 15 Sep 2025 02:51:33 +0000</pubDate>
      <link>https://forem.com/bhuvanasri/javascript-async-await-384i</link>
      <guid>https://forem.com/bhuvanasri/javascript-async-await-384i</guid>
      <description>&lt;h2&gt;
  
  
  What is async?
&lt;/h2&gt;

&lt;p&gt;async is a keyword used before a function to make it always return a promise.&lt;br&gt;
Example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;async function greet() {
  return "Hello!";
}
greet().then(msg =&amp;gt; console.log(msg)); // Output: Hello!

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

&lt;/div&gt;



&lt;h2&gt;
  
  
  What is await?
&lt;/h2&gt;

&lt;p&gt;await pauses the execution of an async function until a promise resolves.&lt;/p&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;async function fetchData() {
  let promise = new Promise((resolve) =&amp;gt; {
    setTimeout(() =&amp;gt; resolve("Data received!"), 2000);
  });

  let result = await promise;
  console.log(result); // Output after 2s: Data received!
}
fetchData();
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  How async and await Work Together
&lt;/h2&gt;

&lt;p&gt;Show how they make asynchronous code** look synchronous.**&lt;/p&gt;

&lt;p&gt;Compare code written with .then() vs with async/await.&lt;br&gt;
Error Handling with try...catch&lt;br&gt;
Example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;async function getData() {
  try {
    let res = await fetch("https://jsonplaceholder.typicode.com/posts/1");
    let data = await res.json();
    console.log(data);
  } catch (error) {
    console.log("Error:", error);
  }
}
getData();
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  When to Use async/await
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;When working with API calls (fetch, Axios).&lt;/li&gt;
&lt;li&gt;When you want cleaner code instead of .then() chains.&lt;/li&gt;
&lt;li&gt;When error handling is important.&lt;/li&gt;
&lt;/ul&gt;

</description>
    </item>
    <item>
      <title>XMLHttpRequest in JavaScript</title>
      <dc:creator>Bhuvana Sri R</dc:creator>
      <pubDate>Fri, 12 Sep 2025 02:57:49 +0000</pubDate>
      <link>https://forem.com/bhuvanasri/xmlhttprequest-in-javascript-3ac8</link>
      <guid>https://forem.com/bhuvanasri/xmlhttprequest-in-javascript-3ac8</guid>
      <description>&lt;p&gt;&lt;strong&gt;What is XMLHttpRequest (XHR)?&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;XMLHttpRequest is a built-in JavaScript object used to send HTTP requests to a server and load data without reloading the whole page.&lt;/li&gt;
&lt;li&gt;It was introduced in the early 2000s and is the technology behind AJAX (Asynchronous JavaScript and XML).&lt;/li&gt;
&lt;li&gt;Even though it has “XML” in its name, it can handle JSON, text, XML, or any data.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Why was it important?&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Before XMLHttpRequest, if you wanted new data from the server, the entire web page had to reload.&lt;/li&gt;
&lt;li&gt;With XHR, JavaScript could:&lt;/li&gt;
&lt;li&gt;Request data asynchronously in the background.&lt;/li&gt;
&lt;li&gt;Update part of the page dynamically.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Example :&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Basis Syntax&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);

xhr.onload = function () {
  if (xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText));
  } else {
    console.error("Request failed with status", xhr.status);
  }
};

xhr.onerror = function () {
  console.error("Network error");
};

xhr.send();

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

&lt;/div&gt;



&lt;p&gt;Output Example :&lt;/p&gt;

&lt;p&gt;For the above request, you’ll get:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident occaecati excepturi         optio reprehenderit",
  "body": "quia et suscipit\nsuscipit recusandae..."
}

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

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Works with callbacks (not Promises).&lt;/li&gt;
&lt;li&gt;More verbose than fetch.&lt;/li&gt;
&lt;li&gt;Still supported in all browsers for backward compatibility.&lt;/li&gt;
&lt;li&gt;Mostly replaced by fetch and Axios in modern JavaScript.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;XMLHttpRequest still works, but it’s old, clunky, and hard to maintain. That’s why modern code uses fetch or libraries like Axios.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Fetch in JavaScript</title>
      <dc:creator>Bhuvana Sri R</dc:creator>
      <pubDate>Fri, 12 Sep 2025 02:42:11 +0000</pubDate>
      <link>https://forem.com/bhuvanasri/fetch-in-javascript-2llk</link>
      <guid>https://forem.com/bhuvanasri/fetch-in-javascript-2llk</guid>
      <description>&lt;p&gt;&lt;strong&gt;What is fetch ?&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;In JavaScript, fetch is a built-in function used to make network requests (like getting data from an API or sending data to a server).&lt;/li&gt;
&lt;li&gt;It returns a Promise, which makes it easier to handle asynchronous operations compared to older methods like XMLHttpRequest.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Example :&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Basic Syntax&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;fetch(url, options)
  .then(response =&amp;gt; response.json())  // Convert response to JSON
  .then(data =&amp;gt; console.log(data))    // Work with the data
  .catch(error =&amp;gt; console.error('Error:', error));
  //url → the address of the resource (API endpoint, file, etc.).
  //options → optional object to configure the request (method, headers, body).
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;GET Request&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(response =&amp;gt; response.json())
  .then(data =&amp;gt; console.log(data));

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

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;POST Request&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;fetch("https://jsonplaceholder.typicode.com/posts", {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({
        title: "Hello",
        body: "This is a test",
        userId: 1
    })
})
.then(response =&amp;gt; response.json())
.then(data =&amp;gt; console.log(data));

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

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;fetch is asynchronous (non-blocking).&lt;/li&gt;
&lt;li&gt;It always returns a Promise.&lt;/li&gt;
&lt;li&gt;Unlike XMLHttpRequest, it’s simpler and modern.&lt;/li&gt;
&lt;li&gt;Errors like wrong URL or no internet will trigger .catch().&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Difference between fetch and XMLHttpRequest&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;fetch :&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Promise-based (cleaner, easier to chain with .then() / async-await)&lt;/li&gt;
&lt;li&gt;Short and simple&lt;/li&gt;
&lt;li&gt;Provides convenient methods like .json(), .text(), .blob()&lt;/li&gt;
&lt;li&gt;Network errors trigger .catch(), but HTTP errors (like 404/500) must be handled manually&lt;/li&gt;
&lt;li&gt;Supports streaming responses&lt;/li&gt;
&lt;li&gt;Modern browsers (not IE)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;XMLHttpRequest&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Callback-based (can get messy with nested callbacks)&lt;/li&gt;
&lt;li&gt;Verbose and harder to read&lt;/li&gt;
&lt;li&gt;Must manually parse responseText&lt;/li&gt;
&lt;li&gt;Must check xhr.status and onerror&lt;/li&gt;
&lt;li&gt;Does not support streaming&lt;/li&gt;
&lt;li&gt;Works even in old browsers (like IE5+)&lt;/li&gt;
&lt;/ul&gt;

</description>
    </item>
  </channel>
</rss>
