<react 특징>
component 사용(tag정의)
-> 가독성/재사용성/유지보수 높아짐
(1) npm install
npm install -g create-react-app
npm-설치하는 프로그램(node js필요/ 여러 라이브러리들 사용가능/ 무료사용가능)
npx-임시로 설치해서 딱 한번만 실행시키고 지우는 애(공간 낭비x/ 항상 최신 상태)
cmd로 경로 이동해서 'react-app'만들기->'create-react-app .'이용해서 설치완료하기
vscode에서 npm run start하면 주소가 나오고 react실행된다.
create-react-app->간편한 환경 셋업을 위해서 사용한다
(2) react
create react app-> id가 root인 곳 안에 component만들기로 약속
-> src dir안 파일 수정으로 만들기 가능
entry(진입)파일=> index.js("document.getElementById('root')")
[EX]
import {component name} from {file name}-뒤에 js생략
import './APP.css' -css를 component에 적용하는 방법
import React, { Component } from "react";
class App extends Component {
render() {
return(
<tag>
</tag>
);
}
}
export default App; 외부에서 이 component불러서 외부 파일에서 사용 가능
(3) build
npm install -g serve(용량이 훨씬 작아짐)
실제 서비스를 build안의 문서들(static)