DEV Community: Selahaddin Osmanoglu

Google Classroom API: Fetching Students with OAuth2

Selahaddin Osmanoglu — Wed, 06 Aug 2025 16:44:53 +0000

This guide shows how to allow a teacher to log into your app with Google OAuth, and then use their token to fetch student rosters from Google Classroom.

Google Cloud Setup

Go to Google Cloud Console.
Create a new project.
Enable the Classroom API under APIs & Services → Library.
Configure the OAuth Consent Screen:
- Choose External.
- Fill in app details.
- Add scopes:
  - https://www.googleapis.com/auth/classroom.courses.readonly
  - https://www.googleapis.com/auth/classroom.rosters.readonly
- Add test users.
Create OAuth Client ID:
- Go to APIs & Services → Credentials → Create Credentials → OAuth client ID.
- Choose Web Application.
- Add redirect URIs (e.g., http://localhost:3000/oauth2callback, https://myapp.com/oauth2callback).
- Save Client ID and Client Secret.

OAuth 2.0 Flow

Step 1: Redirect Teacher to Google Login

https://accounts.google.com/o/oauth2/v2/auth?
 client_id=YOUR_CLIENT_ID&
 redirect_uri=YOUR_REDIRECT_URI&
 response_type=code&
 scope=https://www.googleapis.com/auth/classroom.courses.readonly https://www.googleapis.com/auth/classroom.rosters.readonly&
 access_type=offline&
 prompt=consent

access_type=offline → gives refresh tokens.
prompt=consent → forces consent screen.

Step 2: Teacher Grants Access

Google redirects to:

https://your-app.com/oauth2callback?code=AUTH_CODE

Step 3: Exchange Code for Tokens

POST https://oauth2.googleapis.com/token
Content-Type: application/x-www-form-urlencoded

code=AUTH_CODE
&client_id=YOUR_CLIENT_ID
&client_secret=YOUR_CLIENT_SECRET
&redirect_uri=YOUR_REDIRECT_URI
&grant_type=authorization_code

Example response:

{
  "access_token": "ya29.a0AfH6SMA...",
  "expires_in": 3599,
  "refresh_token": "1//0gAbCdEfGhIjKlMn...",
  "scope": "https://www.googleapis.com/auth/classroom.courses.readonly https://www.googleapis.com/auth/classroom.rosters.readonly",
  "token_type": "Bearer"
}

Step 4: Use Access Token

Add header:

Authorization: Bearer ACCESS_TOKEN

Classroom API Calls

Get Teacher’s Courses

GET https://classroom.googleapis.com/v1/courses
Authorization: Bearer ACCESS_TOKEN

Example:

{
  "courses": [
    {
      "id": "123456789012",
      "name": "Algebra 1",
      "section": "Period 2",
      "descriptionHeading": "Algebra Basics",
      "ownerId": "me",
      "courseState": "ACTIVE"
    },
    {
      "id": "987654321098",
      "name": "History 101",
      "ownerId": "me",
      "courseState": "ACTIVE"
    }
  ]
}

Get Students in a Course

GET https://classroom.googleapis.com/v1/courses/{courseId}/students
Authorization: Bearer ACCESS_TOKEN

Example:

{
  "students": [
    {
      "userId": "111111111111111111111",
      "profile": {
        "id": "111111111111111111111",
        "name": {
          "givenName": "Alice",
          "familyName": "Johnson",
          "fullName": "Alice Johnson"
        },
        "emailAddress": "alice@example.com",
        "photoUrl": "https://lh3.googleusercontent.com/a/default-user"
      }
    },
    {
      "userId": "222222222222222222222",
      "profile": {
        "id": "222222222222222222222",
        "name": {
          "givenName": "Bob",
          "familyName": "Smith",
          "fullName": "Bob Smith"
        },
        "emailAddress": "bob@example.com"
      }
    }
  ]
}

Get a Single Student

GET https://classroom.googleapis.com/v1/courses/{courseId}/students/{userId}
Authorization: Bearer ACCESS_TOKEN

Example:

{
  "userId": "111111111111111111111",
  "profile": {
    "id": "111111111111111111111",
    "name": {
      "givenName": "Alice",
      "familyName": "Johnson",
      "fullName": "Alice Johnson"
    },
    "emailAddress": "alice@example.com"
  }
}

Token Refresh

When the access token expires:

POST https://oauth2.googleapis.com/token
Content-Type: application/x-www-form-urlencoded

client_id=YOUR_CLIENT_ID
&client_secret=YOUR_CLIENT_SECRET
&refresh_token=REFRESH_TOKEN
&grant_type=refresh_token

Example:

{
  "access_token": "ya29.a0AfH6SMAnewtoken...",
  "expires_in": 3599,
  "scope": "https://www.googleapis.com/auth/classroom.courses.readonly https://www.googleapis.com/auth/classroom.rosters.readonly",
  "token_type": "Bearer"
}

✅ Summary

Create Cloud Project → Enable Classroom API → OAuth Client ID.
Redirect teacher to Google OAuth.
Exchange authorization code for tokens.
Use access token to call Classroom API.
Fetch courses, then students per course.
Store refresh tokens for long-term use.

The BEST Way to Detoxify a Fatty Liver: A Functional Nutrition Approach

Selahaddin Osmanoglu — Sun, 13 Jul 2025 00:21:39 +0000

Fatty liver disease — especially non-alcoholic fatty liver disease (NAFLD) — is rapidly becoming one of the most common chronic liver conditions globally. While many assume it's purely a result of too much alcohol or sugar, there's a silent culprit that's often overlooked:

Environmental toxins that mimic estrogen — known as xenoestrogens.

These toxins not only overload your liver’s detox pathways but also disrupt your hormonal balance, contributing to obesity, fatigue, hormonal imbalances, and even chronic diseases like cancer.

In this article, we’ll dive deep into:

What’s really damaging your liver
The role of xenoestrogens and estrogen receptors
Evidence-based dietary strategies to help detoxify and regenerate your liver

⚠️ What's REALLY Hurting Your Liver?

Yes, excess sugar and alcohol are harmful — but there's a far more pervasive daily exposure:

xenoestrogens from:

Pesticides
Herbicides
Plastics (especially BPA & phthalates)
Personal care products
Industrial chemicals (e.g., PFAS, known as “forever chemicals”)

These substances bind to estrogen receptors in your cells, creating a state of estrogen dominance. And here’s why that matters for your liver:

🛑 Reduces bile production – Bile helps the liver eliminate toxins. Without it, toxins get recycled.
💥 Promotes fatty liver – Impaired detox pathways cause fat accumulation in the liver.
🧬 Disrupts hormones – Affects thyroid function, fertility, testosterone levels, and even skin health.

🔁 The Estrogen-Toxin Feedback Loop

Estrogen receptors aren’t just in reproductive organs — they’re everywhere: liver, thyroid, skin, brain, fat tissue.

When these receptors are chronically activated by toxins, the result is:

Fatty liver & liver inflammation
Acne & skin issues
Menstrual irregularities
Fertility issues
Fat gain (especially hips & abdomen)
Male breast tissue (gynecomastia)
Lower sperm count and testosterone

✅ How to Support Liver Detoxification Naturally

Your liver can detoxify xenoestrogens — if it’s supported properly.

Here’s what works best:

🥦 1. Eat Cruciferous Vegetables Regularly

Cruciferous vegetables are powerful liver detoxifiers that:

Activate Phase I & II liver detox enzymes
Increase glutathione (your liver’s master antioxidant)
Promote bile flow and fat breakdown
Support estrogen metabolism

Top cruciferous veggies:

Broccoli & broccoli sprouts (rich in sulforaphane)
Kale
Cauliflower
Brussels sprouts
Arugula
Radishes
Cabbage

💡 Broccoli sprouts are especially potent — they can activate over 200 detox genes.

💊 2. Consider DIM (Diindolylmethane)

If you struggle to get enough cruciferous vegetables, DIM is a concentrated plant extract that helps:

Break down harmful forms of estrogen
Support liver enzymes involved in estrogen detox
Reduce estrogen dominance symptoms (PMS, acne, low testosterone)

It’s especially useful in hormonal acne, estrogen-sensitive cancers, and postmenopausal estrogen overload.

💊 3. Take NAC (N-Acetyl Cysteine)

NAC is a precursor to glutathione, essential for:

Neutralizing oxidative stress in the liver
Reversing fatty liver damage
Supporting detox of xenoestrogens and heavy metals

It’s also great for brain health, respiratory health, and inflammation.

💊 4. Add Choline

Choline plays a crucial role in:

Transporting fat out of the liver
Preventing fat accumulation (key for reversing NAFLD)
Supporting brain function and methylation

🔑 Many people — especially vegans — are deficient in choline.

Choline-rich foods: eggs (especially yolks), liver, beef, salmon, soybeans, and cruciferous vegetables.

🛡️ Bonus Tip: Avoid What You Can

You can't avoid toxins entirely, but here’s how to reduce your burden:

Drink from glass or stainless steel, not plastic
Choose organic produce when possible
Avoid non-stick cookware (look for ceramic or cast iron)
Use natural personal care products
Filter your drinking water (look for PFAS-certified filters)

📝 Final Thoughts: You Don’t Need a “Detox Cleanse”

You don’t need an expensive juice cleanse or harsh detox kits.

What you need is:

Consistent intake of cruciferous vegetables
Occasional supplementation with DIM, NAC, or choline
Awareness of how to reduce toxic exposure

Even eating cruciferous vegetables 2–4 times a week can make a difference.

🌿 Your liver has the innate ability to detoxify — you just have to give it the tools to do its job.

📚 References & Further Reading

Journal of Nutrition: Glucosinolate breakdown products and liver detoxification enzymes
NIH: Role of choline in nonalcoholic fatty liver disease
Environmental Health Perspectives: Xenoestrogens in the modern environment

Want to take the next step? Try adding ½ cup of broccoli sprouts or a serving of sautéed kale to your meals this week and feel the difference.

The Brutal Truth About Modern Flour — And What to Eat Instead

Selahaddin Osmanoglu — Thu, 10 Jul 2025 18:56:43 +0000

Flour is a staple in nearly every kitchen, yet few people realize that modern flour—especially in the U.S.—is a highly processed, nutritionally stripped ingredient with serious implications for gut health, blood sugar, and inflammation. If you've heard that U.S. flour is unhealthy, you heard right.

Let’s break it all down with the brutal, science-backed truth — and give you healthy, better alternatives to reclaim your health.

⚙️ How Modern Flour is Made (U.S. Context)

Modern wheat flour production is optimized for shelf life and mass baking—not nutrition.

Key Processing Steps:

Industrial Milling: Removes the bran and germ, leaving just the starchy endosperm.
Bleaching: Uses chlorine gas, benzoyl peroxide, or potassium bromate — chemicals banned in many other countries.
Enrichment: Nutrients are stripped, then synthetically added back (iron, B vitamins).
Shelf-Stabilization: Removal of oils delays rancidity but kills nutrition.

🔬 Why It’s Nutritionally Bankrupt

Nutrient Component	Whole Wheat	White Flour
Fiber	High	Very low
Natural B Vitamins	High	Mostly stripped
Protein	Moderate	May contain more gluten, but less complete
Healthy Fats	Yes (in germ)	None
Antioxidants	Present	Lost

Refined flour is basically empty carbs. It spikes your blood sugar, provides little satiety, and disrupts gut microbiota.

🌾 Gluten: Then vs. Now

Modern wheat has been bred for higher gluten and yield, not digestibility. While it's not genetically modified (GMO), it's been hybridized aggressively.

Ancient Wheat vs Modern Wheat:

Ancient grains (e.g., einkorn, emmer, spelt) have lower and more digestible gluten
Modern wheat has more immunoreactive proteins and is harder on sensitive guts
Linked to non-celiac gluten sensitivity, IBS, and inflammation

🦠 Gut Health Impacts

Refined flour is fiberless, and acts like sugar in the gut:

Promotes harmful bacteria overgrowth
Deprives beneficial gut microbes of prebiotic fiber
Leads to gut permeability ("leaky gut"), inflammation, and metabolic dysfunction

It also plays a role in:

Insulin resistance
NAFLD (fatty liver)
Mood swings and brain fog

☣️ Hidden Chemicals and Additives

Modern commercial flour may contain:

Bleaching agents (chlorine dioxide, benzoyl peroxide)
Potassium bromate (carcinogen — banned in EU, still used in U.S.)
Glyphosate residues (used pre-harvest to dry crops)
Synthetic vitamins (often poorly absorbed)
Emulsifiers and preservatives in packaged goods (gut-disruptive)

🛑 These practices are banned or tightly regulated in Europe, but common in U.S. flour.

✅ A Much Better Choice: Stone-Ground Organic Flour

Bob's Red Mill Organic Whole Wheat Flour is a fantastic example:

100% stone ground – keeps germ, bran, and endosperm intact
Certified organic – no glyphosate or GMOs
High in fiber, protein, and antioxidants
No bleaching or chemical processing

✅ Excellent for baking, sourdough, or healthy everyday use

❌ Not gluten-free (still uses Triticum aestivum)

🌿 Want to Ditch Modern Wheat Altogether?

Here are widely available non-*Triticum aestivum* flours you can trust:

1. Einkorn (Triticum monococcum)

Oldest cultivated wheat
Very low gluten, more digestible
Higher lutein, protein, and antioxidants
Easier on the gut, great for sensitive individuals

🛒 Brands: Jovial Foods, Einkorn.com

📍 Where: Whole Foods, Thrive Market, Amazon

2. Spelt (Triticum spelta)

Ancient relative of modern wheat
Contains gluten, but more water-soluble = easier digestion
Nutty, sweet flavor

🛒 Brands: Bob’s Red Mill, King Arthur

📍 Where: Most grocery stores

3. Emmer (Farro) (Triticum dicoccum)

Higher in fiber, protein, and minerals than modern wheat
Great for pasta, hearty breads, and grain bowls

🛒 Brands: Bluebird Grain Farms, Bob’s Red Mill

📍 Where: Whole Foods, specialty grocers

4. Kamut® (Khorasan Wheat)

Ancient Egyptian grain, trademarked variety
High in selenium, zinc, and protein
Distinct flavor and golden color

🛒 Brands: Eden Foods, Kamut International

📍 Where: Thrive Market, Sprouts

🌾 Gluten-Free Ancient Grain Alternatives

If you want to go completely gluten-free, here are gut-friendly, ancient options:

Flour	Benefits
Buckwheat	Not a grain; rich in rutin (antioxidant), prebiotic fiber
Teff	Tiny Ethiopian grain; great for injera, rich in iron
Sorghum	High in antioxidants, low glycemic impact
Millet	Alkaline, easily digestible, mild taste
Cassava	Grain-free, neutral flavor, good for baking
Quinoa	Complete protein, gut-friendly, slightly nutty

👨‍🍳 Pro Tip: Use Sourdough Fermentation

Sourdough naturally:

Pre-digests gluten
Reduces phytic acid
Boosts bioavailability of minerals
Adds beneficial lactic acid bacteria for the gut

Combine ancient grain flours + sourdough = digestive win.

💡 Final Thoughts

Modern white flour in the U.S. is:

Overprocessed
Chemically treated
Nutrient-poor
Gut-disruptive

To take back your health:

Switch to stone-ground organic flours
Use ancient grains like einkorn, spelt, or kamut
Try gluten-free grains like buckwheat or teff
Experiment with sourdough fermentation

📦 Recommended Brands (Summary)

Brand	Best For	Link
Bob’s Red Mill	Whole wheat, spelt, GF flours	https://www.bobsredmill.com
Jovial Foods	Einkorn (flour + pasta)	https://www.jovialfoods.com
Einkorn.com	Heritage einkorn grain/flour	https://www.einkorn.com
Bluebird Grain Farms	Emmer, ancient grains	https://www.bluebirdgrainfarms.com
Kamut®	Khorasan wheat	https://www.kamut.com

🥖 Ready to Bake?

Want recipes tailored to einkorn, spelt, or sourdough? Let me know and I’ll send a curated recipe guide.

Your gut deserves better than bleached, bromated white powder. Choose flour that feeds your body—not the food industry.

Part 10: Custom Hooks and Reusability – DRY Up Your React Logic

Selahaddin Osmanoglu — Wed, 02 Jul 2025 09:39:14 +0000

Welcome to Part 10 of the React for Beginners series!

As your app grows, you’ll find yourself repeating logic across components — like handling form inputs, toggling values, fetching data, etc.

Wouldn’t it be great if you could extract and reuse that logic?

You can — with custom hooks.

🧠 What Is a Custom Hook?

A custom hook is a JavaScript function that:

Starts with use
Uses other hooks inside it (like useState, useEffect, etc.)
Encapsulates reusable logic

Think of it like a function component with no UI — just logic.

✨ Example: useToggle Hook

Let’s say you want to toggle a boolean value (e.g., show/hide, like/unlike):

`/hooks/useToggle.js`

import { useState } from 'react';

function useToggle(initialValue = false) {
  const [value, setValue] = useState(initialValue);
  const toggle = () => setValue((v) => !v);
  return [value, toggle];
}

export default useToggle;

Usage in a Component

import useToggle from './hooks/useToggle';

function ToggleBox() {
  const [isVisible, toggleVisible] = useToggle();

  return (
    <div>
      <button onClick={toggleVisible}>
        {isVisible ? 'Hide' : 'Show'} Message
      </button>
      {isVisible && <p>This is a toggled message!</p>}
    </div>
  );
}

✅ Logic is clean and reusable!

📡 Example: useFetch Hook (Basic)

Fetching data is another good use case.

`/hooks/useFetch.js`

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setLoading(true);
    fetch(url)
      .then((res) => res.json())
      .then((json) => {
        setData(json);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
}

export default useFetch;

Usage in a Component

import useFetch from './hooks/useFetch';

function RandomUser() {
  const { data, loading } = useFetch('https://randomuser.me/api/');

  if (loading) return <p>Loading...</p>;

  const user = data.results[0];
  return (
    <div>
      <p>{user.name.first} {user.name.last}</p>
      <img src={user.picture.medium} alt="User avatar" />
    </div>
  );
}

🪝 When Should You Create a Custom Hook?

You repeat the same hook-based logic in multiple components
The logic is self-contained and doesn’t depend on UI layout
You want cleaner, more maintainable code

🧩 Naming Convention

Always name custom hooks starting with use — like useToggle, useForm, useScroll, etc.

This lets React know it’s a hook and enforce rules accordingly.

✍️ Challenge for You

Create a useInput hook that manages the value and onChange for a form field.
Use it to build a reusable input component.
Bonus: Add a reset function to the hook!

✅ Summary

Custom hooks let you extract and reuse stateful logic.
They improve readability, reduce duplication, and promote clean code.
You can use built-in hooks inside custom ones (like useState, useEffect, etc.).
They don’t render anything — they just return data and functions.

🔜 What’s Next?

In Part 11, the final part of this series, we’ll give you a peek into advanced React topics like context, reducers, memoization, and more.

Your components are now smarter and your code is cleaner — that’s pro-level React thinking! 🧠💡

Part 9: React Router Basics – Navigating Without Page Reloads

Selahaddin Osmanoglu — Wed, 02 Jul 2025 09:23:15 +0000

Welcome to Part 9 of the React for Beginners series!

Until now, you’ve worked with single-page apps (SPAs) that update content dynamically — but what if you want multiple pages?

That’s where React Router comes in.

It allows your app to:

Navigate between pages (Home, About, Contact, etc.)
Keep the app fast by avoiding full page reloads
Handle dynamic URLs (like /users/123)

🚦 What Is React Router?

React Router is the official routing library for React.

It lets you map URL paths to components — just like how a website has pages.

⚙️ Installation

Install it in your React project:

npm install react-router-dom

Then set up the router in your app.

🧱 Basic Setup Example

`main.jsx`

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

`App.jsx`

import { Routes, Route, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

function App() {
  return (
    <div>
      <nav>
        <Link to="/">Home</Link> | <Link to="/about">About</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
}

export default App;

Example Pages

/pages/Home.jsx

function Home() {
  return <h2>Welcome to the Home Page</h2>;
}
export default Home;

/pages/About.jsx

function About() {
  return <h2>About This App</h2>;
}
export default About;

✅ You now have a two-page app with client-side navigation.

🔁 Route Parameters

You can create dynamic routes using : syntax.

Example: /users/:id

<Route path="/users/:id" element={<UserProfile />} />

Inside UserProfile, you can access the id:

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

function UserProfile() {
  const { id } = useParams();
  return <p>Viewing profile for user {id}</p>;
}

❌ 404 Not Found Page

Add a “catch-all” route at the bottom:

<Route path="*" element={<h2>Page Not Found</h2>} />

📦 Nested Routes (Preview)

React Router supports nested routes, layouts, and redirects. These are more useful in larger apps and will be covered in future posts if needed.

✍️ Challenge for You

Create a Contact page and route.
Add it to your navbar.
Add a 404 page that shows when the route is not found.

✅ Summary

React Router enables multi-page navigation without reloads.
Use <Routes> and <Route> to map URLs to components.
Use <Link> for navigation instead of <a>.
Dynamic routes allow flexible URLs like /product/123.

🔜 What’s Next?

In Part 10, we’ll explore custom hooks — a powerful way to reuse logic across components and keep your code clean.

Now your app has real pages — just like a production site! 🌐⚛️

Part 8: Structuring Your React App – Organizing for Growth

Selahaddin Osmanoglu — Wed, 02 Jul 2025 09:14:39 +0000

Welcome to Part 8 of the React for Beginners series!

Now that you’ve built components, handled state, and managed forms — it’s time to talk about something essential: project structure.

As your app grows, how you organize your files and components matters. A clean structure makes collaboration easier, bugs rarer, and scaling smoother.

📁 Default Vite or CRA Structure

When you create a React app using Vite or Create React App, you usually start with something like:

/src
  ├── App.jsx
  ├── main.jsx
  └── index.css

This works fine for small apps, but quickly becomes messy as components, hooks, styles, and data increase.

🧱 Recommended Folder Structure (Scalable)

Here’s a beginner-friendly structure that grows with your app:

/src
  ├── assets/         # Images, icons, fonts
  ├── components/     # Reusable UI components (Button, Card)
  ├── features/       # Pages or modules (Auth, Todo, Profile)
  ├── hooks/          # Custom hooks (useFetch, useToggle)
  ├── styles/         # Global CSS or utility styles
  ├── App.jsx         # App layout and routing
  ├── main.jsx        # React root render

🧩 Example: Breaking Components into Folders

Let’s say you're building a todo app.

Instead of dumping everything into one file, organize like this:

/src
  ├── features/
  │   └── todo/
  │       ├── TodoList.jsx
  │       ├── TodoItem.jsx
  │       ├── AddTodoForm.jsx
  │       └── todo.css

This keeps related files together and easier to navigate.

🪝 Where Should Custom Hooks Go?

Custom React hooks go in a dedicated hooks/ folder:

/src
  ├── hooks/
      ├── useLocalStorage.js
      └── useFetch.js

🖼 Where Should Static Assets Go?

Put logos, images, and icons in an assets/ folder:

/src
  ├── assets/
      ├── logo.png
      └── avatar.svg

You can import them like this:

import logo from '../assets/logo.png';

💡 Presentational vs Container Components (Optional Concept)

As your app grows, consider separating components into:

Presentational – focuses on how things look (UI only)
Container – handles logic, state, and data

This isn’t required, but can improve clarity in larger projects.

✍️ Challenge for You

Refactor your last form into a features/contact/ folder.
Move the form component and its styles into that folder.
Create a reusable InputField.jsx component in components/.

✅ Summary

Use folders to group related components, features, and logic.
Keep your project organized from the start.
Use components/, features/, hooks/, and assets/ for clean separation.
Structure improves teamwork, readability, and scalability.

🔜 What’s Next?

In Part 9, we’ll add React Router so your app can have multiple pages — without refreshing the browser!

You’re now thinking like a professional developer! 🧠🗂️

Part 7: Handling Forms and User Input – Controlled Components in React

Selahaddin Osmanoglu — Wed, 02 Jul 2025 08:55:44 +0000

Welcome to Part 7 of the React for Beginners series!

You've already seen how to manage state and side effects — now it’s time to handle user input and form elements in React.

Whether you're building a login page, a search bar, or a feedback form, you'll need to handle form data the React way: with controlled components.

✍️ What Is a Controlled Component?

In React, a form element is controlled when:

Its value is stored in state
Changes are handled by an onChange function

This gives React full control over form data, making validation and updates easy.

🧪 Example: Basic Text Input

import { useState } from 'react';

function NameForm() {
  const [name, setName] = useState('');

  function handleChange(e) {
    setName(e.target.value);
  }

  return (
    <div>
      <input type="text" value={name} onChange={handleChange} />
      <p>Hello, {name || 'stranger'}!</p>
    </div>
  );
}

✅ The input’s value is tied to React state. As you type, state updates, and React re-renders the result.

📨 Handling Form Submission

You’ll often want to do something when the user submits a form.

function EmailForm() {
  const [email, setEmail] = useState('');

  function handleSubmit(e) {
    e.preventDefault(); // Prevent page refresh
    alert(`Submitted: ${email}`);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        required
      />
      <button type="submit">Submit</button>
    </form>
  );
}

🧮 Handling Multiple Fields

You can use one state object to track multiple fields:

function LoginForm() {
  const [form, setForm] = useState({ username: '', password: '' });

  function handleChange(e) {
    setForm({
      ...form,
      [e.target.name]: e.target.value,
    });
  }

  return (
    <form>
      <input
        name="username"
        value={form.username}
        onChange={handleChange}
        placeholder="Username"
      />
      <input
        name="password"
        type="password"
        value={form.password}
        onChange={handleChange}
        placeholder="Password"
      />
    </form>
  );
}

🧠 The key part here: e.target.name dynamically updates the corresponding field in the object.

✅ Controlled vs Uncontrolled Components

Controlled	Uncontrolled
Value is managed via `useState`	Value is stored in the DOM
You read/update input via React state	You read input using `ref`
Preferred for most React applications	Useful in rare cases or for quick forms

🧩 Bonus: Simple Validation

You can add inline validation like this:

{email && !email.includes('@') && <p style={{ color: 'red' }}>Invalid email</p>}

Or use HTML built-in validation with required, minLength, etc.

✍️ Challenge for You

Create a ContactForm component:

Fields: name, email, message
Show a thank-you message on submit
Validate that all fields are filled

✅ Summary

Use useState to control form fields.
Tie value and onChange to React state.
Use onSubmit to handle form submissions.
Track multiple fields with one state object if needed.

🔜 What’s Next?

In Part 8, we’ll look at how to structure your React projects, organize components, and separate concerns in larger apps.

You’ve just learned one of the most practical React skills — forms are everywhere! 🧾

Part 6: useEffect and Side Effects – React Beyond Rendering

Selahaddin Osmanoglu — Wed, 02 Jul 2025 08:45:44 +0000

Welcome to Part 6 of the React for Beginners series!

Up to this point, your components have been all about rendering and local interactions. But what if your component needs to:

Fetch data from an API?
Set up a timer or subscription?
Manipulate the DOM manually?

That’s where side effects and the useEffect hook come in.

💡 What Is a Side Effect?

A side effect is anything your component does outside the scope of rendering.

Examples:

Data fetching
Logging
Subscribing to events
Directly changing the DOM
Setting timeouts/intervals

React provides the useEffect hook for handling these safely.

🔧 Basic useEffect Syntax

import { useEffect } from 'react';

useEffect(() => {
  // Do something (the side effect)
}, []);

The function runs after the component renders.
The empty array ([]) means it only runs once (on mount).

🧪 Example: Log When Component Loads

import { useEffect } from 'react';

function Logger() {
  useEffect(() => {
    console.log('Component mounted!');
  }, []);

  return <p>Check the console!</p>;
}

📝 The message only logs once when the component first appears.

📡 Example: Fetch Data from an API

import { useEffect, useState } from 'react';

function PostList() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts?_limit=5')
      .then((res) => res.json())
      .then((data) => setPosts(data));
  }, []);

  return (
    <div>
      <h2>Latest Posts</h2>
      <ul>
        {posts.map((p) => (
          <li key={p.id}>{p.title}</li>
        ))}
      </ul>
    </div>
  );
}

✅ This fetches and displays 5 posts only once when the component mounts.

🔁 Re-running useEffect

Add values to the array to re-run the effect when they change:

useEffect(() => {
  console.log('Count changed:', count);
}, [count]);

This runs the effect every time count changes.

❌ Cleanup with return()

Some side effects need cleanup, like intervals or event listeners:

useEffect(() => {
  const id = setInterval(() => {
    console.log('Tick');
  }, 1000);

  return () => clearInterval(id); // Clean up on unmount
}, []);

✅ This avoids memory leaks or unwanted behavior.

⚠️ Common Mistakes to Avoid

Don’t use async directly in useEffect — use an inner async function.
Avoid unnecessary re-renders by controlling your dependencies in the array.
Always clean up effects that leave things running (e.g., intervals, subscriptions).

✍️ Challenge for You

Create a RandomUser component:

On load, fetch a random user from https://randomuser.me/api/
Display their name and picture.
Show a loading message while fetching.

✅ Summary

useEffect lets you perform side effects after a render.
It replaces lifecycle methods like componentDidMount in class components.
Use dependency arrays to control when it runs.
Clean up effects when necessary using return() inside useEffect.

🔜 What’s Next?

In Part 7, we’ll learn how to handle user input and forms using controlled components.

You're now ready to work with real-world APIs and asynchronous code! 🚀

Part 5: Managing Component State – Lifting State and Data Flow

Selahaddin Osmanoglu — Wed, 02 Jul 2025 08:36:38 +0000

Welcome to Part 5 of the React for Beginners series!

In the last part, we learned how to render lists. Now let’s talk about how to share data between components and how to manage it in a clean and predictable way.

This post introduces a powerful concept: lifting state up.

🔄 One-Way Data Flow in React

React follows a simple principle:

Data flows down from parent to child components via props.

If a parent has state, it can pass it down to children. But children can’t directly change the parent’s state.

Let’s explore how this works.

🧪 Example: Two Sibling Components Need Shared State

Suppose we want:

An input component where a user types a name
A display component that shows the current name

These are sibling components. But they need to share the same state.

🧠 Lifting State Up

The solution is to:

Store the state in the common parent
Pass the state and updater function down via props

Let’s build it!

`NameInput.jsx`

function NameInput({ name, setName }) {
  return (
    <input
      type="text"
      value={name}
      onChange={(e) => setName(e.target.value)}
      placeholder="Enter your name"
    />
  );
}

export default NameInput;

`NameDisplay.jsx`

function NameDisplay({ name }) {
  return <p>Hello, {name || 'stranger'}!</p>;
}

export default NameDisplay;

`App.jsx`

import { useState } from 'react';
import NameInput from './NameInput';
import NameDisplay from './NameDisplay';

function App() {
  const [name, setName] = useState('');

  return (
    <div>
      <h1>Lifting State Up</h1>
      <NameInput name={name} setName={setName} />
      <NameDisplay name={name} />
    </div>
  );
}

export default App;

✅ Now both components stay in sync by using the same state from their parent.

🚫 The Prop Drilling Problem (Preview)

When you pass state through many levels of components, it can become messy.

This is called prop drilling.

You’ll see this in larger apps, and we’ll solve it later with Context or state management libraries (covered in Part 11).

✍️ Challenge for You

Create a TemperatureConverter component:

An input field where users enter a Celsius temperature.
A sibling component that shows the value in Fahrenheit.
Store the state in the parent and pass it down.

(Hint: °F = °C × 1.8 + 32)

✅ Summary

React uses one-way data flow: parents pass data to children via props.
To share state between components, lift the state up to their common parent.
Pass both the state and updater function as props.

🔜 What’s Next?

In Part 6, we’ll explore useEffect and side effects — perfect for fetching data, timers, and more.

You're now thinking like a React developer! 🧠⚛️

Part 4: Rendering Lists – Displaying Multiple Items in React

Selahaddin Osmanoglu — Wed, 02 Jul 2025 08:23:38 +0000

Welcome to Part 4 of the React for Beginners series!

Now that you’ve learned about state and events, let’s move on to something you’ll do often in real-world apps: rendering lists of data.

Think of:

Showing a list of users
Displaying todo items
Rendering cards for blog posts

React makes this easy with .map().

📦 The `.map()` Method

.map() is a JavaScript array method that transforms each item in an array.

Example:

const fruits = ['apple', 'banana', 'cherry'];
fruits.map((fruit) => <p>{fruit}</p>);

This turns your array into a list of JSX elements.

🧪 Example: Displaying a List of Names

function NameList() {
  const names = ['Alice', 'Bob', 'Charlie'];

  return (
    <div>
      <h2>Guest List</h2>
      <ul>
        {names.map((name, index) => (
          <li key={index}>{name}</li>
        ))}
      </ul>
    </div>
  );
}

export default NameList;

🔑 What’s That `key` Prop?

React uses keys to identify each item in a list. It helps React efficiently update and re-render only the changed items.

Keys should be unique and stable. Avoid using index unless you have no better choice.

💡 Better Keys with Unique IDs

Imagine you have objects like this:

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];

