정리/React
[처음 만난 리액트] section 2. 리액트 시작하기
민발자
2024. 3. 23. 17:11
728x90
1. 직접 리액트 연동하기
📃 index.html
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>블로그</title>
</head>
<body>
<h1>블로그에 오신 여러분을 환영합니다</h1>
<!-- virtual DOM의 시작점: DOM Container(Root DOM Node) -->
<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="MyButton.js"></script>
</body>
</html>🔎 link 태그
현재 html 파일과 외부 리소스 사이의 관계를 정의할 때 사용
css 파일을 불러오거나 favicon 같은 것을 넣기 위해 사용
🔎 React 추가하기
<!-- virtual DOM의 시작점: DOM Container(Root DOM Node) -->
<div id="root"></div>
리액트를 사용하기 위해 DOM 컨테이너를 추가
<!-- 리액트 가져오기 -->
<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="MyButton.js"></script>
스크립트 태그를 이용해 리액트 js파일과 리액트 컴포넌트를 가져오기
📃 style.css
h1{
color: teal;
font-style: italic;
}
📃 MyButton.js
리액트 컴포넌트 만들기
function MyButton(props) {
const [isClicked, setIsClicked] = React.useState(false);
return React.createElement(
'button',
{ onClick: () => setIsClicked(true) },
isClicked ? 'Clicked!' : 'Click here!'
)
}
const domContainer = document.querySelector('#root');
ReactDOM.render(React.createElement(MyButton), domContainer);
🔎 렌더링
const domContainer = document.querySelector('#root');
ReactDOM.render(React.createElement(MyButton), domContainer);
컴포넌트를 DOM 컨테이너에 렌더링
📊 결과 확인
2. create-react-app
📌 create-react-app(CRA)
리액트로 웹 애플리케이션을 개발하는데 필요한 모든 설정이 되어있는 상태로 프로젝트를 생성해주는 도구
👩🏻💻 react app 생성
$npx create-react-app <project-name>🔎npx(execute npm package binaries)
npm 패키지를 설치한 이루 곧바로 실행, 엑스큐트까지 해주는 명령어
📊 애플리케이션 실행
#경로 변경
cd project-name
#애플리케이션 실행
npm start
728x90