리액트 React 시작하기 (CDN & CRA)

리액트 React 시작하기 (CDN & CRA)

 

1. CodePen 으로 시작하기

CodePen은 웹에서 코딩을 작성할 수 있는 애플리케이션이다. CodePen에서 시작하는 방법은 실제 프로젝트를 만들 수 있는 방법은 아니고, React를 경험해보거나 간단한 테스트 코드를 실행해볼 때 사용하는 방법이다.

 

CodePen

https://codepen.io/

CodePen

 

CodePen에 간단하게 회원가입을 한 뒤 Pen을 눌러 코드 작성을 시작하면 된다.

 

Pen 을 눌러 새 코드 작성을 시작한다.

JS 탭에 설정 버튼을 누른다.

CDN 넣는 곳에 React CDN을 넣어주거나 React를 검색해서 찾을 수도 있다.

 

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>

 

2. CDN 방식으로 시작하기

 

index.html 파일 안에 head 영역에 CDN을 복사 붙여넣기 하고 작성을 시작할 수 있다.

 

https://ko.reactjs.org/docs/cdn-links.html

CDN 링크 – React

 

3. Create React App 으로 시작하기

 

이 방법은 node.js 가 설치되어 있다는 전제 하에 가능한 방법이다.

node.js 설치는 아래 글을 참고하시길.

 

코딩독학) Node.js 환경에서 프론트엔드 개발하기란?

 

node.js 설치가 완료되면 VS code를 열어 Terminal을 연다. 이 때 주의해야 할 것은 내가 지금 열고 있는 폴더가 루트 폴더가 되고 그 안에 새로운 프로젝트가 될 폴더가 생성되므로 열려 있는 폴더를 확인하는 것이 좋다.

 

그런 다음, 'npx create-react-app 프로젝트 이름' 을 쳐주고 엔터를 쳐주면 2~3분 뒤 실행이 완료된 후 'Happy hacking' 메세지를 받을 수 있다. 프로젝트 이름은 한글로 하거나 띄어쓰기가 있을 경우 에러가 날 수 있으니 영어로 작성하고 띄어쓰기가 없도록 만들자.

 

 

 

 

출처

https://create-react-app.dev/docs/getting-started

Getting Started | Create React App