render
함수만 필요한 경우는 함수형 컴포넌트로 작성하는게 좋다.바벨을 사용해서 리액트 javascript 컴파일하기
npx babel --watch src --out-dir . --presets @babel/preset-react
$ npx webpack
create-react-app 사용해서 프로젝트 만들기
$ npx create-react-app {project_name}
시작하기
cd {project_name}
npm start
https를 사용하고 싶을때
# 리눅스 or 맥
HTTPS=true npm start
# 윈도우라면
HTTPS=true && npm start
빌드하기
npm run build
는 배포 환경에서 사용할 파일을 만들어줌
로컬에 웹서버를 띄워서 확인하기
npm install -g serve
로 serve
모듈을 설치하고 로컬에 웹서버를 띄워보자
server
아니고 serve
인것에 주의하자.
npx serve -s build
build 를 할때 10킬로바이트보다 작은 이미지는 별도의 파일로 생성되지 않고 data url 형식으로 자바스크립트 파일에 포함된다. 작은 파일을 요청하는 http 컨넥션이 더 비싸기 때문이다.
core-js 를 사용하면 폴리필을 사용할 수 있다.
설치
npm install core-js
import 'core-js/features/string/pad-start';
const val = '123'.padStart(5, '0');
console.log(val); // 00123
css의 최신기능을 사용하려면 벤더 접두사가 붙은 이름을 사용해야하는데, autoprefixer
패키지를 사용하면 자동으로 접두사가 붙는다.
styled-components
가 가장유명함 npm install styled-components
npm install node-sass