Abdul Fadiga

Posted on Mar 11

React Js

#react #javascript #tutorial #beginners

ReactJS Master Lesson Plan: Days 1 & 2

Audience: Interns transitioning from Vanilla JS to React.
Goal: Build a mental model of React, set up a local environment, understand JSX/architecture, and build reusable components using props.

🟢 PART 1: The Theory & Foundations (approx. 45 mins)

Module 1: The History of React

Tutor Script / Key Talking Points:

The Problem: Back in 2011, Facebook’s codebase was massive. Features like the newsfeed and chat were becoming incredibly difficult to maintain using traditional Vanilla JavaScript and DOM manipulation. UI updates were creating "cascading updates" (spaghetti code) that were buggy and slow.
The Solution: A Facebook engineer named Jordan Walke created React (initially called FaxJS). It was first deployed on Facebook's newsfeed in 2011 and Instagram in 2012.
Open Source: In 2013, Facebook open-sourced React to the world. It completely revolutionized how developers thought about frontend development by introducing Components and Declarative UI.

Module 2: What is React? (Library vs. Framework)

Tutor Script / Key Talking Points:

Definition: React is a JavaScript library for building user interfaces.
Library vs. Framework:
- Framework (e.g., Angular): Like buying a fully furnished house. It gives you all the tools (routing, state, HTTP clients) but forces you to work its way.
- Library (React): Like buying a plot of land and building materials. React only cares about the UI (the "View" in MVC). You have the freedom to choose your own tools for routing or state management.
Declarative UI: In Vanilla JS (Imperative), you tell the browser exactly how to do things step-by-step (document.createElement, element.classList.add, element.appendChild). In React (Declarative), you just describe what the UI should look like in a specific state, and React handles the DOM updates for you.

Module 3: Advantages of React Over Other Frameworks

Tutor Script / Key Talking Points:

The Virtual DOM: This is React's superpower. The real Browser DOM is heavy and slow to update. React creates a lightweight, "virtual" copy of the DOM in memory. When data changes, React updates the Virtual DOM, compares it to the real DOM (a process called Diffing), and only updates the exact pixels that changed on the screen (Reconciliation). This makes it incredibly fast.
Component-Based Architecture: You build isolated, reusable pieces of UI (like Lego blocks). A NavBar, a Button, and a Footer are all components.
Huge Ecosystem & Community: Because it's the most popular UI library, there is an NPM package for almost anything you need to do, and millions of community answers for troubleshooting bugs.

🟡 PART 2: Project Setup & Architecture (approx. 30 mins)

Module 4: Setting Up the Environment

Tutor Action: Have interns open their terminals and follow along.

Explain that we use Vite instead of the older Create-React-App. Vite is a modern, lightning-fast build tool.

Run the initialization command together:

npm create vite@latest intern-react-week2 -- --template react

Navigate into the folder, install dependencies, and start the server:
```
cd intern-react-week2
npm install
npm run dev
```
Have them open http://localhost:5173 in their browser to verify the Vite starter page is running.

Module 5: Explaining the Folder Structure

Tutor Action: Have them open the project in VS Code. Walk through the file tree.

node_modules/: The "black hole" where all downloaded packages live. Never edit files here, and never commit this to GitHub.
package.json: The "blueprint" of the app. It lists your dependencies (like React) and scripts (like npm run dev).
public/: Where you put static assets (like a favicon) that don't need to be processed by Vite.
src/: The brain of the app! This is where we will write 99% of our code.
- main.jsx: The entry point. It grabs the root HTML element and injects React into it.
- App.jsx: The "Root" component. Everything we build will eventually be nested inside here.

Module 6: Demystifying JSX

Tutor Script / Key Talking Points:

What is it? JSX stands for JavaScript XML. It allows us to write HTML directly inside our JavaScript files.
The 3 Golden Rules of JSX:
1. Return a single parent element: A component can't return two sibling <div>s. Wrap them in one parent <div> or an empty fragment <> </>.
2. Use className instead of class: Because class is a reserved keyword in JavaScript, React uses className for CSS styling.
3. JavaScript in HTML: You can inject dynamic JavaScript directly into the HTML using curly braces {}.

🔵 PART 3: Day 1 Hands-On Task - First Component (approx. 20 mins)

Goal: Clean the boilerplate and fulfill the Day 1 task.

Clean Up: Go to src/App.jsx. Delete everything inside and replace it with this empty shell. Also, clear all code out of src/App.css.

// src/App.jsx
function App() {
  return (
    <div>
      {/* Our Welcome component will go here */}
    </div>
  )
}
export default App;

Create the Component:
- Create a new folder: src/components/.
- Create a file inside: Welcome.jsx (Note: Emphasize Capitalization for React components).

Write the Welcome Component (Day 1 Task Requirement):

