참고사이트
https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi
React - YouTube
www.youtube.com
2020/05/04 - [react/기초] - react 설치, 개발환경구축
- public
index.html
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>id root가 중요
- src
index.js ( App.js와 root id를 render해줌 )
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App'; //.js 생략
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<App />,
document.getElementById('root')
);
serviceWorker.unregister();
App.js ( class type 과 function type 2가지가 존재한다.)
//import React from 'react';
import React, { Compenent } from 'react';
import logo from './logo.svg';
import './App.css';
//class type
/*
class App extends Compenent {
render() {
return (
<div className="App">
Hello, World
</div>
);
}
}
*/
//function type
function App() {
return (
<div className="App">
Hello, World
</div>
);
}
export default App;
index.css, App.css 등
대부분의 작업 소스파일 존재
- 배포파일 생성
npm run build (빌드 명령어)
이전 src, public 이외에 build 폴더 생성됨
- serve통해서 배포파일 실행하기 (build 폴더파일)
npm install -g serve (설치 명령어 ) / npx serve -s build(실행 명령어)
* 배포파일 생성전 / 후 비교
개발자도구(f12) Network tab에서 크롬화면 새로고침 오른쪽버튼 ( 캐시비우기및 강력새로고침) 클릭 후 resources 파일크기 확인 해보면 1.5M 에서 142KB로(배포파일 생성 후 serve로 실행시..) 파일 사이즈가 작아진걸 확인해볼 수 있었다.
'dev > react' 카테고리의 다른 글
| react 이벤트 (0) | 2020.05.17 |
|---|---|
| react state소개 및 사용 (0) | 2020.05.15 |
| react 속성(props), react Developer Tools 사용 (0) | 2020.05.13 |
| react 컴포넌트(component) 개념 (0) | 2020.05.11 |
| react 설치, 개발환경구축 (0) | 2020.05.04 |
