02-3) 리액트 앱 살펴보고 수정하기

1. Public 폴더 살펴보기

- favicon.ico : 파비콘, 사이트의 제목에 사용되는 아이콘

- index.html : 기본 내용 (main)

 

2.Src 폴더 편집하기

- 안쓰는 파일 삭제하기 (App.css, App.test.js, index.css,  logo.svg,serviceWorker.js, setupTests.js)

- index.js 편집

import React from 'react';
import ReaactDOM from 'react-dom';
import App from './App';

ReactDOM.render (
	<App / >
    document.getElementById('root')
);

- App.js 파일 편집

import React from 'react';

function App() {
	return
    	<div className="App" />;
}

export default App;

- 터미널에서 "npm start" 실행 시, 아무 화면도 뜨지 않음

 

3. App.js 수정하기

import React from 'react';

function App() {
	return <div>Hello!!</div>;
}

export default App;

-수정 후, npm start 실행 시, "Hello!!"가 보임

 

 

4. 크롬 개발자 도구로 리액트 탭 살펴보기

- 크롬 브라우저 창에서 해당 인터넷에 오른쪽 버튼 -> 검사( 크롬 개발자 도구 ) -> Elements  -> body element 주변에 <div>Hello!!</div>확인 가능

- 맥에서는 (alt + cmd + i)가 개발자 도구 단축키