<!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">
//basic
const name = 'cloud'
const imgUrl = 'http://placedog.net/400/200'
const component = <div>
<h1> {name} hello !</h1>
<img src = {imgUrl}/>
</div>
const container = document.getElementById('root')
ReactDOM.render(component, container)
//component property
class App extends React.Component {
render () {
return <div>
<h1> {this.props.name} hello!</h1>
<img src = {this.props.imgUrl}/>
</div>
}
}
const container = document.getElementById('root')
ReactDOM.render(<App name = "cloud" imgUrl = 'http://placedog.net/400/200'/>, container)
</script>
</body>
</html>### Key Points and Corrections
1. **Duplication Error**: The script contains a duplication in variable names (`container`) and attempts to render two separate React trees to the same DOM element (`#root`). This will result in only the second render call being visible, as it overwrites the first. To demonstrate both examples without interference, you could use separate container elements or combine the examples into a single coherent example.
2. **Basic JSX Expression**:
- The first part creates a JSX expression `component` that includes an `<h1>` element with a greeting and an `<img>` element with a source URL.
- This JSX expression is directly rendered into the DOM using `ReactDOM.render`.
3. **Class-Based Component with Props**:
- The second part defines a React class component `App` that receives `name` and `imgUrl` as props.
- This component renders a similar UI to the JSX expression but sources its content from `this.props`, demonstrating how to pass data into components as props.
- It then attempts to render an instance of `App` into the DOM, using props for the `name` and `imgUrl`.
### Corrected Script for Demonstration
To correctly demonstrate both approaches without conflicts and address the duplication, consider modifying the document to use two separate container elements:
```
<div id="root1"></div>
<div id="root2"></div>
<script type="text/babel">
// Basic JSX approach
const name = 'cloud';
const imgUrl = 'http://placedog.net/400/200';
const component = (
<div>
<h1>{name} hello!</h1>
<img src={imgUrl} alt="A cute dog" />
</div>
);
ReactDOM.render(component, document.getElementById('root1'));
// Component with Props
class App extends React.Component {
render() {
return (
<div>
<h1>{this.props.name} hello!</h1>
<img src={this.props.imgUrl} alt="A cute dog" />
</div>
);
}
}
ReactDOM.render(
<App name="cloud" imgUrl="http://placedog.net/400/200" />,
document.getElementById('root2')
);
</script>
```
### Summary
The corrected version separates the demonstrations into two distinct parts, each with its container. The first part uses a basic JSX expression for rendering, and the second part uses a class-based component with props. This approach showcases different ways of achieving similar UI outputs in React, emphasizing the flexibility and power of React components and JSX.
'개념 > React' 카테고리의 다른 글
| React Component) component property (0) | 2025.01.08 |
|---|---|
| React Component) confirm of propertype to item Component (1) | 2025.01.07 |
| React Component) item Component (0) | 2025.01.05 |
| React Component) react site script (0) | 2025.01.04 |
| React Component) Style based on check status (0) | 2025.01.03 |