Then use:

{users.map((user) => (
  <li key={user.id}>{user.name}</li>
))}

✅ This is preferred over using index.

🎯 Conditional Rendering Inside Lists

You can also filter, sort, or conditionally render items:

{users
  .filter((u) => u.active)
  .map((u) => (
    <li key={u.id}>{u.name}</li>
  ))}

🧩 Component Per Item (Optional Best Practice)

If each item is complex, it’s better to use a separate component:

`UserCard.jsx`

function UserCard({ name, email }) {
  return (
    <div className="card">
      <h3>{name}</h3>
      <p>{email}</p>
    </div>
  );
}

export default UserCard;

`UserList.jsx`

import UserCard from './UserCard';

const users = [
  { id: 1, name: 'Alice', email: 'alice@example.com' },
  { id: 2, name: 'Bob', email: 'bob@example.com' },
];

function UserList() {
  return (
    <div>
      {users.map((user) => (
        <UserCard key={user.id} name={user.name} email={user.email} />
      ))}
    </div>
  );
}

export default UserList;

✍️ Challenge for You

Create a component called TodoList:

Show a list of todos (use dummy data).
Each item should include a title and status.
Bonus: highlight completed items with different styling.

✅ Summary

Use .map() to render arrays as JSX elements.
Always include a key prop with a unique, stable value.
Break items into components if they get complex.
You can chain .filter() or .sort() before .map() for more control.

