1.설치와 셋팅(코딩애플)

1. node.js 설치(되도록이면 신버전으로, 안그럼 에러남)
2. 편집툴 설치(vscode)
3. 작업폴더 만들기
4. vscode 에서 작업폴더 열기
5. 폴더 열었으면 터미널 열고 마지막줄에 작업폴더명 잘 뜨는지 확인 후

(ex : c:users/harry/어쩌구/저쩌구/작업폴더명  )

 

아래 코드 입력

npx create-react-app 프로젝트명

• npx : 라이브러리 설치 도와주는 명령어(nodejs 설치 잘 되어있으면 이용가능)
• create-react-app : 리엑트 셋팅 다된 boilerplate 만들기 쉽게 도와주는 라이브러리

 

그럼 작업폴더명 하위폴더로 프로젝트명 폴더가 생성.

프로젝트명 폴더 불러온 후 작업 시작

 

※ 코드 실시간으로 보는법 : 터미널에 npm start 혹은 웹에서 호스트주소 입력

 

폴더 설명

• App.js : 메인페이지에 들어갈 html 짜는 곳( public/index.html 이 메인페이지)
• index.js : App.js에서 짠걸 index.html에서 보이게끔 연결해주는 것
• node_modeules : 라이브러리 모음
• public: : static파일 보관함 (이미지, 아이콘 등 동적으로 바뀌지 않는것들 모아두는 곳)
• src : 소스코드 보관함(실질적 코드는 이곳에서 짬)
• package.json : 설치한 라이브러리 목록

 

https://www.youtube.com/watch?v=nahwuaXmgt8