순수 HTML 문서로 React.js 프로그래밍
추천 자료: ASP.NET Core 인증 및 권한 부여
순수 HTML 문서로 React.js 프로그래밍 시작
코드: HelloReact00.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>Hello, React.js!</h1>
</body>
</html>
React.js 관련 JavaScript 라이브러리 포함
코드: HelloReact01.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello React 01</title>
<script crossorigin="anonymous" src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin="anonymous" src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/javascript">
ReactDOM.render(React.createElement("h1", null, "안녕하세요."), document.getElementById("root"));
</script>
</body>
</html>
태그의 속성에 속성 값 주기
코드: HelloReact02.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello React 02</title>
<script crossorigin="anonymous" src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin="anonymous" src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/javascript">
ReactDOM.render(
React.createElement("h1", { "style": { "color": "blue"} }, "안녕하세요."),
document.getElementById("root")
);
</script>
</body>
</html>
중첩된 HTML 요소 작성
코드: HelloReact03.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello React 03</title>
<script crossorigin="anonymous" src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin="anonymous" src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/javascript">
ReactDOM.render(
React.createElement(
"div", { "style": { "border": "1px solid red " } },
React.createElement("h1", { "style": { "color": "blue"} }, "안녕하세요."),
React.createElement("h2", { "style": { "color": "red"} }, "안녕하세요."),
React.createElement("h3", { "style": { "color": "green"} }, "안녕하세요."),
),
document.getElementById("root")
);
</script>
</body>
</html>
Babel을 사용하여 JSX를 사용한 태그 생성
코드: HelloReact04.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello React 04</title>
<script crossorigin="anonymous" src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin="anonymous" src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// JSX를 사용하여 HTML을 JavaScript로 변환
ReactDOM.render(
<div><h1>안녕하세요.</h1></div>,
document.getElementById("root")
);
</script>
</body>
</html>
JSX의 여러 가지 특징 살펴보기
JSX의 HTML 태그는 반드시 시작과 끝이 명확해야 합니다.
코드: HelloReact05.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello React 05 - JSX</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script crossorigin="anonymous" src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin="anonymous" src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render((
<div className="container mb-2">
<div className="row">
<div className="col-2">
C#
</div>
<div className="col-10">
내용
</div>
</div>
</div>
),
document.getElementById("root")
);
</script>
</body>
</html>
JSX 표현식 사용하기
코드: HelloReact06.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello React 06 - JSX Expression</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script crossorigin="anonymous" src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin="anonymous" src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
let title = "JSX 표현식(Expression)";
let seeSharp = {
title: "C#",
description: "내용 들어오는 곳..."
};
ReactDOM.render((
<div className="container mb-2">
<div className="row">
<div className="col-12">
{title}
</div>
</div>
<div className="row">
<div className="col-2">
{seeSharp.title}
</div>
<div className="col-10">
{seeSharp.description}
</div>
</div>
</div>
),
document.getElementById("root")
);
</script>
</body>
</html>
함수 컴포넌트 만들기
코드: HelloReact07.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello React 07 - Function Component</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script crossorigin="anonymous" src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin="anonymous" src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
let title = "JSX 표현식(Expression)";
let seeSharp = {
title: "C#",
description: "내용 들어오는 곳..."
};
function BookTitle() {
return (
<div className="row">
<h1>My Book</h1>
</div>
);
}
const BookFooter = () => <p>제가 집필한 책 목록입니다.</p>;
const Copyright = () => {
return (<p>Copyright ©</p>);
}
ReactDOM.render((
<div className="container mb-2">
<BookTitle />
<div className="row">
<div className="col-12">
{title}
</div>
</div>
<div className="row">
<div className="col-2">
{seeSharp.title}
</div>
<div className="col-10">
{seeSharp.description}
</div>
</div>
<BookFooter />
<Copyright />
</div>
),
document.getElementById("root")
);
</script>
</body>
</html>
동적 개체인 props를 사용하여 컴포넌트에 전달된 속성 이름과 속성 값을 받아 사용하기
코드: HelloReact08.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello React 08 - Props</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script crossorigin="anonymous" src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin="anonymous" src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
let title = "JSX 표현식(Expression)";
let seeSharp = {
title: "C# 교과서",
description: "내용 들어오는 곳..."
};
function BookTitle() {
return (
<div className="row">
<h1>My Book</h1>
</div>
);
}
const BookFooter = () => <p>제가 집필한 책 목록입니다.</p>;
const Copyright = () => {
return (<p>Copyright ©</p>);
}
function BookCard(props) {
console.log(Object.keys(props));
return (
<div className="container mb-2">
<div className="row">
<div className="col-12">
{props.title}
</div>
</div>
<div className="row">
<div className="col-2">
{props.title}
</div>
<div className="col-10">
{props.description}
</div>
</div>
</div>
);
}
function BookList() {
return (
<>
<BookCard title={seeSharp.title} description={seeSharp.description} />
<BookCard title="ASP.NET & Core를 다루는 기술" description="ASP.NET & Core를 다루는 기술 책입니다." />
</>
);
}
function BookApp() {
return (
<>
<BookTitle />
<BookList />
<BookFooter />
<Copyright />
</>
);
}
// 최종 렌더링
ReactDOM.render(
<BookApp />,
document.getElementById("root")
);
</script>
</body>
</html>
구조 분해 할당을 사용하여 props를 좀 더 간결하게 사용하기
코드: HelloReact09.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello React 09 - 구조 파괴(분해) 할당(Destructuring Assignment)</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script crossorigin="anonymous" src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin="anonymous" src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- <script src="./babel.min.js"></script> -->
</head>
<body>
<div id="root"></div>
<script type="text/babel">
let title = "구조 파괴 할당(튜플 분해)";
let seeSharp = {
title: "C# 교과서",
description: "내용 들어오는 곳..."
};
function BookTitle() {
return (
<div className="row">
<h1>My Book</h1>
</div>
);
}
const BookFooter = () => <p>제가 집필한 책 목록입니다.</p>;
const Copyright = () => {
return (<p>Copyright ©</p>);
}
function BookCardOther(props) {
//console.log(props);
console.log(Object.keys(props));
return (
<div className="container mb-2">
<div className="row">
<div className="col-12">
{props.title}
</div>
</div>
<div className="row">
<div className="col-2">
{props.title}
</div>
<div className="col-10">
{props.description}
</div>
</div>
</div>
);
}
// 구조 파괴 할당
function BookCard({ title, description, price }) {
return (
<div className="container mb-2">
<div className="row">
<div className="col-12">
{title}
</div>
</div>
<div className="row">
<div className="col-2">
{title}
</div>
<div className="col-10">
{description}
<hr />
{ price + '원' }
</div>
</div>
</div>
);
}
function BookList() {
return (
<>
<BookCard title={seeSharp.title} description={seeSharp.description} price={ 30000 } />
<BookCard title="ASP.NET & Core를 다루는 기술" description="ASP.NET & Core를 다루는 기술 책입니다." price={ 55000 } />
</>
);
}
function BookApp() {
return (
<>
<BookTitle />
<BookList />
<BookFooter />
<Copyright />
</>
);
}
// 최종 렌더링
ReactDOM.render(
<BookApp />,
document.getElementById("root")
);
</script>
</body>
</html>
JSX에서 조건(3항) 연산자 사용하기
코드: HelloReact10.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello React 10 - JSX에서 조건(3항) 연산자 사용하기</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script crossorigin="anonymous" src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin="anonymous" src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- <script src="./babel.min.js"></script> -->
</head>
<body>
<div id="root"></div>
<script type="text/babel">
let title = "조건(3항) 연산자 사용하기";
let seeSharp = {
title: "C# 교과서",
description: "내용 들어오는 곳..."
};
function BookTitle() {
return (
<div className="row">
<h1>My Book</h1>
</div>
);
}
const BookFooter = () => <p>제가 집필한 책 목록입니다.</p>;
const Copyright = () => {
return (<p>Copyright ©</p>);
}
function BookCardOther(props) {
//console.log(props);
console.log(Object.keys(props));
return (
<div className="container mb-2">
<div className="row">
<div className="col-12">
{props.title}
</div>
</div>
<div className="row">
<div className="col-2">
{props.title}
</div>
<div className="col-10">
{props.description}
</div>
</div>
</div>
);
}
// 구조 파괴 할당
function BookCard({ title, description, price }) {
return (
<div className="container mb-2">
<div className="row">
<div className="col-12">
{title}
</div>
</div>
<div className="row">
<div className="col-2">
{title}
</div>
<div className="col-10">
{description}
<hr />
{ price + '원' }
</div>
</div>
</div>
);
}
function BookListOther(props) {
if (props.sortOrder === "ASC") {
return (
<>
<BookCard title="ASP.NET & Core를 다루는 기술" description="ASP.NET & Core를 다루는 기술 책입니다." price={ 55000 } />
<BookCard title={seeSharp.title} description={seeSharp.description} price={ 30000 } />
</>
);
}
else {
return (
<>
<BookCard title={seeSharp.title} description={seeSharp.description} price={ 30000 } />
<BookCard title="ASP.NET & Core를 다루는 기술" description="ASP.NET & Core를 다루는 기술 책입니다." price={ 55000 } />
</>
);
}
}
function BookList(props) {
return (
<>
{
(props.sortOrder === "ASC")
?
<>
<BookCard title="ASP.NET & Core를 다루는 기술" description="ASP.NET & Core를 다루는 기술 책입니다." price={ 55000 } />
<BookCard title={seeSharp.title} description={seeSharp.description} price={ 30000 } />
</>
:
<>
<BookCard title={seeSharp.title} description={seeSharp.description} price={ 30000 } />
<BookCard title="ASP.NET & Core를 다루는 기술" description="ASP.NET & Core를 다루는 기술 책입니다." price={ 55000 } />
</>
}
</>
);
}
function BookApp() {
return (
<>
<BookTitle />
<BookList sortOrder="DESC" />
<BookFooter />
<Copyright />
</>
);
}
// 최종 렌더링
ReactDOM.render(
<BookApp />,
document.getElementById("root")
);
</script>
</body>
</html>
클래스로 컴포넌트 만들기
코드: HelloReact11.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello React 11 - 클래스 컴포넌트</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script crossorigin="anonymous" src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin="anonymous" src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- <script src="./babel.min.js"></script> -->
</head>
<body>
<div id="root"></div>
<script type="text/babel">
let title = "클래스로 컴포넌트 만들기";
let seeSharp = {
title: "C# 교과서",
description: "내용 들어오는 곳..."
};
function BookTitle() {
return (
<div className="row">
<h1>My Book</h1>
</div>
);
}
const BookFooter = () => <p>제가 집필한 책 목록입니다.</p>;
const Copyright = () => {
return (<p>Copyright ©</p>);
}
function BookCardOther(props) {
//console.log(props);
console.log(Object.keys(props));
return (
<div className="container mb-2">
<div className="row">
<div className="col-12">
{props.title}
</div>
</div>
<div className="row">
<div className="col-2">
{props.title}
</div>
<div className="col-10">
{props.description}
</div>
</div>
</div>
);
}
// 구조 파괴 할당
function BookCard({ title, description, price }) {
return (
<div className="container mb-2">
<div className="row">
<div className="col-12">
{title}
</div>
</div>
<div className="row">
<div className="col-2">
{title}
</div>
<div className="col-10">
{description}
<hr />
{ price + '원' }
</div>
</div>
</div>
);
}
function BookListOther(props) {
if (props.sortOrder === "ASC") {
return (
<>
<BookCard title="ASP.NET & Core를 다루는 기술" description="ASP.NET & Core를 다루는 기술 책입니다." price={ 55000 } />
<BookCard title={seeSharp.title} description={seeSharp.description} price={ 30000 } />
</>
);
}
else {
return (
<>
<BookCard title={seeSharp.title} description={seeSharp.description} price={ 30000 } />
<BookCard title="ASP.NET & Core를 다루는 기술" description="ASP.NET & Core를 다루는 기술 책입니다." price={ 55000 } />
</>
);
}
}
function BookList(props) {
return (
<>
{
(props.sortOrder === "ASC")
?
<>
<BookCard title="ASP.NET & Core를 다루는 기술" description="ASP.NET & Core를 다루는 기술 책입니다." price={ 55000 } />
<BookCard title={seeSharp.title} description={seeSharp.description} price={ 30000 } />
</>
:
<>
<BookCard title={seeSharp.title} description={seeSharp.description} price={ 30000 } />
<BookCard title="ASP.NET & Core를 다루는 기술" description="ASP.NET & Core를 다루는 기술 책입니다." price={ 55000 } />
</>
}
</>
);
}
// 함수형 컴포넌트
function BookAppOther() {
return (
<>
<BookTitle />
<BookList sortOrder="DESC" />
<BookFooter />
<Copyright />
</>
);
}
// 클래스형 컴포넌트
class BookApp extends React.Component {
render() {
return (
<>
<BookTitle />
<BookList sortOrder="ASC" />
<BookFooter />
<Copyright />
</>
);
}
}
// 최종 렌더링
ReactDOM.render(
<BookApp />,
document.getElementById("root")
);
</script>
</body>
</html>
상태 관리와 클릭 이벤트
코드: HelloReact12.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello React 12 - 상태 관리와 클릭 이벤트</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script crossorigin="anonymous" src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin="anonymous" src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- <script src="./babel.min.js"></script> -->
</head>
<body>
<div id="root"></div>
<script type="text/babel">
let title = "클래스로 컴포넌트 만들기";
let seeSharp = {
title: "C# 교과서",
description: "내용 들어오는 곳..."
};
function BookTitle() {
return (
<div className="row">
<h1>My Book</h1>
</div>
);
}
const BookFooter = () => <p>제가 집필한 책 목록입니다.</p>;
const Copyright = () => {
return (<p>Copyright ©</p>);
}
// 구조 파괴 할당
function BookCard({ title, description, price }) {
return (
<div className="container mb-2">
<div className="row">
<div className="col-12">
{title}
</div>
</div>
<div className="row">
<div className="col-2">
{title}
</div>
<div className="col-10">
{description}
<hr />
{ price + '원' }
</div>
</div>
</div>
);
}
class BookList extends React.Component {
state = {
theme: 'blue'
}
blueTheme = () => this.setState({theme: 'blue'});
whiteTheme = () => this.setState({theme: 'white'});
render() {
return (
<>
<div>{this.state.theme === "white" ? "white theme" : "blue theme" }</div>
<div>
<button onClick={ () => { this.setState({theme: 'white'}); } }>White 1</button>
<button onClick={ this.whiteTheme }>White 2</button>
<button onClick={ () => { this.setState({theme: 'blue'}); } }>Blue 1</button>
<button onClick={ this.blueTheme }>Blue 2</button>
</div>
<BookCard title={seeSharp.title} description={seeSharp.description} price={ 30000 } />
<BookCard title="ASP.NET & Core를 다루는 기술" description="ASP.NET & Core를 다루는 기술 책입니다." price={ 55000 } />
</>
);
}
}
// 클래스형 컴포넌트
class BookApp extends React.Component {
render() {
return (
<>
<BookTitle />
<BookList sortOrder="ASC" />
<BookFooter />
<Copyright />
</>
);
}
}
// 최종 렌더링
ReactDOM.render(
<BookApp />,
document.getElementById("root")
);
</script>
</body>
</html>
컬렉션 형태의 데이터 출력
코드: HelloReact13.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello React 13 - 컬렉션 형태의 데이터 출력</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script crossorigin="anonymous" src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin="anonymous" src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- <script src="./babel.min.js"></script> -->
</head>
<body>
<div id="root"></div>
<script type="text/babel">
let title = "클래스로 컴포넌트 만들기";
let seeSharp = {
title: "C# 교과서",
description: "내용 들어오는 곳..."
};
function BookTitle() {
return (
<div className="row">
<h1>My Book</h1>
</div>
);
}
const BookFooter = () => <p>제가 집필한 책 목록입니다.</p>;
const Copyright = () => {
return (<p>Copyright ©</p>);
}
// 구조 파괴 할당
function BookCard({ title, description, price, content, imageUrl }) {
return (
<div className="container mb-2">
<div className="row" style={{'cursor': 'pointer'}}>
<div className="col-2 p-1 card">
<span className="d-none">{title}</span>
<span className="">
<img src={imageUrl} alt={title} className="img-fluid" />
</span>
</div>
<div className="col-10 p-1 card">
<h2 className="card-header">
<a href="https://www.gilbut.co.kr/book/view?bookcode=BN002765" target="_blank"><strong>{title}</strong></a>
</h2>
<p>
<strong>{description}</strong>
<br />
{content}
</p>
<div className="p-1" style={{"margin-top": "auto"}}>
<a href="/BookList"><span className="badge badge-primary">학습 가이드</span></a>
<a href="/Books/Errata.aspx"><span className="badge badge-secondary">오탈자 정보</span></a>
<a href="/BoardIndex?BoardName=Qna"><span className="badge badge-danger">Q&A</span></a>
<a href="https://www.gilbut.co.kr/book/view?bookcode=BN002765" target="_blank"><span className="badge badge-info">길벗 도서 소개</span></a>
<a href="https://www.youtube.com/playlist?list=PLO56HZSjrPTB4NxAsEP8HRk6YKBDLbp7m" target="_blank"><span className="badge badge-success">동영상 강의</span></a>
<a href="https://github.com/gilbutITbook/006890" target="_blank"><span className="badge badge-dark">전체 소스 코드(GitHub)</span></a>
<a href="https://bit.ly/Csharp-textbook" target="_blank"><span className="badge badge-warning">도서 보기</span></a>
<a href="https://bit.ly/2TvAyFj" target="_blank"><span className="badge badge-danger">구매</span></a>
</div>
</div>
</div>
</div>
);
}
class BookList extends React.Component {
state = {
theme: 'blue'
}
blueTheme = () => this.setState({theme: 'blue'});
whiteTheme = () => this.setState({theme: 'white'});
render() {
return (
<>
<div>{this.state.theme === "white" ? "white theme" : "blue theme" }</div>
<div>
<button onClick={ () => { this.setState({theme: 'white'}); } }>White 1</button>
<button onClick={ this.whiteTheme }>White 2</button>
<button onClick={ () => { this.setState({theme: 'blue'}); } }>Blue 1</button>
<button onClick={ this.blueTheme }>Blue 2</button>
</div>
{
this.props.books.map(book => {
return <BookCard key={book.id} title={book.title} description={book.description} price={ book.price } content={book.content} imageUrl={book.imageUrl} />
})
}
</>
);
}
}
const books = [
{ id: 1, title: "C# 교과서", description: "기초에서 활용까지! 기본기를 탄탄하게 다지는 C# 입문서", content: "C#의 쓰임새와 기초 문법부터 컬렉션, 제네릭, LINQ, 개체 지향, 동적 형식, 비동기 프로그래밍과 같은 활용과 확장 기능까지 입문자에게 필요한 모든 것을 설명합니다.", price: 30000, imageUrl: "https://www.dotnetkorea.com/Books/images/SeeSharpBook.png" },
{ id: 2, title: "ASP.NET & Core를 다루는 기술", description: "ASP.NET(.NET Framework)과 ASP.NET Core(.NET Core)를 한 권으로 학습합니다.", content: "Microsoft 웹 개발 기술의 집합체인 ASP.NET과 ASP.NET Core를 이용하여 웹 응용프로그램을 제작하는 쉽고, 빠르고, 강력한 기술인 ASP.NET의 전체를 다룹니다.", price: 55000, imageUrl: "https://www.dotnetkorea.com/Books/images/AspNetCore.jpg" },
];
// 클래스형 컴포넌트
class BookApp extends React.Component {
render() {
return (
<>
<BookTitle />
<BookList sortOrder="ASC" books={ books } />
<BookFooter />
<Copyright />
</>
);
}
}
// 최종 렌더링
ReactDOM.render(
<BookApp />,
document.getElementById("root")
);
</script>
</body>
</html>
추천 자료: .NET Blazor에 대해 알아보시겠어요? .NET Blazor 알아보기를 확인해보세요!