1) 리액트의 시작
1. cdn을 이용하는 방법
- https://ko.reactjs.org/docs/cdn-links.html
CDN 링크 – React
A JavaScript library for building user interfaces
ko.reactjs.org
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
- babel : 과거 브라우저에 맞도록 스크립트를 자동으로 변환해준다. (트랜스 컴파일러)
https://babeljs.io/docs/en/babel-standalone
Babel · The compiler for next generation JavaScript
The compiler for next generation JavaScript
babeljs.io
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><!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>React Start</title>
<!--react cdn-->
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<!--babel cdn-->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<script type="text/babel">
'use strict';
ReactDOM.render(
<h2>리액트의 시작</h2>,
document.body
)
</script>
</body>
</html>
✔ JSX 태그란?
- 페이스북에서 만든 마크업 태그이다.
- JSX -> JavaScript로 변환된다.
- 태그는 꼭 닫아야 한다. ex) <img/>
- 두개 이상의 태그는 하나의 태그로 감싸져야 한다.
<div>
<div></div>
<div></div>
<div></div>
</div>
//또는
<>
<div></div>
<div></div>
<div></div>
</>- 주석은 {/* */} 으로 표현한다.
- css 속성은 카멜케이스 표기법을 사용한다. ex) backgroundColor 로 쓴다.
https://ko.reactjs.org/docs/introducing-jsx.html
2. create-react-app을 이용하는 방법
- 페이스북에서 만든 리액트를 개발하는 개발자들이 공통적으로 사용하는 유용한 툴을 한번에 자동으로 설치할 수 있게 해주는 툴이다.
🎀 yarn
- 페이스북이 만든 javascript 의 의존성 관리 패키지 매니저이다.
- 기능은 npm과 유사하다. 다만, 그보다 속도를 향상시키고 보안이슈를 해결했고 신뢰성을 높였다.
- yarn 을 설치하기 위해선 npm i -g yarn 을 실행하여 설치해준다. 글로벌로 설치하기 위해 -g 를 붙여준다.
yarn create react-app testproject위 명령어를 실행하여 project 만들어주기
위 문구가 뜬다면 설치 완료!
2) 리액트 프로젝트 구조 알아보기
위의 yarn 프로젝트를 설치하면 자동으로 tree가 생긴다.
gitignore
- gitignore 파일 안에 기술한 파일들은 github에 푸시하지 않는다는 뜻이다.
package.json
- npm에서 버전을 관리할 때 프로젝트에서 외부적으로 쓰고 있는 라이브러리의 버전들과 스크립트들을 명시해준다.
README.md
- github에서 프로젝트에 대해 설명하는 파일을 말한다.
public 디렉토리
- 사용자에게 배포할 때 외부적으로 보여지는 리소스들을 포함한다.
src 디렉토리
- 리액트 소스코드를 포함한다.
3) yarn 프로젝트 시작하기
yarn start위 명령어를 실행하여 시작해주기
자동으로 창이 뜨게 되면서 시작된다.
'Front-End > React' 카테고리의 다른 글
| [React] 컴포넌트 스타일 알아보기 (0) | 2021.09.12 |
|---|---|
| [React] useState, useRef 함수 알아보기 (0) | 2021.09.05 |
| [React] 컴퍼넌트(Component)에 대해 알아보기 (0) | 2021.09.04 |
| [React] React(리액트) 개요, MVC 패턴, 특징, 준비자료 (0) | 2021.09.04 |
