2022 SW 전문인재양성사업/웹 서비스 프론트엔드 개발
React (1) - 기초
마루설아
2022. 8. 3. 12:33
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function MyList(){
let saramList = ['김길동', '이길동', '박길동', '최길동'];
return (<>
<h3>Welcome to my homepage</h3>
<ul>
{
// Javascript 내의 JSP 안에 다시 Javascript 작성
// JSX와 JS문장의 구분은 {} 사용
saramList.map((name, i)=>{
return <li key={i}>{name}</li>;
})
}
</ul>
</>);
}
function MyList2(){
let listItems = [
<li key="1">오징어</li>,
<li key="2">꼴뚜기</li>,
<li key="3">대구</li>
];
return (<>
<h3>Fish List</h3>
<ul>{listItems}</ul>
</>);
}
function Hello(){
return (<div>
<h1>Hello World!</h1>
<MyList />
<MyList2 />
</div>);
}
ReactDOM.render(<Hello />, document.getElementById('root'));
</script>
</body>
</html>
