|
| 1 | +/* |
| 2 | + Lab 6 — App.js |
| 3 | + ============== |
| 4 | + React lets you build UIs with "components". |
| 5 | + A component is just a JavaScript FUNCTION that returns JSX. |
| 6 | +
|
| 7 | + Python vs React: |
| 8 | +
|
| 9 | + Python function React component |
| 10 | + ───────────────────── ───────────────────────────────── |
| 11 | + def greet(name): function Greet({ name }) { |
| 12 | + return f"Hi {name}" return <p>Hi {name}</p>; |
| 13 | + } |
| 14 | +
|
| 15 | + JSX = HTML written inside JavaScript. It looks like HTML but lives in a .js file. |
| 16 | + Rule: use className instead of class (class is a reserved word in JS) |
| 17 | +
|
| 18 | + ── How to read this file ──────────────────────────────────────────────── |
| 19 | + Start at the BOTTOM where App() and root.render() are. |
| 20 | + → App renders ProfileCard |
| 21 | + → ProfileCard renders SkillBadge (once per skill) |
| 22 | + → Each component returns JSX that becomes real HTML in the browser |
| 23 | + ───────────────────────────────────────────────────────────────────────── |
| 24 | +*/ |
| 25 | + |
| 26 | + |
| 27 | +// ── Component 1: SkillBadge ─────────────────────────────────────────────── |
| 28 | +// |
| 29 | +// This component shows ONE skill pill badge. |
| 30 | +// { skill } is a "prop" — data passed in from the parent (ProfileCard below). |
| 31 | +// |
| 32 | +// Vanilla JS way: React way: |
| 33 | +// <span>HTML</span> <SkillBadge skill="HTML" /> |
| 34 | + |
| 35 | +function SkillBadge({ skill }) { |
| 36 | + return ( |
| 37 | + // TODO 1: Replace ___ with {skill} to display the prop text inside the badge. |
| 38 | + // In JSX, use curly braces { } to insert any JavaScript value. |
| 39 | + // Example: <span className="badge">{someVariable}</span> |
| 40 | + <span className="badge">___</span> |
| 41 | + ); |
| 42 | +} |
| 43 | + |
| 44 | + |
| 45 | +// ── Component 2: ProfileCard ────────────────────────────────────────────── |
| 46 | +// |
| 47 | +// This component shows the full card: name, bio, skill badges, and a like button. |
| 48 | +// It receives two props from App: { name } and { bio }. |
| 49 | + |
| 50 | +function ProfileCard({ name, bio }) { |
| 51 | + |
| 52 | + // TODO 2: Add the starting number inside React.useState( ___ ). |
| 53 | + // useState lets the component remember the like count across clicks. |
| 54 | + // Start it at 0. |
| 55 | + // |
| 56 | + // React.useState(0) returns an array: [currentValue, setterFunction] |
| 57 | + // const [likes, setLikes] = React.useState(0); |
| 58 | + // → likes = current number (starts at 0) |
| 59 | + // → setLikes = function that updates the number and re-renders |
| 60 | + const [likes, setLikes] = React.useState(___); |
| 61 | + |
| 62 | + // These are the skill badges to display — already set up for you! |
| 63 | + const skills = ["HTML", "CSS", "JavaScript", "React"]; |
| 64 | + |
| 65 | + return ( |
| 66 | + <div className="card"> |
| 67 | + |
| 68 | + {/* TODO 3: Show the name prop inside an <h2> tag. |
| 69 | + Hint: <h2>{name}</h2> |
| 70 | + (Replace ___ with the right JSX expression) */} |
| 71 | + <h2>___</h2> |
| 72 | + |
| 73 | + <p className="bio">{bio}</p> |
| 74 | + |
| 75 | + {/* Skills — already complete. Notice: |
| 76 | + .map() loops over the array and returns one SkillBadge per item. |
| 77 | + key= is required by React to track each item in a list. */} |
| 78 | + <div className="skills"> |
| 79 | + {skills.map(skill => ( |
| 80 | + <SkillBadge key={skill} skill={skill} /> |
| 81 | + ))} |
| 82 | + </div> |
| 83 | + |
| 84 | + {/* TODO 4: Make the button increase likes by 1 when clicked. |
| 85 | + onClick in JSX works like addEventListener("click", ...) in vanilla JS. |
| 86 | +
|
| 87 | + Vanilla JS: button.addEventListener("click", function() { count++ }) |
| 88 | + JSX: <button onClick={() => setLikes(likes + 1)}> |
| 89 | +
|
| 90 | + Replace ___ with the correct onClick handler. |
| 91 | + Hint: onClick={() => setLikes(likes + 1)} */} |
| 92 | + <button className="like-btn" onClick={___}> |
| 93 | + ❤️ {likes} |
| 94 | + </button> |
| 95 | + |
| 96 | + </div> |
| 97 | + ); |
| 98 | +} |
| 99 | + |
| 100 | + |
| 101 | +// ── Component 3: App ────────────────────────────────────────────────────── |
| 102 | +// |
| 103 | +// App is the ROOT component — the starting point of the whole page. |
| 104 | +// It renders ProfileCard and passes YOUR info as props. |
| 105 | + |
| 106 | +function App() { |
| 107 | + return ( |
| 108 | + <div> |
| 109 | + <h1>Lab 6 — My First React App</h1> |
| 110 | + |
| 111 | + {/* TODO 5: Replace both ___ with YOUR real name and a short one-sentence bio. |
| 112 | + Props work like HTML attributes: name="Sunney" bio="..." |
| 113 | + The ProfileCard component will receive them as { name } and { bio }. */} |
| 114 | + <ProfileCard |
| 115 | + name="___" |
| 116 | + bio="___" |
| 117 | + /> |
| 118 | + |
| 119 | + </div> |
| 120 | + ); |
| 121 | +} |
| 122 | + |
| 123 | + |
| 124 | +// ── Render ───────────────────────────────────────────────────────────────── |
| 125 | +// This is how React connects to your HTML. |
| 126 | +// It finds <div id="root"> in index.html and puts the App component inside it. |
| 127 | +const root = ReactDOM.createRoot(document.getElementById("root")); |
| 128 | +root.render(<App />); |
0 commit comments