DEV Community: G Gokul

Introduction to Java

G Gokul — Tue, 22 Sep 2026 05:09:45 +0000

Java:

Java is a high-level, object-oriented programming language and computing platform first released by Sun Microsystems in 1995.
Java is a widely used programming language for building web, desktop, mobile, and enterprise applications.
It is known for its simple syntax, portability, and powerful features that make development easier and more secure.

How Java Works:

Write Once, Run Anywhere (WORA): Java code is compiled into intermediate bytecode rather than machine-specific instructions.
Java Virtual Machine (JVM): This bytecode runs on any device equipped with a JVM, making Java platform-independent across Windows, macOS, and Linux.

History of java:

Java was originally developed under the Green Project by Sun Microsystems for consumer electronic devices.
Before becoming Java, the language went through multiple names and finally received its official identity inspired by coffee beans.
The language was first called Greentalk, then renamed Oak, inspired by an oak tree outside James Gosling’s office.
Since the name Oak was already trademarked, the team later selected the name Java after brainstorming names like Silk, Lyric, DNA, and Dynamic.

Why was Java created?
Java was originally created to solve the software problems of networked consumer electronic devices, such as interactive televisions, set-top boxes, and smart home appliances.

difference between compiler and interpreter:

Architecture of java:

Java architecture is a multi-tiered system that handles both the compilation and execution of programs, famous for its "Write Once, Run Anywhere" (WORA) philosophy.
It translates human-readable Java code into intermediate bytecode, which can then run on any operating system equipped with a compatible virtual machine.

The architecture is divided into two primary concepts: the Execution Flow and the Three Core Components.

1.The Java Execution Flow

The process of running a Java program combines compilation and interpretation:
Source Code (.java): The developer writes code in standard text format.
Compilation: The Java Compiler (javac) converts the source code into an intermediate format called Bytecode stored in .class files. Bytecode is a platform-neutral language optimized for the Java Virtual Machine.
Execution: The Java Virtual Machine (JVM) processes this bytecode, transforming it into native machine code (binary instructions) that the host operating system can execute.

2. The Three Core Components (The "Nested" Relationship)

Java's architecture relies on three primary software components, which act like a set of nesting Russian dolls: JDK contains JRE, and JRE contains JVM.

The JDK (Java Development Kit) is a core software bundle used by developers to write, compile, debug, and run Java applications. It serves as an all-in-one environment that translates human-readable Java code into a format a computer can execute.
JRE stands for Java Runtime Environment. It is a software package that provides the exact environment needed to run and execute Java applications on a computer.
JVM stands for Java Virtual Machine. It is an abstract, software-based computing machine that provides the runtime environment required to execute Java programs.

3.Inside the JVM Architecture

The JVM itself is a complex runtime subsystem divided into four main areas:

Class Loader Subsystem
Runtime Data Areas (Memory Areas)
Execution Engine
JNI and Native Libraries

Java Task

G Gokul — Tue, 22 Sep 2026 03:08:50 +0000

task - error making / finding

public class Home{

public static void main(string args[]){
     System.out.println("hello");
}
}

