React 개발 환경 설정
# create-react-app cli Tool node 통해 설치
npm install -g create-react-app
# 신규 react 프로젝트 생성 (typescript 사용)
// 4.0 버전 이후
npx create-react-app [프로젝트명] --template typescript
npx create-react-app test-app --template typescript
// 4.0 버전 이전
npx create-react-app test-app --typescript
# 해당 프로젝트 폴더 이동
cd [프로젝트 폴더 경로]
cd test-app
# build & 실행
npm run start // 개발
npm test // 테스트
npm run build // 운영용 빌드
기본 프로젝트 폴더 구성
- package.json : js 라이브러리 dependency 정의된 파일 (npm cli 명령어에서 사용)
-> 기본적으로 npm create react-app 명령어 사용시, react 프레임워크에 필요한 package.json 을 생성 후, npm install 명령어 실행
- node_modules/ : react 프레임워크에서 사용되느 js 라이브러리 모듈 모음
- public/index.html : 웹 화면의 가장 큰 틀에 해당, 기본적인 html, head, body 태그가 정의되어 있음
-> icon, logo 및 문자열과같은 meta 속성값 지정
-> 기본적으로 body 태그안에는 보통 root id를 가진 div 태그 하나만 존재
- src/index.tsx : ReactDOM.render( <React.StrictMode><App/></React.StrictMode> , html selector) 함수를 통해 메인 App React 컴포넌트 렌더링 수행
'[DEV] App Dev ∕ Web Front > Framework ∕ React' 카테고리의 다른 글
[React] JS ES6 문법 / 함수형 프로그래밍 for React (0) | 2022.05.11 |
---|---|
[React] Cordova로 안드로이드, IOS 버전 만들기 (0) | 2021.07.02 |
[React] 컴포넌트간 데이터 전달 : Props와 State 실습 (0) | 2021.07.01 |
[React] 기초 개념 (0) | 2021.07.01 |
[React] 크롬 확장 프로그램 및 VSCode 필수 extension (0) | 2021.07.01 |
최근댓글