[React] 리액트 소개 및 개발환경 구축

이 글은 생활코딩 React 강의[opentutorials.org/module/4058]를 참고하여 작성하였습니다.

 

https://ko.reactjs.org/docs/getting-started.html

 

[Component]

Top.html

Sidebar.html

과 같은 html 파일을 만들고,

index.html에서

<Top></Top>

<Sidebar></Sidebar>

과 같이 태그처럼 사용할 때,

사용자 정의 태그라고 하지 않고 Component 라고 한다.

장점

1. 가독성

2. 재사용성

3. 유지보수

 

 

[React 공식문서]

https://ko.reactjs.org/docs/getting-started.html

시작하기 – React

 

 

[주의] cmd에서 드라이브 이동이 안될 때

윈도우라면 cmd에서 드라이브를 이동할 때

cd D:  //(X)

D:  //(O)

-> cd 제외하고 그냥 D:만 써준다!!!!!!!!!!!!!!

 

 

[npm을 이용하여 create-react-app 설치]

npx create-react-app my-app
cd my-app
npm start

npx는 create-react-app을 설치하고 일회적으로 사용하고 바로 삭제까지 해줌.

장점은 가장 최신의 react-app을 사용할 수 있다는 것.

나는 실습 위주로 진행하려고 npx를 사용하지 않음.

실무에서는 npx 사용 권장!

 

 

[샘플 웹앱 실행]

나는 vs code를 이용했다.

터미널에 다음과 같이 작성한다.

npm run start

그러면 다음과 같이 샘플 웹앱이 실행된다.

 

실행된 웹앱 캡쳐

터미널에 ctrl + C 를 입력하면 run이 중지된다.

 

 

 

 

 

(이번 포스팅은 전체적인 내용을 정리하기보다는 내가 모르는 것과 기록하고 싶은 것 위주로 정리했다.)