// src/components/Welcome.jsx
function Welcome() {
  return (
    <div>
      <h1>Hello, World! My name is [Intern's Name]</h1>
    </div>
  );
}
export default Welcome;

Render It: Go back to App.jsx, import the component, and render it.

// src/App.jsx
import Welcome from './components/Welcome';

function App() {
  return (
    <div>
      <Welcome />
    </div>
  )
}
export default App;

GitHub Push: Have them initialize Git, commit, create a repo on GitHub, and push their Day 1 work.

🟣 PART 4: Day 2 Hands-On Task - Props & Reusability (approx. 45 mins)

Goal: Introduce Props, build a dynamic ProfileCard, and render 3 unique instances.

Module 7: Understanding Props

Tutor Script / Key Talking Points:

"Right now, our Welcome component is static. It always says the same name. But remember, React is about reusable Lego blocks. How do we pass custom data to a component? We use Props (short for properties)."
"Props are like arguments passed into a regular JavaScript function. They allow data to flow down from a Parent component (like App.jsx) to a Child component (like ProfileCard)."
"Crucial rule: Props are read-only. A child component cannot change the props it was given."

Module 8: Building the ProfileCard

In src/components/, create ProfileCard.jsx.

Write the component, destructuring the props as requested in the syllabus (name, jobTitle, bio, and the bonus avatarUrl).

// src/components/ProfileCard.jsx
function ProfileCard({ name, jobTitle, bio, avatarUrl }) {

  // A little inline CSS to make it look like a card
  const cardStyle = {
    border: '1px solid #ccc',
    borderRadius: '10px',
    padding: '20px',
    margin: '10px',
    width: '250px',
    textAlign: 'center',
    boxShadow: '0 4px 8px rgba(0,0,0,0.1)'
  };

  return (
    <div style={cardStyle}>
      {/* Bonus: Rendering the avatar image */}
      <img 
        src={avatarUrl} 
        alt={`${name}'s avatar`} 
        style={{ width: '100px', borderRadius: '50%' }} 
      />
      <h2>{name}</h2>
      <h4 style={{ color: 'gray' }}>{jobTitle}</h4>
      <p>{bio}</p>
    </div>
  );
}

export default ProfileCard;

Module 9: Rendering Multiple Unique Instances

Go back to src/App.jsx.

Import ProfileCard and render three different versions of it, passing in the custom data as props. Provide them with pravatar.cc or dicebear.com links for the random avatar images.

// src/App.jsx
import ProfileCard from './components/ProfileCard';

function App() {
  // Flex container to display cards side-by-side
  const appStyle = {
    display: 'flex',
    justifyContent: 'center',
    flexWrap: 'wrap',
    padding: '20px'
  };

  return (
    <div style={appStyle}>
      {/* Instance 1 */}
      <ProfileCard 
        name="Alice Johnson"
        jobTitle="Frontend Developer"
        bio="Loves crafting beautiful UI with React and Tailwind."
        avatarUrl="https://i.pravatar.cc/150?img=5"
      />

      {/* Instance 2 */}
      <ProfileCard 
        name="Bob Smith"
        jobTitle="Backend Engineer"
        bio="Database wizard and API architecture expert."
        avatarUrl="https://i.pravatar.cc/150?img=11"
      />

      {/* Instance 3 */}
      <ProfileCard 
        name="Charlie Davis"
        jobTitle="Product Manager"
        bio="Passionate about agile workflows and user experience."
        avatarUrl="https://i.pravatar.cc/150?img=12"
      />
    </div>
  );
}

export default App;

Module 10: Wrap up & Q&A

Have the interns look at their browsers. Point out the power of what they just did: They only wrote the HTML structure for the card ONE time, but they generated three entirely unique UI elements. This perfectly illustrates the "Component-Based Architecture" talked about in Module 3.
Have them commit and push their Day 2 code to their GitHub repos to complete the syllabus deliverable.

DEV Community

React Js

ReactJS Master Lesson Plan: Days 1 & 2

🟢 PART 1: The Theory & Foundations (approx. 45 mins)

Module 1: The History of React

Module 2: What is React? (Library vs. Framework)

Module 3: Advantages of React Over Other Frameworks

🟡 PART 2: Project Setup & Architecture (approx. 30 mins)

Module 4: Setting Up the Environment

Module 5: Explaining the Folder Structure

Module 6: Demystifying JSX

🔵 PART 3: Day 1 Hands-On Task - First Component (approx. 20 mins)

🟣 PART 4: Day 2 Hands-On Task - Props & Reusability (approx. 45 mins)

Module 7: Understanding Props

Module 8: Building the ProfileCard

Module 9: Rendering Multiple Unique Instances

Module 10: Wrap up & Q&A

Top comments (0)