<!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 (
<div>
<h1>{this.props.name} hello!</h1>
<img src={this.props.imgUrl} alt="Description" />
</div>
);
}
}
// Example props for demonstration
const props = {
name: "React",
imgUrl: "https://reactjs.org/logo-og.png"
};
ReactDOM.render(<App {...props} />, document.getElementById('root'));
</script>
</body>
</html>
### External Scripts
The document includes three essential scripts from unpkg.com:
- **React**: The React library, which is the core framework providing the component-based architecture.
- **ReactDOM**: The library responsible for interacting with the DOM, allowing React components to be rendered into the actual webpage.
- **Babel Standalone**: Enables JSX syntax to be used directly in the browser, which is crucial for writing React components in a more readable and expressive way.
### The `App` Component
- Defined as a class that extends `React.Component`.
- The `render` method returns JSX, a syntax extension for JavaScript that looks similar to HTML. This JSX describes what the UI should look like.
- The returned JSX includes an `<h1>` element displaying a greeting that includes the `name` prop and an `<img>` element sourced from the `imgUrl` prop. The `alt` attribute is set to a static string for accessibility.
### Rendering the Component
- The `ReactDOM.render` function call takes the `<App />` component, with props spread from the `props` object, and mounts it within the `#root` div element in the DOM. This is the entry point of the React application in the webpage.
### Props for Demonstration
- A `props` object is defined with `name` and `imgUrl` properties. This object is then spread into the `App` component using `{...props}`, effectively passing `name` and `imgUrl` as props to the component.
### Practical Use
This example is a straightforward demonstration of defining a React component, passing props to it, and rendering it. It illustrates fundamental concepts in React such as component structure, JSX, props handling, and the rendering process.
For a complete beginner in React, this code provides a clear example of how data (props) can be passed down to components and how these components can be used to construct a dynamic and interactive UI. It's an excellent starting point for understanding React's core principles.
'개념 > React' 카테고리의 다른 글
| React Component) Child to Parent change state proper type (0) | 2025.01.10 |
|---|---|
| React Component) Component array (0) | 2025.01.09 |
| React Component) confirm of propertype to item Component (1) | 2025.01.07 |
| React Component) format output (0) | 2025.01.06 |
| React Component) item Component (0) | 2025.01.05 |