Lesson 2.2 - Components, JSX, and Props
- Definition: Functions that return UI elements to be rendered
- Key Characteristics:
- Independent and reusable
- Can return HTML through JSX
- Start with capital letters
- Can be used multiple times, each use being an instance
- Definition: Syntax extension for JavaScript, allowing UI structuring with a syntax similar to XML/HTML.
- Key Characteristics:
- Use
className
instead of class
- Components are self-closing (like
<Component />
)
- Place JavaScript within curly braces
{}
- Only one root HTML element per component
- Definition: Arguments passed into React components
- Key Characteristics:
- Allow dynamic data pass between components
- Make components reusable
- Defined as attributes in component tags (e.g.,
<Component prop="value" />
)
- Accessed within components as
props.propName
π Quick Code Reference
Basic React Component with Props
import React from "react";
function GreetByName(props) {
return <div>Hello {props.name}!</div>;
}
function App() {
return (
<div className="App">
<GreetByName name="Jared" />
</div>
);
}
export default App;
Passing and Accessing Multiple Props
function Greet(props) {
return <div>Hello {props.firstName} {props.lastName}!</div>;
}
function App() {
return (
<div>
<Greet firstName="Jane" lastName="Doe" />
</div>
);
}
π Additional Resources