Web/React
[Chapter 02] 리액트 시작하기
Nellie29
2023. 9. 25. 13:48
1️⃣ HTML만으로 간단한 웹사이트 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>소플의 블로그</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>소플의 블로그에 오신 여러분을 환영합니다!</h1>
</body>
</html>
2️⃣ CSS를 사용하여 웹사이트 스타일링하기
h1{
color:green;
font-style: italic;
}
3️⃣ 웹사이트에 React.js 추가하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>소플의 블로그</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>소플의 블로그에 오신 여러분을 환영합니다!</h1>
<div id="root"></div>
<!-- 리액트 가져오기 -->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<!-- 리액트 컴포넌트 가져오기 -->
<script src="MyBtn.js"></script>
</body>
</html>function MyBtn(props){
const [isClicked, setIsClicked]= React.useState(fasle);
return React.createElement(
'button',
{onClick: ()=> setIsClicked(true)},
isClicked ? 'Clicked!' : 'Click here!'
);
};
// 리액트 컴포넌트를 DOM 컨테이너에 렌더링하는 코드
const domContainer=document.querySelector('#root');
ReactDom.render(React.createElement(MyBtn), domContainer);4️⃣ create-react-app
$ npx create-react-app my-app
- my-app 부분에 원하는 파일의 이름을 적어주면 리액트 파일을 자동으로 만들어준다!
💻 Reference
소플의 처음 만난 리액트 - 예스24
리액트 기초 개념을 배우고 간단한 실습을 따라 하며 사용법을 익히는 가장 쉬운 입문서이 책은 오픈소스 자바스크립트 라이브러리인 리액트를 처음 배우는 개발자를 위한 책이다. 먼저 웹 서
www.yes24.com