<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
//root component print out
const component = <h1>react basic</h1>
const container = document.getElementById('root')
ReactDOM.render(component,container)
</script>
</body>
</html>
### Including React Libraries
- You've included the React and ReactDOM libraries using CDN links. This is a common approach for small projects or examples where you want to quickly get started without setting up a build process with tools like Webpack or Parcel.
- The Babel standalone library is also included via CDN. This allows you to use JSX directly in the browser by transforming it on the fly. JSX is a syntax extension for JavaScript that looks similar to HTML and is used in React to describe the UI.
### Rendering a React Component
- You define a simple React component as a JSX expression (`<h1>react basic</h1>`) and assign it to the `component` variable. This component is static and stateless, displaying only a piece of text.
- You then select the DOM element with the ID `root` as the container for your React application.
- Finally, you use `ReactDOM.render` to render your React component into the `root` container. This function call is what bridges React's virtual DOM with the actual DOM, allowing your React component to appear on the page.
### Key Points
- **Simplicity**: This example is as basic as it gets with React, making it a great starting point for understanding the fundamental concept of rendering React components.
- **JSX**: JSX allows you to write HTML-like syntax which gets transformed into JavaScript. It's one of the core features that make React components easy to read and write.
- **React and ReactDOM**: It's important to understand the distinction between React and ReactDOM. React deals with the component logic and lifecycle, whereas ReactDOM deals with rendering components to the DOM.
- **Babel**: While Babel is not needed when you're working with a modern JavaScript framework in a development environment set up with a build tool, it's very useful in examples like this where you want to write JSX directly in HTML files.
### Conclusion
This document serves as an excellent example of how to get started with React in the simplest way possible. It shows the core of React's rendering capabilities without diving into more advanced topics like state management, props, or component lifecycle methods, making it a perfect snippet for beginners to understand and build upon.
'개념 > 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) item Component (0) | 2025.01.05 |
| React Component) Style based on check status (0) | 2025.01.03 |