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
'Web > React' 카테고리의 다른 글
| [Chapter 03] JSX 소개 (1) | 2023.12.18 |
|---|---|
| [Chapter 01] 리액트 소개 (0) | 2023.09.25 |
| [Chapter 00] 준비하기 (0) | 2023.09.25 |