🔜 What’s Next?

In Part 5, we’ll learn how to share state between components by lifting it up and understanding how data flows through a React app.

You’re well on your way to building full apps now! 🧠💪

Part 3: State and Event Handling – Making Components Interactive

Selahaddin Osmanoglu — Wed, 02 Jul 2025 08:20:12 +0000

Welcome to Part 3 of our beginner React series!

So far, you've learned about components and props. But what if your app needs to remember something or respond to user actions?

That’s where state and event handling come in.

🧠 What Is State?

State is data that a component remembers between renders.

For example:

A counter that increases
A button that toggles dark mode
A form input that shows what the user typed

React provides a built-in hook called useState to manage this.

✨ Example: Counter Component

Let’s build a simple counter to demonstrate how useState works.

`Counter.jsx`

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times.</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

export default Counter;

Key Concepts:

useState(0) sets the initial value of count to 0.
setCount is the function that updates count.
Changing state causes the component to re-render.

🎯 What Is Event Handling?

Event handling means responding to things like:

Button clicks
Form submissions
Mouse movement
Keyboard input

In React, you attach handlers like this:

<button onClick={handleClick}>Click</button>

Where handleClick is a function you define.

✅ Example: Show a Message on Button Click

import { useState } from 'react';

function ClickMessage() {
  const [message, setMessage] = useState('');

  function handleClick() {
    setMessage('You clicked the button!');
  }

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
      <p>{message}</p>
    </div>
  );
}

