Week 3 - Introduction to React
Recap of Week 2 (10 minutes)
Instructor Script: "Before we dive into React, let’s quickly recap what we covered last week.
We explored ES6 features, which give us modern tools for writing cleaner and more efficient
code. For example, we saw how to use template literals to create dynamic strings easily. Here’s
a refresher on that concept:"
Example Code:
javascript
Copy code
const userName = "Alice";
const greeting = `Hello, ${userName}! Welcome to our app.`;
[Link](greeting);
Explanation:
Here, userName is a variable storing a name, and we use a template literal (the backticks ` `)
to combine this variable into a sentence. With ${userName}, JavaScript inserts the value of
userName directly into the string. This feature makes string building much easier and cleaner
compared to older methods like concatenation.
Introduction to React (15 minutes)
Instructor Script: "Today, we’re stepping into something new: React. React is a JavaScript
library for building user interfaces. Developed by Facebook, it’s designed to make creating
complex, interactive applications more efficient. React simplifies the process of updating the
DOM by using a virtual DOM, which allows changes to be reflected only where needed without
reloading the entire page. Instead of updating each part of the DOM manually, we create
components and let React manage the updates."
Example Code:
javascript
Copy code
function Welcome() {
return <h1>Hello, React World!</h1>;
}
// Example usage in an application
function App() {
return (
<div>
<Welcome />
</div>
);
}
[Link](<App />, [Link]('root'));
Explanation:
In this code, we define a React component called Welcome. Components in React are
JavaScript functions that return HTML-like code (known as JSX). Here, the Welcome function
returns a single <h1> element with the text "Hello, React World!" The App component is a
container where we can place the Welcome component, which will render the heading on the
screen. This setup demonstrates React's component-based structure, making it modular and
easy to maintain.
Discussion Questions:
1. Why would breaking UIs into components be useful?
Answer: Components provide reusability, meaning the same UI part (like a button or
form) can be used across different parts of an application. Maintainability improves as
any updates need to be made only once in the component, simplifying development.
Modularity helps break down complex UIs into manageable pieces, speeding up
development and making it easier to work on a project with multiple developers.
2. What do you think makes React popular?
Answer: React is popular because of its virtual DOM, which improves performance,
component-based architecture that simplifies code reuse, and large community
support. This popularity translates into resources, tools, and libraries, making
development faster and more accessible.
Key Concepts in React (50 minutes)
Components (20 minutes)
Instructor Script: "Components are the building blocks of React applications. Think of a
component as a self-contained, reusable piece of UI. For example, a button component can be
used multiple times with different labels or styles."
Example Code:
javascript
Copy code
// A simple button component in React
function CustomButton() {
return <button>Click Me!</button>;
}
// Using the button component within another component
function App() {
return (
<div>
<h1>My Application</h1>
<CustomButton />
<CustomButton />
</div>
);
}
[Link](<App />, [Link]("root"));
1. Explanation:
CustomButton is a simple component that returns a <button> element with the label
"Click Me!" The App component renders two instances of CustomButton, showing how
we can reuse components. This modular approach makes it easy to build complex UIs
by combining smaller, reusable parts. Each CustomButton can also be styled
differently by passing in styling or using classes.
JSX (JavaScript XML) (15 minutes)
Instructor Script: "JSX allows us to write elements that look like HTML within JavaScript, but it
can also include JavaScript expressions. For example, we can directly insert variables within
JSX to make our content dynamic."
Example Code:
javascript
Copy code
const user = "Alice";
const element = <h1>Welcome, {user}!</h1>;
function App() {
return (
<div>
{element}
</div>
);
}
[Link](<App />, [Link]("root"));
2. Explanation:
JSX lets us write HTML-like code directly in JavaScript. Here, {user} is a JavaScript
expression that gets evaluated and replaced with the value of the user variable, "Alice".
This allows us to create dynamic content by embedding JavaScript expressions within
JSX, making UIs responsive to data changes. JSX ultimately compiles down to regular
JavaScript calls, making it efficient for rendering.
Props (Properties) (15 minutes)
Instructor Script: "Props allow us to pass data into components, making them adaptable. Let’s
look at an example where a greeting component uses props to customize the greeting
message."
Example Code:
javascript
Copy code
function Greeting(props) {
return <h1>Hello, {[Link]}!</h1>;
}
// Using the Greeting component with different props
function App() {
return (
<div>
<Greeting name="Alice" />
<Greeting name="Bob" />
</div>
);
}
[Link](<App />, [Link]("root"));
3. Explanation:
Props allow us to pass information from one component to another. In this case,
Greeting takes a name prop and uses it to display a personalized message. The App
component uses Greeting twice, passing in different names each time. This makes
components versatile, as they can adapt to different data inputs, promoting flexibility and
reusability.
Hands-On Coding Activity: Creating a Basic React Component (25 minutes)
Activity: Build a simple React component that displays a personalized message using props.
Set Up: In an online editor like CodeSandbox, create a new React project.
Instructions:
● Create a new Message component that accepts name and message as props.
● Display a greeting using the provided props.
Example Code:
javascript
Copy code
function Message(props) {
return <p>{[Link]}, you have a new message: {[Link]}</p>;
}
function App() {
return (
<div>
<Message name="Alice" message="Welcome to React!" />
<Message name="Bob" message="Keep up the great work!" />
</div>
);
}
[Link](<App />, [Link]("root"));
Explanation:
In this example, Message is a component that takes two props, name and message, and
displays them in a <p> element. When we call Message in the App component, we pass in
different values for name and message, creating unique messages for each user. This shows
how components can be customized by passing in props. To further enhance it, we could add
styles or conditional rendering based on props values.
Discussion Questions and Answers
1. What’s the benefit of using props?
Answer: Props enable data to be passed into components from their parent, making
components more flexible and reusable. For example, in our Message component, we
pass name and message props, allowing us to create unique messages without
modifying the component's code each time. Props promote code reusability and keep
components adaptable to different data inputs.
2. How would you modify the component to display different messages?
Answer: To display different messages, we simply pass different values for the message
and name props each time we call the component. For example, we could change
name="Alice" to name="John" and adjust the message prop accordingly. This
flexibility is one of the main benefits of props, allowing a single component to handle
multiple unique outputs.
Conclusion and Look Ahead (5 minutes)
Instructor Script: "Today, we covered essential React concepts like components, JSX, and
props. Components break down complex UIs into manageable pieces, JSX lets us write
HTML-like syntax directly in JavaScript, and props make components flexible and reusable.
With this foundation, we’re ready to dive deeper into building more interactive applications."
"Next week, we’ll continue with React and focus on State, which allows components to manage
their own data and respond dynamically to user actions. Until then, try to practice building
different components with props and experiment with creating variations."
Homework
Prompt: Build a UserCard component that displays a user’s name, age, and location using
props.
Example Code:
javascript
Copy code
function UserCard(props) {
return (
<div style={{ border: "1px solid #ddd", padding: "10px", margin:
"10px" }}>
<h2>{[Link]}</h2>
<p>Age: {[Link]}</p>
<p>Location: {[Link]}</p>
</div>
);
}
function App() {
return (
<div>
<UserCard name="Alice" age={28} location="London" />
<UserCard name="Bob" age={35} location="India" />
</div>
);
}
[Link](<App />, [Link]("root"));
Explanation:
This example introduces simple inline styling to UserCard and showcases prop usage for
multiple details (name, age, and location), allowing you to create a more complex, reusable
component.