React Js(기초-2)

자! 오늘은 2번째 React 시간입니다. 오늘 우리가 해볼것은 React 환경 구축입니다.

 

바로 시작해보도록 하겠습니다!(들어가기에 앞서 미리 npm, npx 등이 설치가 되어 있어야 합니다)

 

1. ReactApp 만들기

1-(1)

1. terminal 접속

1-(2)

2. 원하는 디렉토리에 들어가서 명령어를 입력합니다. 현재 만들고자하는 reactApp의 폴더 이름은 "movie_2020" 입니다.

1-(3)

3. 이런 화면이 나온다면 성공적으로 설치가 된 것이다.

1-(4)

4. 우리가 사용할 개발도구에서 폴더열기를 통해 만들었던 reactApp을 열어보자.

1-(5)

5. 폴더를 들어가서 우선은 README.md 에서 내용을 지우고 우리가 원하는 내용으로 수정

1-(6)

6. package.json 에 들어가서 test/eject를 지웁니다.(우리는 start와 build만 사용할 예정입니다)

1-(7)

npm start 명령어를 통해서 react를 실행. 터미널 창을 보면 Local 서버와 Network가 표시

 

2. Github repository 만들기 

- 이부분은 깃 push까지 알고 계시면 그부분을 따라서 진행하시면 됩니다.(git 내용들어가서 확인해보기)

* package.json의 이름과 동일하게 파일이름을 만드는것을 권장합니다.

일단은 따라해보고 git 에 대해서 알아보시는것을 권장합니다

 

3. React-App이 어떻게 작동하는지 알아보기

이렇게 대략적인 폴더의 구성이 있습니다.

- public/favicon: favicon 아이콘을 확인할수있음

- index: 그냥 index이다. 목적에 맞게끔 비워져있다.

 

여기서 우리는 3, 5, 14~17번 줄은 모두 지울것입니다.

src에서는 App.js 와 index.js를 제외한 나머지는 모두 삭제합니다

==> 이제 npm start 를 다시 시작하면 웹 화면에서 바로바로 내용을 저장하면 수정이 된다.