export default ClickMessage;

🔁 Conditional Rendering with State

You can conditionally show parts of the UI based on state:

{isVisible && <p>Hello, world!</p>}

Or use a ternary:

<p>{isLoggedIn ? 'Welcome!' : 'Please log in'}</p>

✍️ Challenge for You

Create a component called LikeButton:

It should show “You liked this!” after clicking.
It should toggle between "Like" and "Unlike" buttons.
Try adding a count of likes if you’re feeling adventurous!

✅ Summary

useState lets components remember and update data.
Updating state triggers a re-render.
Event handlers (like onClick) let you respond to user actions.
You can conditionally render JSX based on state values.

🔜 What’s Next?

In Part 4, we’ll explore how to render lists of data using .map() and learn how React keeps track of changes with keys.

You're doing great — now your components are interactive! 🎉

Part 2: Components and Props – Building Blocks of React

Selahaddin Osmanoglu — Wed, 02 Jul 2025 08:11:06 +0000

Welcome back! In Part 1, we created our first React component and explored what makes React special.

Now it’s time to dig into the heart of React: components and props.

🧱 What Is a Component?

A component is a reusable, independent piece of UI. In React, your entire app is just a tree of components.

You’ve already seen one:

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
    </div>
  );
}

But components can also nest, meaning one component can use another inside itself.

