리액트 처음 실행하는법!

리엑트 설치했는데 그 다음 어떻게 실행해?
바로 알아보자.

일단 나는 yarn을 설치해서 yarn으로 실행을 할것이다.
npm으로 실행해도 되는데 yarn을 더 선호한다.
이 둘의 차이점은 나중에 포스팅하겠다.

yarn create react-app 원하는파일명

그럼 이렇게 만들어진다.
참고로 리엑트 만들기전에 cd 원하는경로 들어간다음에 만들어주자...
저렇게 만들면 파일이 생성이된다.
코드편집기로 폴더열기하면 끝!

필요 없는 파일 정리하기

실행을하고 왼쪽 네비게이션바를 보자
src폴더에 들어가서
app.cs
app.test.js
logo.svg
reactWebVitals.js
setupTest.js
5개 파일 지워주자 사실 다른 파일도지워줘도 된다.
**index.js
App.js
index.css
이 3개파일만 안건들면 된다.

index.js 코드정리

빨간 괄호 친 부분 다삭제하자

그럼 이렇게 된다.

index.css 코드정리

싹 다 지워주자!

App.js 코드정리

마찬가지로 빨간 괄호 다 지우자

그리고 이렇게 설정하며 끝!

+return에 괄호 쳐주자..

터미널 실행 시키고 yarn start

이제 vsc 터미널 실행시키고 yarn start 명령어 입력하면
내가 설정해놓은 웹 사이트가 뜬다.

참 쉽죠?

---

1. 터미널 yarn create react-app 원하는파일명
2. 필요 없는 파일 정리하기
3. index.js 코드정리
4. index.css 코드정리
5. App.js 코드정리
6. 터미널 실행 시키고 yarn start

자동 코드정렬 단축기= 커맨드 + k + f

참고로 컴포넌트가 속한 파일확장자를 js에서 jsx로 바꿔도 된다.
(이건 내맘이다.)