Programming Courses | Courses | archita phukan | Love Babbar | Coding Ninja | Durgasoft

⚛️ React Basics (Components, Props, State)

Now you move from simple websites → modern frontend apps.

React is used in real companies like Netflix, Facebook, Airbnb.

⚛️ What is React
React is a JavaScript library for building UI.
👉 Developed by Facebook
👉 Used to build fast interactive apps
👉 Component-based architecture
Simple meaning
• Break UI into small reusable pieces
Example
• Navbar → component
• Card → component
• Button → component

🧱 Why React is Used
Without React
• DOM updates become complex
• Code becomes messy
React solves:
✅ Faster UI updates (Virtual DOM)
✅ Reusable components
✅ Clean structure
✅ Easy state management

🧩 Core Concept 1: Components
❓ What is a component
A component is a reusable UI block.
Think like LEGO blocks.

✍️ Simple React Component

function Welcome() {
    return <h1>Hello User</h1>;
}

Use component

<Welcome />

📦 Types of Components
🔹 Functional Components (Most Used)

function Header() {
    return <h1>My Website</h1>;
}

🔹 Class Components (Old)
Less used today.

✅ Why components matter
• Reusable code
• Easy maintenance
• Clean structure

📤 Core Concept 2: Props (Passing Data)
❓ What are props
Props = data passed to components.
Parent → Child communication.

Example

function Welcome(props) {
    return <h1>Hello {props.name}</h1>;
}

Use

<Welcome name="Deepak" />

Output 👉 Hello Deepak

🧠 Props Rules
• Read-only
• Cannot modify inside component
• Used for customization

🔄 Core Concept 3: State (Dynamic Data)
❓ What is state
State stores changing data inside component.
If state changes → UI updates automatically.

Example using useState

import { useState } from "react";
function Counter() {
    const [count, setCount] = useState(0);
    return (
        <div>
            <p>{count}</p>
            <button onClick={() => setCount(count + 1)}>
                Increase
            </button>
        </div>
    );
}

🧠 How state works
• count → current value
• setCount() → update value
• UI re-renders automatically
This is React’s biggest power.

⚖️ Props vs State (Important Interview Question)
| Props | State |
|-------|-------|
| Passed from parent | Managed inside component |
| Read-only | Can change |
| External data | Internal data |

⚠️ Common Beginner Mistakes
• Modifying props
• Forgetting import of useState
• Confusing props and state
• Not using components properly

🧪 Mini Practice Task
• Create a component that shows your name
• Pass name using props
• Create counter using state
• Add button to increase count

✅ Mini Practice Task – Solution

🟦 1️⃣ Create a component that shows your name

function MyName() {
    return <h2>My name is Deepak</h2>;
}
export default MyName;

✔ Simple reusable component
✔ Displays static text

📤 2️⃣ Pass name using props

function Welcome(props) {
    return <h2>Hello {props.name}</h2>;
}
export default Welcome;

Use inside App.js

<Welcome name="Deepak" />

✔ Parent sends data
✔ Component displays dynamic value

🔄 3️⃣ Create counter using state

import { useState } from "react";
function Counter() {
    const [count, setCount] = useState(0);
    return <h2>Count: {count}</h2>;
}
export default Counter;

✔ State stores changing value
✔ UI updates automatically

➕ 4️⃣ Add button to increase count

import { useState } from "react";
function Counter() {
    const [count, setCount] = useState(0);
    return (
        <div>
            <h2>Count: {count}</h2>
            <button onClick={() => setCount(count + 1)}>
                Increase
            </button>
        </div>
    );
}
export default Counter;

✔ Click → state updates → UI re-renders

🧩 How to use everything in App.js

import MyName from "./MyName";
import Welcome from "./Welcome";
import Counter from "./Counter";

function App() {
    return (
        <div>
            <MyName />
            <Welcome name="Deepak" />
            <Counter />
        </div>
    );
}
export default App;

➡️ Double Tap ♥️ For More

❤3

384 views19:11

Let me explain all the major programming languages in detail so you can better understand which one would be the best fit for you starting with Python

Python Programming Roadmap

Python is beginner-friendly, used in web dev, data science, AI, automation, and is often the first choice for programming newbies.

Step 1: Learn the Basics
Time: 1–2 weeks

Variables (name = "John")

Data Types (int, float, string, list, etc.)

Input and Output (input(), print())

