My React Learning - Day [XI] (Component Drill, useEffect, CSS, JSON Handling)

#programming #javascript #react #learning

Hello Coders!!

Today I learned some very useful and important concepts in React which are helpful to build real projects easily. Let me share them in simple words.

1.Component Drilling

In React, when I want to pass data from Parent to Child components, we use props.
But when data needs to go deeply (Parent → Child → Grandchild...), this process is called Component Drilling.

Example:

function Parent() {
  const msg = "Hello from Parent";
  return <Child message={msg} />;
}

function Child({ message }) {
  return <GrandChild message={message} />;
}

function GrandChild({ message }) {
  return <p>{message}</p>;
}

Data passed from Parent → Child → Grandchild.

2.useEffect Hook

I also learned about useEffect. It runs side-effects like fetching data, changing the title, etc.

Example:

import { useEffect } from 'react';

function Demo() {
  useEffect(() => {
    console.log("Component Mounted");
  }, []);

  return <h1>useEffect Example</h1>;
}

Here, the message runs only once when the component loads.

3.Writing CSS in React

I understood 3 ways to add CSS:

1.Inline CSS:

const style = { color: 'red' };
<h1 style={style}>Hello CSS</h1>

2.External CSS file:

import './App.css';

3.CSS Modules (for component-level styling):

import styles from './App.module.css';
<h1 className={styles.heading}>CSS Module</h1>

4.Creating & Connecting JSON File

I learned how to create a simple JSON file inside React project:

data.json:

[
  { "id": 1, "name": "Sathish" },
  { "id": 2, "name": "React" }
]

How to use JSON in a component:

import data from './data.json';

function DataComponent() {
  return (
    <div>
      {data.map(item => (
        <p key={item.id}>{item.name}</p>
      ))}
    </div>
  );
}

JSON data shown in the component properly.

5.Component - Connected to JSON - Output

In today's class example — we created only one component, imported JSON file, used map() function to display data on screen. Simple and clear output.

End of the Day:

Today's session helped me understand how data moves between components, how to handle side-effects using useEffect, how to write CSS in React, and how to connect JSON files to React components — these are real project basics. I feel more confident to build small apps now!!

Keep calm and code on...!!

DEV Community

My React Learning - Day [XI] (Component Drill, useEffect, CSS, JSON Handling)

Top comments (0)