<!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 />
<Item />
<Item />
</ul>
}
}
class Item extends React.Component {
render() {
return <li>test Component</li>
}
}
const container = document.getElementById('root')
ReactDOM.render(<App/>, container)
</script>
</body>
</html>### Key Concepts Illustrated
- **React Component Structure**: Shows how to define React components using ES6 class syntax. Each component extends `React.Component` and implements a `render` method that returns JSX, a syntax extension for JavaScript that allows you to write HTML tags in JavaScript.
- **Parent-Child Component Relationship**: Demonstrates the relationship between parent and child components in React. The `App` component acts as a container that includes multiple `Item` components, showcasing how components can be nested within one another to build complex UIs.
- **JSX Rendering**: Illustrates how JSX is used to describe the UI that a component should produce. When React sees a user-defined component like `<Item />`, it passes JSX attributes and children to that component as a single object called `props`.
- **ReactDOM Rendering**: Uses `ReactDOM.render` to render the `App` component into the DOM. This is the React way of updating the DOM to match the React elements.
### Practical Implications
This example is a basic demonstration of component-based architecture in React, emphasizing component reusability and composition. In a more complex application, each `Item` component could be passed different data via props, allowing for a dynamic list of items with different content.
### Considerations for Further Development
- **Props for Dynamic Content**: To make the list dynamic, `props` could be passed to the `Item` components, allowing each instance of `Item` to render different content based on the data it receives.
```
class Item extends React.Component {
render() {
return <li>{this.props.content}</li>;
}
}
```
And in the `App` component:
```
render() {
const items = ['Item 1', 'Item 2', 'Item 3'];
return (
<ul>
{items.map((item, index) => <Item key={index} content={item} />)}
</ul>
);
}
```
- **Keys in Lists**: When rendering lists of elements in React, it's important to include a unique `key` prop for each list item. This helps React identify which items have changed, are added, or are removed, which can significantly improve performance and prevent bugs during updates.
- **State Management**: For more interactive applications, state management can be introduced to dynamically update the list based on user input or other actions.
This document effectively demonstrates foundational React concepts in a concise and clear manner, providing a solid starting point for understanding and building more complex React applications.
'개념 > React' 카테고리의 다른 글
| React Component) component property (0) | 2025.01.08 |
|---|---|
| React Component) confirm of propertype to item Component (1) | 2025.01.07 |
| React Component) format output (0) | 2025.01.06 |
| React Component) react site script (0) | 2025.01.04 |
| React Component) Style based on check status (0) | 2025.01.03 |