<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id = "root"></div>
<script type = "text/babel">
class App extends React.Component{
render() {
return <ul>
<Item value = "Item 1"/>
<Item value = "Item 12"/>
<Item value = "Item 123"/>
</ul>
}
}
class Item extends React.Component{
constructor(props){
super(props)
}
render(){
return <li>{this.props.value}</li>
}
}
const container = document.getElementById('root')
ReactDOM.render(<App/>, container)
</script>
</body>
</html>### Key Components of the Application
- **React and ReactDOM Libraries**: The application uses React for building the user interface and ReactDOM for rendering the UI components into the DOM. The Babel standalone library is included to compile JSX syntax in the browser.
- **`App` Component**:
- Serves as the root component of this simple application.
- Renders a `<ul>` element containing three `<Item>` components.
- Each `<Item>` component receives a `value` prop, which is a string representing the item's content.
- **`Item` Component**:
- Receives props from its parent component (`App`).
- Renders a `<li>` element displaying the `value` prop it receives.
### How It Works
1. **Component Structure**: The `App` component acts as a container that lists multiple `Item` components. Each `Item` component represents a list item and is responsible for displaying the data it receives through props.
2. **Props Passing**: The `App` component passes different strings as `value` props to each `Item` component. This demonstrates the basic concept of props in React, which are used to pass data from parent to child components.
3. **Rendering**: The `ReactDOM.render` function call at the bottom of the script is used to render the `App` component within the `<div id="root"></div>` element in the DOM. This is the entry point of the React application, and it's where the React component hierarchy starts.
### Constructor in `Item` Component
- The constructor in the `Item` component explicitly calls `super(props)` but doesn't do anything else. While it's necessary to call `super(props)` when you need to access `this.props` in the constructor, in this case, the constructor could be omitted entirely since the `Item` component does not use the constructor for any additional initialization. React automatically sets `props` on the instance, so you can access `this.props` in other lifecycle methods without declaring a constructor.
### Conclusion
This example is a straightforward demonstration of using React components to build a list UI, showcasing fundamental concepts such as component composition and props. It's a foundational pattern in React applications, allowing for the creation of more complex and dynamic interfaces by composing components and passing data between them.
'개념 > React' 카테고리의 다른 글
| React Component) Component array (0) | 2025.01.09 |
|---|---|
| React Component) component property (0) | 2025.01.08 |
| React Component) format output (0) | 2025.01.06 |
| React Component) item Component (0) | 2025.01.05 |
| React Component) react site script (0) | 2025.01.04 |