output:
Home.java:3: error: cannot find symbol
public static void main(string args[]){
^
symbol: class string
location: class Home

public class Home{

public static void main( String args[]){
     system.out.println("hello");
}
}

output:
Home.java:4: error: package system does not exist
system.out.println("hello");
^
1 error
error: compilation failed


public class Home{

public static  main( String args[]){
    System.out.println("hello");
}
}

output:
Home.java:3: error: invalid method declaration; return type required
public static main( String args[]){
^
1 error
error: compilation failed


public class Home{

public static void ( String args[]){
    System.out.println("hello");
}
}

output:
Home.java:3: error: expected
public static void ( String args[]){
^
1 error
error: compilation failed

public  Home{

public static void main( String args[]){
    System.out.println("hello");
}
}

output:
Home.java:1: error: class, interface, annotation type, enum, record, method or field expected
public Home{
^
Home.java:6: error: class, interface, annotation type, enum, record, method or field expected
}
^
2 errors
error: compilation failed

public class {

public static void main( String args[]){
    System.out.println("hello");
}
}

output:
Home.java:1: error: expected
public class {
^
1 error
error: compilation failed

public class Home{

public static void main( String args){
    System.out.println("hello");
}
}

output:
error: can't find main(String[]) or main() method in class: Home

public class Home{

public static void main( String args[){
    System.out.println("hello");
}
}

output:
Home.java:3: error: ']' expected
public static void main( String args[){
^
1 error
error: compilation failed

public class Home{

public static void main( String []){
    System.out.println("hello");
}
}

output:
Home.java:3: error: expected
public static void main( String []){
^
1 error
error: compilation failed

public class Home{

public static void main( String args[]{
     System.out.println("hello");
}
}

output:
Home.java:3: error: ',', ')', or '[' expected
public static void main( String args[]{
^
1 error
error: compilation failed

public class Home{

public static void main( String args[]){
     System.println("hello");
}
}

output:
Home.java:4: error: cannot find symbol
System.println("hello");
^
symbol: method println(String)
location: class System
1 error
error: compilation failed

public class Home{

public static void main( String args[]){
     System.OUT.println("hello");
}
}

output:
Home.java:4: error: cannot find symbol
System.OUT.println("hello");
^
symbol: variable OUT
location: class System
1 error
error: compilation failed

public class Home{

public static void main( String args[]){
     System.out.println("hello");
}

output:
Home.java:5: error: reached end of file while parsing
}
^
1 error
error: compilation failed

Python string -2

G Gokul — Mon, 21 Sep 2026 08:30:50 +0000

task - password validator

upper = 0
lower = 0
digit = 0
special = 0
password = input("enter a password:")

for letters in password:
    if letters.isupper():
        upper += 1
    elif letters.islower():
        lower += 1
    elif letters.isdigit():
        digit += 1
    else:
        special += 1
if len(password)>=8 and upper >= 1 and lower>= 1 and digit>= 1 and special>= 1:
    print("valid password")
else:
    print("invalid password")

output:
enter a password:Gokul@123
valid password

task - password generator

import random
import string

length = int(input("enter password length:"))

letters = string.ascii_lowercase + string.ascii_uppercase + string.digits

password = ""
for i in range(length):
    password = password + random.choice(letters)
print(password)

output:
enter password length:8
lkgG23g7

task - anagram

word1 = input("enter word1:")
word2 = input("enter word2:")

if len(word1) != len(word2):
    print("not anagram")
else:
    for i in word1:
        if word1.count(i) != word2.count(i):
            print("not anagram")
            break
    else:
        print("anagram")

output:
enter word1:cat
enter word2:act
anagram

task - rotation

word = 'abcd' 
for i in range(len(word)):
    rotate = word[1:]+word[0]
    word = rotate
    print(rotate)

Output:
bcda
cdab
dabc
abcd

React useCallback and useReducer

G Gokul — Mon, 21 Sep 2026 06:27:20 +0000

useCallback:

useCallback is a React Hook that returns a memoized version of a callback function.
It is used to optimize performance by caching a function definition between re-renders of a component.

Syntax and How it Works:

useCallback accepts two arguments:

The function you want to cache.
A dependency array (the function will only be recreated if one of these dependencies changes).


import { useCallback } from 'react';

const memoizedFunction = useCallback(() => {
  doSomething(a, b);
}, [a, b]); // Only recreates if 'a' or 'b' changes

When should you use it?

Passing functions to memoized child components
Function is a dependency in other Hooks

Difference between useCallback vs useMemo:

useReducer:

In React, useReducer is a built-in Hook used for managing complex state logic.
It is an alternative to useState.
While useState is great for simple state updates (like toggling a boolean or updating a single text string), useReducer is preferred when a component has multiple pieces of state that depend on each other or when the next state depends heavily on the previous state.

Basic Syntax:

const [state, dispatch] = useReducer(reducer, initialState);

state: The current value of your state.
dispatch: A function you call to trigger a state update by sending an "action".
reducer: A pure JavaScript function that houses all your state transition logic. It takes the current state and the action, then returns the next state.
initialState: The starting value of your state.

When should you use it?
You should reach for useReducer if:

You have a state object with multiple sub-values (e.g., a form state with username, email, isValid, loading).
The next state depends on what the previous state was.
You want to decouple state update logic from the UI or components to make it more testable and readable

Difference between useState vs. useReducer:

example:

import React, { useReducer } from 'react';

// 1. Reducer function using if / else instead of switch
function counterReducer(state, action) {
  if (action.type === 'increment') {
    return { count: state.count + 1 };
  } 
  else if (action.type === 'decrement') {
    return { count: state.count - 1 };
  } 
  else if (action.type === 'reset') {
    return { count: 0 };
  } 
  // Default fallback if an unknown action type is provided
  else {
    throw new Error(`Unhandled action type: ${action.type}`);
  }
}

// 2. Component definition
function CounterApp() {
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });

  return (
    <div style={{ padding: '20px', textAlign: 'center' }}>
      <h2>Count: {state.count}</h2>

      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })} style={{ margin: '0 10px' }}>Decrement</button>
      <button onClick={() => dispatch({ type: 'reset' })}>Reset</button>
    </div>
  );
}

// 3. Export at the very end
export default CounterApp;

React.memo and useMemo

G Gokul — Mon, 21 Sep 2026 06:10:47 +0000

React.memo:

React.memo is a performance optimization tool in React that prevents a functional component from re-rendering if its props have not changed.

How It works:

When a parent component attempts to update, React.memo performs a shallow comparison (Object.is) on the component's previous props and its new props:
If props are identical: React skips re-rendering the component entirely, saving processing power.
If props have changed: React proceeds with the re-render to reflect the new data.

Syntax Example:

import { memo } from 'react';

const MyComponent = memo(({ title, description }) => {
  console.log("Component rendered!");
  return (
    <div>
      <h3>{title}</h3>
      <p>{description}</p>
    </div>
  );
});

export default MyComponent;

When Should You Use It?

You should not wrap every single component in memo because the comparison logic itself has a minor performance cost.
It is best used when:
The component is pure: It always renders the same output given the exact same props.
The component re-renders frequently: It is forced to re-render constantly because its parent component updates often.
The component is heavy: It contains a large UI tree or carries out expensive UI layout processes.

Difference between React.memo vs useMemo:

useMemo:

useMemo is a React Hook that caches (memoizes) the result of a calculation between re-renders.
By using the official React useMemo Hook, you optimize performance by ensuring that expensive, resource-heavy calculations only run when their specific inputs change, rather than on every single render.

How It Works (The Syntax):

useMemo accepts two arguments:

a calculation function
an array of dependencies.

import React, { useMemo } from 'react';

const memoizedValue = useMemo(() => {
  // 1. Perform expensive calculation here
  return someExpensiveCalculation(a, b);
}, [a, b]); // 2. Only re-run if 'a' or 'b' changes

First Argument: A function that takes no arguments and returns the value you want to cache.
Second Argument: A dependency array containing all reactive values (props, state, or variables) used inside the function.

Use Cases:

Skipping expensive recalculations
Skipping re-rendering of child components
Memoizing a dependency for another Hook

Difference between useMemo vs useCallback vs React.memo:

React useRef and useParams

G Gokul — Mon, 21 Sep 2026 05:48:20 +0000

useRef:

The useRef hook in React is a built-in function that returns a mutable object with a single .current property which persists its value across component renders without triggering a re-render when mutated.

syntax:

const myRef = useRef(0);

You can read or update this value at any time using myRef.current.

Two Main Use Cases:

1. Direct DOM Manipulation:

In React, you usually let the framework handle the UI.
However, if you need to focus an input field, trigger an animation, or measure the size of an element, you need direct access to the underlying HTML element.
You link the hook to a JSX node using the ref attribute.

example:

import { useRef } from 'react';

function FocusInput() {
  const inputRef = useRef(null); // 1. Create the ref box

  const handleClick = () => {
    // 3. Access the DOM node directly and focus it
    inputRef.current.focus(); 
  };

  return (
    <>
      {/* 2. Link the ref box to the HTML input element */}
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>Focus the input</button>
    </>
  );
}

2. Storing Data That Shouldn't Cause Re-Renders:

Sometimes you need a component to remember a piece of information, but changing that information shouldn't change what's on the screen.

example:

import { useRef } from 'react';

function Timer() {
  const timerIdRef = useRef(null);

  const startTimer = () => {
    // Storing the interval ID without forcing a re-render
    timerIdRef.current = setInterval(() => {
      console.log('Tick');
    }, 1000);
  };

  const stopTimer = () => {
    // Clearing the interval using the stored ID
    clearInterval(timerIdRef.current);
  };

  return (
    <div>
      <button onClick={startTimer}>Start</button>
      <button onClick={stopTimer}>Stop</button>
    </div>
  );
}

difference between useRef vs useState

useParams:

useParams is a built-in React hook that lets you read dynamic parameter values from the current URL.
It is commonly used in frameworks like React Router and Next.js to build dynamic pages.

how it works:

Extracts URL data:It returns an object containing key-value pairs of the dynamic segments defined in your route path.
Example path: If your route is /users/:id and the user visits /users/42, calling const { id } = useParams() will return { id: "42" }.
Dynamic rendering: You can use these extracted values to fetch specific data or display user-specific information on your webpage.

example:
1. Define the Route with a Colon (:):

In your routing setup, you mark the dynamic parts of your URL path using a colon (:) followed by a variable name.


import { BrowserRouter, Routes, Route } from "react-router-dom";
import UserProfile from "./UserProfile";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* ':id' is the dynamic parameter here */}
        <Route path="/user/:id" element={<UserProfile />} />
      </Routes>
    </BrowserRouter>
  );
}

2. Extract the Parameter inside the Component:

If a user visits /user/42 or /user/santhosh, you use useParams() inside that component to grab that specific value.

import { useParams } from "react-router-dom";

function UserProfile() {
  // Destructure the 'id' parameter directly from useParams()
  const { id } = useParams(); 

  return (
    <div>
      <h2>User Profile</h2>
      <p>The current User ID is: <strong>{id}</strong></p>
    </div>
  );
}

export default UserProfile;

Python string

G Gokul — Wed, 16 Sep 2026 03:52:31 +0000

task - middle letter capitalize

name = input("enter your name:")
mid_i = len(name) // 2

for i in range(len(name)):
    if i == mid_i:
        print(chr(ord(name[i]) - 32), end="")
    else:
        print(name[i], end="")

output:
enter your name:gokul
goKul

task - reverse a string and palindrome

name = input("Enter a string: ")
rev = name[::-1]
print("Reverse:", rev)

if name == rev:
    print("Palindrome")
else:
    print("Not a palindrome")

output:
Enter a string: madam
Reverse: madam
Palindrome

name = input("Enter a string:")
rv = ""
for string in name:
    rv = string + rv
print(rv)

if rv == name:
    print("Palindrome")
else:
    print("Not a palindrome")

output:
Enter a string:madam
madam
Palindrome

task - count of words

sentence = "today is wednesday"
word_count = 1
for letter in sentence:
    if letter == " ":
        word_count += 1
else:
    print(word_count)

output:
3

task - count of sentences

sentence = "today is wednesday. tomorrow is thursday."
sentence_count = 0
for letter in sentence:
    if letter == ".":
        sentence_count += 1
else:
    print(sentence_count)

output:
2

task - count of vowels

name = input("Enter a name:")
vowels = "aeiouAEIOU"
count = 0
for letter in name:
    if letter in vowels:
        count += 1
else:
    print("Number of vowels:", count)

output:
Enter a name:gokul
Number of vowels: 2

React - BrowserRouter and useNavigate

G Gokul — Tue, 08 Sep 2026 05:53:04 +0000

BrowserRouter:

In React, BrowserRouter is a parent component provided by the react-router-dom library that enables client-side routing in web applications.
It acts as the "routing engine" by wrapping your entire application, allowing you to switch between different views or "pages" without triggering a full browser refresh.

React Router DOM:

react-router-dom is an npm library that enables navigation and routing in React web applications.
React Router DOM is an npm package that enables you to implement dynamic routing in a web app.
It allows you to display pages and allow users to navigate them.
It is a fully-featured client and server-side routing library for React.

Features of BrowserRouter:

Real URL Updates: Reflects navigation in the browser's address bar using the HTML5 History API (pushState / replaceState).
Back & Forward Support: Native browser history buttons work out of the box for seamless navigation. -Deep Linking: Users can bookmark, share, or directly access any route via its URL.
SEO-Friendly: Clean, readable URLs (e.g., /products/123) are indexable by search engines.
Server-Side Rendering Ready: Pairs well with SSR frameworks like Next.js for full-stack React apps.

Working:

Initialization of Browser Router:
When the application is loaded, the BrowserRouter component is wrapped around the entire app (typically at the top level).

URL Detection:

BrowserRouter uses the HTML5 History API to detect changes in the URL.
This allows React Router to manipulate the URL while keeping the page from reloading.
When a user navigates to a different route (e.g., clicking a or typing a URL), BrowserRouter listens for this URL change.

Matching the URL:
Inside BrowserRouter the Route components define which URL path corresponds to which component. For instance, when the URL is /about, a is matched.

Rendering Components:

After matching the URL to the corresponding Route, the associated component is rendered.
If the URL matches /about, the About component will be displayed.

Navigating Between Views:
When a user clicks a link, such as:
Go to About

Maintaining Application State:

Since the page doesn't reload, the application's state (like form data or user input) remains intact.
React will only re-render the relevant components, ensuring a seamless user experience.

History Management:
The BrowserRouter uses the browser's built-in history stack, so users can navigate backward and forward between different routes using the browser's back and forward buttons.

Dynamic Updates:
As the URL changes (either by user interaction or programmatically using the history object), BrowserRouter continues to handle the URL and re-render the app's UI accordingly, providing smooth transitions between views.

example code:

import './App.css'
import Home from './components/Home'
import About from './components/About'
import Contact from './components/Contact'
import { BrowserRouter, Link, Route, Routes } from 'react-router-dom'
function App() {
  return (
    <div>
      {/* <a href="/">Home</a>
      <a href="/about">About</a>
      <a href="/contact">Contact</a> */}
      <BrowserRouter>
      <Link to={"/"}>Home</Link>
      <Link to={"/about"}>About</Link>
      <Link to={"/contact"}>Contact</Link>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
      </BrowserRouter>
    </div>
  )
}
export default App

BrowserRouter: The foundational wrapper that synchronizes your UI with the browser's URL bar using the HTML5 history API.
Routes: The container component that looks through all its child components to find a path that matches the current URL.
Route: The individual mapping block. It requires a path property (the URL) and an element property (the React component to show).
Link: The React equivalent of an HTML anchor tag. It updates the URL without causing a full page refresh.

useNavigate:

In React, useNavigate is a built-in hook from the React Router library that allows you to change the URL and navigate to different pages programmatically.
It is the modern replacement for the older useHistory hook used in React Router v5.

Why use useNavigate?

While you normally use a component for a user to click on, you use useNavigate when you need to redirect a user inside your JavaScript code after an event happens, such as:

Redirecting a user to a dashboard after a successful login.
Sending a user to a confirmation page after a form submission.
Booting an unauthenticated user back to the login page.

preventDefault():

In React, event.preventDefault() is a method used to stop the browser's default behavior from happening when a specific event occurs.

example code:

import { useNavigate } from "react-router-dom"

function Home(){
    const navigate = useNavigate();
    function changeComponent(){
        navigate("/about")
    }
    function element(params){
        params.preventDefault();
    }
    return(
        <div>
            home
            <button onClick={changeComponent}>go to about</button>

            <form action="">
                <input type="text" placeholder="username" />
                <input type="password" placeholder="password" />
                <button onClick={element}>submit</button>
            </form>
        </div>
    )
}
export default Home

Difference between useNavigate and Link:

React - useContext

G Gokul — Tue, 08 Sep 2026 05:52:42 +0000

useContext:

useContext is a built-in React Hook that allows components to read and subscribe to data (context) from a parent component without manually passing props down through every level.
The useContext hook in React is primarily used to share global data across a component tree without having to pass props down manually through every level.
This technique eliminates a common development problem known as prop drilling.

Difference between Prop Drilling vs. useContext:

Working:

useContext hook consumes values from a React Context, making them accessible to functional components.
First, create a Context object using React.createContext(), which holds the shared state.
Use useContext to access the context value in any component that needs it, avoiding prop drilling.
When the value of the Context updates, all components consuming that context automatically re-render with the new value.

The 3 stages in useContext:

To use context, you need to follow three straightforward steps:

1. Create the Context:

Create a context object using createContext().
This acts as the data container.

import { createContext } from 'react';

// Create a context with an optional default value
export const ThemeContext = createContext('light');

2. Provide the Context:

Wrap the parent component tree with the Context Provider and pass the data into the value prop.
Any child component inside this provider can now access this data.

import { useState } from 'react';
import { ThemeContext } from './ThemeContext';
import DisplayComponent from './DisplayComponent';

function App() {
  const [theme, setTheme] = useState('dark');

  return (
    // Wrap children and provide the current state value
    <ThemeContext.Provider value={theme}>
      <DisplayComponent />
    </ThemeContext.Provider>
  );
}

3. Consume the Context:

Inside any deeply nested functional component, import the useContext hook and your context object to extract the value directly.

import { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

function DeeplyNestedChild() {
  // Grab the value directly from ThemeContext without using props!
  const theme = useContext(ThemeContext);

  return <div className={`box ${theme}`}>The current theme is {theme}</div>;
}

React - Prop drilling

G Gokul — Mon, 07 Sep 2026 08:18:47 +0000

Prop drilling:

Prop drilling (also known as "threading props") is a situation in React where data is passed from a parent component down through multiple layers of nested child components until it reaches the deeply nested component that actually needs it.

Visualizing the Problem:

Imagine you have a piece of data (like a user's theme preference) at the top level of your app, and a button deep inside needs it:

Code Example of Prop Drilling:

import React from 'react';

function App() {
  const user = { name: "Alex" };
  // App passes 'user' to Parent
  return <Parent user={user} />;
}

function Parent({ user }) {
  // Parent doesn't use 'user', but must pass it to Child
  return <Child user={user} />;
}

function Child({ user }) {
  // Child doesn't use 'user', but must pass it to GrandChild
  return <GrandChild user={user} />;
}

function GrandChild({ user }) {
  // Finally, GrandChild uses the data
  return <h1>Welcome back, {user.name}!</h1>;
}

Why is Prop Drilling a Problem?

While prop drilling isn't inherently a bug and works perfectly fine for small applications, it introduces several challenges as an application grows:

Code Complexity & Clutter
Maintenance Overhead
Tight Coupling
Difficult Debugging

How to Avoid Prop Drilling:

React Context API
Component Composition
Global State Management Libraries

React - Props

G Gokul — Mon, 07 Sep 2026 08:10:04 +0000

Props in React:

In React, props (short for "properties") are used to pass information from one component to another.
The main purpose of props is to allow a parent component to send data to its child components.
Props cannot be modified by the receiving component.
They are strictly for reading data and should not be altered.
Props can be updated when the parent component’s state changes.

Core Characteristics of Props:

Unidirectional Data Flow: Data moves in one direction only—from parent to child. A child component cannot pass props directly back up to its parent.
Immutable (Read-Only): A child component can only read the props it receives. It cannot modify them. If you need data that changes over time within a component, you should use State instead.
Makes Components Reusable: By passing different props to the same component, you can render completely different content using the exact same structural template.

props Passing Methods:

Spread syntax: Forward multiple properties at once using without listing each name individually.
Passing functions/methods: Send callbacks or event handlers from a parent to a child component so the child can trigger parent actions (e.g., ).
Passing components or JSX: Provide custom UI elements or entire components as props (like ).
Context API: Share data deeply across the component tree without prop drilling by wrapping components in a provider context.

syntax:

<ComponentName propName="value"/>

Working of Props in React:

Props in React work by allowing data to flow from a parent component to a child component, making components dynamic and reusable.

Steps to use Props:
Define an attribute and its value (data).
Pass it to the child component by using props.
Render the props data.

App.jsx

import React from 'react';
import Parent from './Parent';

function App() {
    return (
        <div>
            <Parent />  {/* Render the Parent component */}
        </div>
    );
}
export default App;

Parent.jsx

import React from 'react';
import Child from './Child';

function Parent() {
    return (
        <div>
            <h1>Welcome to the Parent Component!</h1>
            <Child name="John" />  {/* Passing the 'name' prop with value "John" */}
        </div>
    );
}
export default Parent;

Child.jsx

import React from 'react';

function Child(props) {
    return <h2>Hello, {props.name}!</h2>; 
}

export default Child;

output:

App Component (App.js): Renders the Parent component.
Parent Component (Parent.js): Renders a heading and the Child component and passes the prop name="John" to the Child component.
Child Component (Child.js): Receives the name prop and displays Hello, John!

Default Props:

You can set fallback values in case the parent component forgets to pass a specific prop.

Passing Functions (Callbacks):

Parents can pass functions down as props. This allows a child component to trigger an event that updates the parent's state.

Destructuring Props in React:

Destructuring of Props in React lets you directly extract values from the props object, reducing the need to repeatedly use props. and making the code cleaner and easier to read.
Syntax:

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

Unidirectional Flow of Props in React:

React follows unidirectional data flow, where data is passed only from parent components to child components through props.
Child components cannot modify the props they receive, making the application easier to debug and manage.

Python Patterns Problems - 4

G Gokul — Fri, 04 Sep 2026 07:02:16 +0000

Program:

for row in range(1,6):
    for col in range(1,row):
        print("*",end=" ")
    for num in range(1,6 - row + 1):
        print(num,end=" ")
    print()

Output:

Program:

for row in range(1,6):
    for col in range(1,row):
        print("",end=" ")
    for num in range(1,6 - row + 1):
        print(num,end=" ")
    print()

Output:

Program:

for row in range(1,6):
    for col in range(1,row):
        print(" ",end=" ")
    for num in range(1,6 - row + 1):
        print(num,end=" ")
    print()

Output:

Program:

for row in range(1,6):
    for col in range(1,6 - row):
        print(" ",end=" ")
    for num in range(1,row + 1):
        print(num,end=" ")
    print()

Output: