본문 바로가기
Project/REACT

5 - 폴더 정리 및 수정

by Elfen Lied 2020. 12. 2.
반응형

1. vs코드에서 src폴더 정리

선택된 두 파일 빼고 다 삭제.

 

위처럼 두개만 남기고 정리.

 

 

2. index.js 파일 수정

빨간줄 쳐진것들 삭제하기. 단! 표시한 쉼표는 지우면 안됨.

 

※코드가 위와 다를수 있지만 상관없이 남길 코드만 남기면 된다.

 

최종적으로 이렇게 만들어 주면 됨.

 

 

4. App.js 파일 수정(1)

빨간줄 전부 삭제.  노란색으로 표시한 세미콜론 지우면 안됨.

 

코드 1번줄 위에 import React from 'react'; 코드를 빼먹음(있을 경우는 상관없음)

 

빨간 테두리로 표시한 코드를 넣어줌(이미 있을 경우는 상관없음)

 

위처럼 정리되면 완료.

 

5. 리액트 앱 다시 실행

cmd에서 npm start

실행해보면 화면에 아무것도 안나타남.

이유는 App.js 파일에 있는 코드를 삭제했기 때문.

 

 

6. App.js 파일 수정(2)

빨간선으로 된 코드 삭제하고 아래쪽 코드 입력 div 사이에 문장은 아무거나 입력해도 됨.

 

변경후 브라우저를 확인하면,

입력한 Hello!!!가 보인다.

 

반응형

'Project > REACT' 카테고리의 다른 글

7 - 리액트 기초 개념: 컴포넌트, JSX  (0) 2020.12.08
6 - 리액트 동작 원리  (0) 2020.12.02
4. 깃허브에 업로드  (0) 2020.12.02
3 - 리액트 앱 실행  (0) 2020.12.02
2 - 프로젝트 폴더(보일러 플레이트)  (0) 2020.12.02

댓글