Day 10: React.

js File Structure and Rendering

Flow Assignments
What We'll Learn Today:
1. React project structure (folders and files)
2. Rendering flow (from index.js to DOM)
3. Component hierarchy (parent-child relationships)
4. State and props passing through components
Assignment 1: Understanding React File Structure
Task: Analyze and understand a standard React application structure
Files You Need to Understand:

react-app/
├── node_modules/
├── public/
│ ├── index.html # HTML template for the app
│ ├── favicon.ico
│ └── manifest.json
├── src/
│ ├── index.js # Entry point file
│ ├── App.js # Root component
│ ├── components/ # Custom components folder
│ │ ├── Header.js
│ │ └── Footer.js
│ ├── assets/ # Static assets
│ │ └── logo.png
│ └── index.css # Global styles

Your Tasks:
1. Create Folder Structure:
• Set up the exact folder structure shown above
• Create empty files as placeholders
2. Understand the Purpose of Each File:
• Write comments in each file explaining its purpose
• Trace the application loading sequence
3. Document the Flow:
• Create a flowchart showing how React renders
• Show which file loads first and the sequence

Example for index.js:

// src/index.js - ENTRY POINT

// This is the first JavaScript file that runs in a React application
// It is responsible for:
// 1. Importing React and ReactDOM libraries
// 2. Importing the root component (App)
// 3. Rendering the root component to the DOM

import React from 'react';

import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);

// Flow: index.js -> imports App.js -> renders App component to 'root' element
in index.html

React Application Initialization Sequence

Import React Import App Create Root Render App

and ReactDOM Component Element Component

Assignment 2: The Rendering Flow

Task 1: Complete a Basic React Application Fill in the content for these files to create a
working React app:
1. public/index.html (basic structure)
2. src/index.js (entry point)
3. src/App.js (root component)
4. src/components/Header.js (child component)
5. src/components/Footer.js (child component)

React Application Structure

Footer.js

Header.js

App.js

index.js

index.html

What to Practice:
1. Document each file with comments showing the rendering sequence
2. Show how props are passed from App to child components
3. Import/export components correctly
4. Understand how components are rendered to the DOM

Example App.js Structure:

// src/App.js - ROOT COMPONENT

// This file is imported by index.js and serves as the main component
// It's responsible for:
// 1. Defining the main layout of the application
// 2. Importing and using child components
// 3. Managing application-level state (if needed)
// 4. Passing props to child components

import React from 'react';

import Header from './components/Header';
import Footer from './components/Footer';

function App() {
// Sample data to pass to Header component
const siteInfo = {
title: "My College Department",
department: "Computer Science"
};

return (
<div className="app">
{/* Pass siteInfo as props to Header component */}
<Header siteInfo={siteInfo} />

<main className="content">
{/* Main content goes here */}
<h1>Welcome to React</h1>
<p>This is the main content area.</p>
</main>

{/* Footer component */}

<Footer year={2023} />
</div>
);
}

export default App;

// Flow: App.js -> imports & renders Header and Footer components -> passes
props to them

App.js Component Structure and Flow

App.js

Main
Header Footer
Content

siteInfo

Task 2: Tracing Component Imports Create a diagram showing:

• Which files import other files
• How components are connected
• The data flow between components

Assignment 3: Detailed Walkthrough Documentation

Task 1: Create Documentation File Create a detailed markdown file explaining:

1. The exact order files are loaded and processed
2. How React mounts components to the DOM
3. How changes in one component affect others
4. The significance of each file in the structure

# React App Rendering Flow

## Loading Sequence
1. index.html is loaded by the browser
2. script tags load the bundled JavaScript
3. index.js runs and imports React libraries
4. index.js imports App.js
5. ReactDOM.createRoot mounts App to the 'root' div
6. App renders and imports child components
7. Child components render based on the props received

## Component Mounting Process

...

## State and Props Flow

...

Task 2: Create a Simple Counter App Create a counter app with these specific components:
• src/App.js (main component with state)
• src/components/CounterDisplay.js (display only component)
• src/components/CounterControls.js (buttons component)
Practice:
• Passing state from App to child components
• Passing callback functions to update state
• Document how state changes flow through the app
Final Project: Department Website Component Structure
Task: Create a department website with proper component hierarchy
Requirements:
1. Create this exact folder structure:

department-website/
├── public/
│ └── index.html
├── src/
│ ├── index.js
│ ├── App.js
│ ├── assets/
│ │ └── images/
│ │ └── college-logo.png
│ ├── components/
│ │ ├── layout/
│ │ │ ├── Header.js
│ │ │ ├── Footer.js
│ │ │ └── Sidebar.js
│ │ ├── pages/
│ │ │ ├── Home.js
│ │ │ ├── About.js
│ │ │ └── Courses.js
│ │ └── shared/
│ │ ├── Card.js
│ │ ├── Button.js
│ │ └── Notice.js
│ ├── data/
│ │ ├── courses.js
│ │ └── faculty.js
│ └── styles/
│ ├── global.css
2. Document Each Component's Purpose:
• Create a purpose.txt file in each folder explaining its role
• Show which components import others
3. Create a Full Rendering Flowchart:
• Starting at index.js through to the DOM
• Show how components are nested
• Show prop passing between components
4. Implement Component Skeletons:
• Create basic versions of each component
• Add comments explaining their place in the rendering sequence
• Show import/export relationships
How to Submit ✉️
1. Create a zip file with:
• All the folder structure and files
• Your flowchart (as image or PDF)
• Documentation files
2. Name your files properly:
• Use PascalCase for component files (e.g., Header.js)
• Use camelCase for non-component files (e.g., courses.js)
• Maintain proper folder structure
Marking Scheme Ὅ
We'll check:
1. Correct folder structure implementation (10 marks)
2. Proper file organization and naming (10 marks)
3. Accurate documentation of rendering flow (10 marks)
4. Correct import/export relationships (10 marks)
5. Component hierarchy understanding (10 marks)
Help Available Ἑ
Stuck somewhere?
1. Ask in WhatsApp group
2. Check React documentation on file structure
3. Review the examples in class notes
4. Contact me
Tips for Success Ὂ
1. Start Simple:
• First create the folder structure
• Then add empty files
• Fill in basic content
• Finally add detailed comments
2. Common Mistakes to Avoid:
• Incorrect import paths
• Missing default exports
• Incorrect component nesting
• Misunderstanding the rendering sequence
3. Testing:
• Verify your structure works by running the app
• Ensure components render in the expected order
• Check props are passed correctly
Remember:
• Understanding the file structure is fundamental
• The rendering flow always starts at index.js
• Components must be exported before they can be imported
• Props flow down, events flow up
Good luck! Master the React file structure! Ὠ