Operators (+, -, *, /, %, //)

Indentation and Syntax rules

*Practice Ideas:*

Build a simple calculator

Create a name greeter

Make a temperature converter

Resources :

- w3schools

- freeCodeCamp

Step 2: Control Flow and Loops
Time: 1 week

- If-else conditions

- For loops and while loops

- Loop control: break, continue, pass

Practice Ideas:

- FizzBuzz

- Number guessing game

- Print star patterns

Step 3: Data Structures in Python
Time: 1–2 weeks

- Lists, Tuples, Sets, Dictionaries

- List Methods: append(), remove(), sort()

- Dictionary Methods: get(), keys(), values()

Practice Ideas:

- Create a contact book

- Word frequency counter

- Store student scores in a dictionary

Step 4: Functions
Time: 1 week

- Define functions using def

- Return statements

- Arguments and Parameters (*args, **kwargs)

- Variable Scope

*Practice Ideas:*

- ATM simulator

- Password generator

- Function-based calculator

Step 5: File Handling and Exceptions
Time: 1 week

- Open, read, write files

- Use of with open(...) as f:

- Try-Except blocks

Practice Ideas:

- Log user data to a file

- Read and analyze text files

- Save login data

Step 6: Object-Oriented Programming (OOP)
Time: 1–2 weeks

- Classes and Objects

- The init() constructor

- Inheritance

- Encapsulation

*Practice Ideas* :

- Build a class for a Bank Account

- Design a Library Management System

- Build a Rental System

Step 7: Choose any Specialization Track

a. Data Science & ML
Learn: NumPy, Pandas, Matplotlib, Seaborn, Scikit-learn
Projects: Analyze sales data, build prediction models

b. Web Development
Learn: Flask or Django, HTML, CSS, SQLite/PostgreSQL
Projects: Portfolio site, blog app, task manager

c. Automation/Scripting
Learn: Selenium, PyAutoGUI, os module, shutil
Projects: Auto-login bot, bulk file renamer, web scraper

d. AI & Deep Learning
Learn: TensorFlow, PyTorch, OpenCV
Projects: Image classification, face detection, chatbots

Final Step: Build Projects & Share on GitHub

- Upload code to GitHub

- Start with 2–3 real-world projects

- Create a personal portfolio site

*Use Replit or Jupyter Notebooks for practice*

*Practice daily – consistency matters more than speed*

@CodingCoursePro
Shared with Love

➕

Please open Telegram to view this post

VIEW IN TELEGRAM

❤1

337 viewsedited 19:56

Check out the list of top 10 Python projects on GitHub given below.

1. Magenta: Explore the artist inside you with this python project. A Google Brain’s brainchild, it leverages deep learning and reinforcement learning algorithms to create drawings, music, and other similar artistic products.

2. Photon: Designing web crawlers can be fun with the Photon project. It is a fast crawler designed for open-source intelligence tools. Photon project helps you perform data crawling functions, which include extracting data from URLs, e-mails, social media accounts, XML and pdf files, and Amazon buckets.

3. Mail Pile: Want to learn some encrypting tricks? This project on GitHub can help you learn to send and receive PGP encrypted electronic mails. Powered by Bayesian classifiers, it is capable of automatic tagging and handling huge volumes of email data, all organized in a clean web interface.

4. XS Strike: XS Strike helps you design a vulnerability to check your network’s security. It is a security suite developed to detect vulnerability attacks. XSS attacks inject malicious scripts into web pages. XSS’s features include four handwritten parsers, a payload generator, a fuzzing engine, and a fast crawler.

5. Google Images Download: It is a script that looks for keywords and phrases to optionally download the image files. All you need to do is, replicate the source code of this project to get a sense of how it works in practice.

6. Pandas Project: Pandas library is a collection of data structures that can be used for flexible data analysis and data manipulation. Compared to other libraries, its flexibility, intuitiveness, and automated data manipulation processes make it a better choice for data manipulation.

7. Xonsh: Used for designing interactive applications without the need for command-line interpreters like Unix. It is a Python-powered Shell language that commands promptly. An easily scriptable application that comes with a standard library, and various types of variables and has its own virtual environment management system.

8. Manim: The Mathematical Animation Engine, Manim, can create video explainers. Using Python 3.7, it produces animated videos, with added illustrations and display graphs. Its source code is freely available on GitHub and for tutorials and installation guides, you can refer to their 3Blue1Brown YouTube channel.

9. AI Basketball Analysis: It is an artificial intelligence application that analyses basketball shots using an object detection concept. All you need to do is upload the files or submit them as a post requests to the API. Then the OpenPose library carries out the calculations to generate the results.

10. Rebound: A great project to put Python to use in building Stackoverflow content, this tool is built on the Urwid console user interface, and solves compiler errors. Using this tool, you can learn how the Beautiful Soup package scrapes StackOverflow and how subprocesses work to find compiler errors.

@CodingCoursePro
Shared with Love

➕

Please open Telegram to view this post

VIEW IN TELEGRAM

379 viewsedited 15:49