우선 node(https://codestudycafe.tistory.com/17)를 설치해 줍니다.
그리고 터미널에 npx create-react-app {프로젝트 명}을 입력해 줍니다. 만약 에러가 나오면 npm install -g create-react-app를 한번 입력해 줍니다.
그럼 이렇게 파일이 나옵니다.
이제 터미널에 cd {프로젝트 이름}으로 프로젝트에 들어가고 npm run start로 실행을 시킵니다.
사실 이걸로 끝인데 너무 짧으니 파일 구조라도 한번 봅시다.
여기서 같은 이름이 한 세트라고 생각하면 됩니다. index 3개가 한 세트고 app 2개가 한 세트입니다. app.test.js는 테스트를 위한 코드로 무시합시다.
대부분 프로그램의 시작은 index입니다. index의 html을 봅시다.
body쪽을 보았는데 특별한 게 없습니다. root id가 하나 있지만 이걸로는 뭔가 부족해 보입니다.
index.js쪽을 봅시다.
root를 찾아준 다음 여기에 App을 출력해 줍니다. 그러니 화면에 돌고 있는 사진과 텍스트는 이곳에 있을 것입니다.
app.js로 가줍니다.
여기에 저희가 본 텍스트와 돌아가는 그림을 넣어주고 있습니다. index에서는 이 html을 받아서 app안에 넣어주고 있습니다.
이제 이 파일을 수정해서 react를 만들 수 있습니다.
