<!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">
// The DOMContentLoaded event listener is not necessary since the script is loaded at the end of the body.
class App extends React.Component {
render() {
return <h1>Basic React</h1>;
}
}
const container = document.getElementById('root');
ReactDOM.render(<App />, container);
</script>
</body>
</html>
### Key Components
- **External Scripts**: It includes React and ReactDOM from unpkg.com, a global content delivery network (CDN) for everything on npm. The `crossorigin` attribute is used for CORS (Cross-Origin Resource Sharing) requests. Babel standalone is also included to compile JSX code directly in the browser, indicated by the `type="text/babel"` attribute on the script element containing JSX code.
- **React Component**: A class-based React component named `App` is defined. This component's `render` method returns a JSX representation of what the UI should look like - in this case, an `<h1>` element with the text "Basic React".
- **Rendering**: The `ReactDOM.render` method is used to render the `App` component inside the `<div>` element with an id of `root`. This is a common pattern in React applications, where a single root DOM element serves as the container for the React component tree.
### Usage of Babel Standalone
- The inclusion of Babel standalone allows for JSX syntax and ES6 features to be used directly within the `<script>` tags in the HTML document, without the need for a separate build step. This is particularly useful for examples, small projects, or educational purposes, but it's not recommended for production use due to performance implications.
### Best Practices and Production Considerations
- **Performance**: For production environments, it's recommended to precompile JSX and ES6+ code into vanilla JavaScript using build tools like Webpack and Babel. This improves performance by eliminating the need for in-browser transformation.
- **Versioning**: The script tags explicitly load version 17 of React and ReactDOM. When developing a real application, ensure you are using the most recent and stable versions of these libraries, and consider specifying exact version numbers to avoid unexpected updates and compatibility issues.
- **Security**: The `crossorigin` attribute on the script tags ensures that error messages are accurately reported and that the external scripts are eligible for integrity checks, which can enhance security when loading resources from CDNs.
### Conclusion
This document serves as a simple demonstration of setting up a React component and rendering it to the DOM using CDN-hosted React libraries and Babel for JSX processing. It encapsulates the core idea of React's declarative component structure and how components are rendered into HTML elements.
'개념 > React' 카테고리의 다른 글
| React Component) Child to Parent change state proper type (0) | 2025.01.10 |
|---|---|
| React Component) Component array (0) | 2025.01.09 |
| 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 |