✨ Creating Your First Custom Component

Let’s say we want to show a greeting.

`Greeting.jsx`

function Greeting() {
  return <p>Welcome to my React app!</p>;
}

export default Greeting;

Now use it inside App.jsx:

`App.jsx`

import Greeting from './Greeting';

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <Greeting />
    </div>
  );
}

export default App;

✅ That’s it! You’ve now created and used a custom component.

📦 What Are Props?

Props (short for properties) are how we pass data from a parent component to a child.

Think of props as function arguments but for components.

🧪 Example: Passing a Name

Let’s improve the Greeting component so it can greet anyone.

`Greeting.jsx`

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

export default Greeting;

Now pass a name from App.jsx:

import Greeting from './Greeting';

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <Greeting name="Alice" />
    </div>
  );
}

export default App;

🗣️ Output:

Welcome, Alice!

🔍 Props Are Read-Only

You can’t modify props inside the child component. They are meant to be read-only.

If you need to modify data, use state, which we’ll cover in Part 3.

🧪 Destructuring Props

You can make your code cleaner using destructuring:

function Greeting({ name }) {
  return <p>Welcome, {name}!</p>;
}

This does the same thing, but looks cleaner and is commonly used in real-world code.

🧠 Component Nesting

You can pass and render many components together.

function App() {
  return (
    <div>
      <Header />
      <Greeting name="Jane" />
      <Greeting name="Lena" />
      <Footer />
    </div>
  );
}

Each one has its own role, just like a real app!

✍️ Challenge for You

Create a UserCard component that takes name and age as props and displays them inside a <div>.
Import and render UserCard in your App.jsx for 2–3 users.

✅ Summary

Components are reusable building blocks of a React app.
Props let you pass data into components.
You can use JSX syntax and destructuring to make components cleaner.
Props are one-way: from parent to child.

🔜 What’s Next?

In Part 3, we’ll introduce state — how your components can remember things and respond to user actions.

Stay tuned and keep building! ⚒️