🌐

들눈 2023. 10. 30. 18:23

<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="./index.css" />
  <script type="module" src="./index.js"></script>
</head>
<body>

  <div id="root"></div>

</body>
</html>

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
constructor(props) {
  super(props);
  this.state = {
   text: ""
  };
}

handleInput = (event) => {
  const val = event.target.value;
  this.setState({
   text: val
  });
}

render() {
  return ( <
   div >
   <
   h1 > Hello, {
    this.props.name
   } < /h1> <
   input type = "text"
   placeholder = "Type Here"
   value = {
    this.state.text
   }
   onChange = {
    this.handleInput
   }
   /> <
   p > < strong > Your entry is: <
   /strong> {this.state.text}</p >
   <
   /div>
  );
}
}

ReactDOM.render( <
App name = "Bobby Barns" / > ,
document.getElementById("root")
);

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="./
index.css" />
<script type="module" src="./
index.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>