[React] 리액트 설치 및 시작

01. Node.js 설치

1. 구글에서 node.js 검색해서 공식 사이트 들어가기
2. 왼쪽의 LTS 버젼 다운로드 후 설치

02. 에디터 설치

1. 나는 vscode 사용할 예정이니 vscode 설치

03. 프로젝트 생성

• 작업용 폴더 만들고 shift + 우클릭
• PowerShell/터미널 열기 누름
• npx create-react-app 프로젝트명
  1. 프로젝트명 ‘blog’를 만들어 보겠음
• 설치 완료되면 아래처럼 뜸

프로젝트명 blog 만들기

설치 완료

•  
• 설치 성공했으니 터미널 종료하고 작업용 폴더에 들어가면
• 프로젝트 폴더가 있음 그거 에디터로 열기
• 열면 이렇게 생겼는데 src폴더의 App.js에서 코드 짤 거임

• 미리보기 띄우기는 터미널에서 npm start
• npm start 실행 결과

04. 설치 과정 설명

1. html 파일에 직접 리액트 설치해도 되지만 시간이 너무 오래걸림
2. 그래서 Create React App이라는 라이브러리의 도움을 받아서 프로젝트 생성을 함
3. 그 라이브러리를 쓰려면 npm이 필요함
4. npm은 라이브러리 모아놓은 플랫폼임
5. npm을 쓰려면 node.js 설치하면 자동으로 딸려옴
6. 그래서 node.js 설치함
7. node.js 설치해서 npm 사용할 수 있게 되었고
8. powershell에서 npx create-react-app 프로젝트명
9. 이건 npm에서 리액트 프로젝트 생성해주는 명령어임
10. 끝

05. 폴더 구조 설명

node_modules

• 프로젝트 구동에 필요한 라이브러리 코드 보관함

pulbic

• html, img 파일등 static 파일 모아놓는 곳

src

• 코드 짜는 곳
• App.js = 메인페이지
• 그런데 js파일에 html을 짜네..?
• App.js에 있는 html들을 index.html 메인페이지에 index.js가 넣어주고 있어서 가능함

package.json

• 프로젝트 정보를 쭉 기입해놓음
• 라이브러리 명들도 기입해져 있음