- 本篇笔记是根据Justin老师 Lecture 09 React Part2 的课堂内容整理的随堂笔记。
- 参考资料：https://www.canva.com/design/DAGKiaUACaE/idiqI0kjeYpwjTNXg07lSA/view?utm_content=DAGKiaUACaE&utm_campaign=designshare&utm_medium=link&utm_source=viewer
JSX is a syntax extension that looks like HTML but is used within JavaScript.
const element = <h1>Hello, world!</h1>;
console.log(element);It looks like HTML, but it’s actually JavaScript.
What are Expressions in JSX?
- In JSX, you can embed JavaScript expressions inside curly braces { }.
- Expressions include variables, function calls, conditional logic, and more.
Embedding Variables
const name = "Alice";
function Greeting() {
return <h1>Hello, {name}!</h1>;
}Embedding Function Calls
function formatName(user) {
return user.firstName + " " + user.lastName;
}
const user = { firstName: "Alice", lastName: "Johnson" };
function Greeting() {
return <h1>Hello, {formatName(user)}!</h1>;
}Embedding Math Expressions
const a = 10;
const b = 20;
function MathExample() {
return <h1>{a} + {b} = {a + b}</h1>;
}Embedding Conditional Logic (with &&)
const isLoggedIn = true;
function Greeting() {
return (
<div>
{isLoggedIn && <h1>Welcome back!</h1>}
</div>
);
}Embedding Arrays with .map()
const courses = ["React", "JavaScript", "TypeScript"];
function CourseList() {
return (
<ul>
{courses.map((course) => <li key={course}>{course}</li>)}
</ul>
);
}Embedding Objects (JSON)
const course = {
title: "React for Beginners",
level: "Beginner"
};
function CourseDetails() {
return (
<div>
<h2>{course.title}</h2>
<p>Level: {course.level}</p>
</div>
);
}什么是条件渲染？
在 React 中，你可以根据某些条件渲染不同的 UI 元素或组件。
你可以使用 JavaScript 操作符，比如 if、else 和三元运算符。
const name = "John";
const isLoggedIn = true;
function Greeting() {
return (
<div>
<h1>Hello, {name}!</h1>
<p>{isLoggedIn ? "Welcome back!" : "Please sign in."}</p>
</div>
);
}三元运算符是编写 JavaScript 中 if-else 语句的简写方式。
简化代码：使代码更加简洁，易于阅读。
内联条件渲染：它允许直接在 JSX 中进行条件渲染，而不会打断代码的流 畅性。
- In React, you can style components using inline styles, CSS classes, or external style sheets.
- Inline styles are applied directly in the JSX using a style attribute.
- Inline styles in JSX are written as JavaScript objects.
- Properties use camelCase instead of kebab-case (e.g., backgroundColor instead of background-color).
Inline Styling Syntax
function StyledComponent() {
const style = {
backgroundColor: 'lightblue',
padding: '10px',
fontSize: '20px'
};
return (
<div style={style}>
这是一个带样式的组件!
</div>
);
}Dynamic Styling
function DynamicStyledComponent(props) {
const style = {
backgroundColor: props.isActive ? 'green' : 'red',
color: 'white',
padding: '10px'
};
return (
<div style={style}>
{props.isActive ? '激活' : '未激活'}
</div>
);
}- Props (short for "properties") are how you pass data from a parent component to a child component in React.
- They allow us to make components reusable and dynamic by customizing them with different data.
- Components need to be flexible. Instead of hardcoding different values in each component, we can pass the data as props.
- This is useful for displaying different courses using the same component structure.
- Think of a card template that shows different courses. The card itself stays the same, but the content changes.
- Props are passed from parent components to child components.
- Props are read-only in the child component.
- A parent component provides the data (like course title or number of
lessons), and the child component renders it.
Code Example
- State is a special object that allows React components to manage data that changes over time.
- Unlike props, which are passed from a parent, state is internal to a component.
Think of state as the "memory" of a component that holds data that can change during the user interaction.
- State helps us track and respond to changes, such as user actions (e.g., clicking a button).
- It allows us to update the UI dynamically based on the current data, for example, changing the text of a button after a user enrolls in a course.
- Real-life Example: In our MOOC CourseCard, state will store whether a user has enrolled in a course and dynamically update the button text.
- useState Hook: In functional components, we use the useState hook to declare state.
- Updating State: The useState hook provides a setter function to update the state.
- Reactivity: When state changes, the component re-renders to reflect the updated data.
- useState creates a piece of state inside a functional component.
- It gives you two things:
- The current state (the value you want to track).
- A function to update that state (when you want to change the value).
useState Hook Syntax
const [stateVariable, setStateFunction] = useState(initialValue);- stateVariable：当前状态的值。这是你想要跟 踪的数据。
- setStateFunction：用于更改状态值的函数。
- initialValue：组件首次加载时，状态的初始 值。
- Hooks are functions that allow you to use state and other React features in functional components.
- useState is one of the most common hooks. It allows you to add state (data that can change) to your functional components.
- Declaring state
const [stateVariable, setStateFunction] = useState(initialValue);- Updating State
function handleEnroll() {
setIsEnrolled(true);
}- Using State in the UI
<button onClick={handleEnroll}>
{isEnrolled ? 'Enrolled!' : 'Enroll Now'}
</button>import React, { useState } from 'react';
function CourseCard(props) {
// Step 1: Use the useState hook to declare the state variable and update function.
// 'isEnrolled' holds the current state, and 'setIsEnrolled' is used to update it.
const [isEnrolled, setIsEnrolled] = useState(false);
// Step 2: Define an event handler function that updates the state when the button is clicked.
const handleEnroll = () => {
// Step 3: Call the setter function to update the state.
setIsEnrolled(true);
};
return (
<div className="course-card">
<h2>{props.title}</h2>
<p>{props.description}</p>
<p>课时数: {props.lessons}</p>
{/* Step 4: Render the button text conditionally based on the value of 'isEnrolled'. */}
<button onClick={handleEnroll}>
{isEnrolled ? '已报名！' : '立即报名'}
</button>
</div>
);
}
export default CourseCard;步骤说明：
- 声明状态: 我们使用 useState 钩子声明 isEnrolled 和 setIsEnrolled。初始值 isEnrolled 为 false，表示用户尚未报名。
- 定义事件处理函数: handleEnroll 函数负责 在按钮点击时改变状态。
- 更新状态: 在 handleEnroll 中，我们调用 setIsEnrolled(true) 来更新状态，这会触发组件的重新渲染。
- 条件渲染: 我们使用 isEnrolled 状态来更改按钮的文本。如果用户已报名 (isEnrolled === true)，按钮显示“已报名！”；否则，显示“立即报名”。