728x90
editor: vs code
1. Node.js, npm 설치
2. create-react-app
create-react-app은 리액트 프로젝트를 생성할 때 필요한 웹팩, 바벨의 설치 및 설정 과정을 생략하고 간편하게 프로젝트 작업 환경을 구축해준다.
터미널에서 원하는 디렉터리로 이동 후 명령어를 입력한다.
npx create-react-app
npx는 노드 패키지 실행을 도와주는 도구
그럼 바탕화면에 프로젝트 폴더가 생성됨
3. 프로젝트 기본 구조
public: 정적 파일을 저장하는 곳. public 내부의 파일만 public/index.html에서 사용할 수 있다.
src: 리액트 컴포넌트와 애플리케이션 로직이 들어있는 곳. Webpack은 여기 있는 파일만 보기 때문에 이 폴더 외에 넣은 것은 Webpack에 의해 처리되지 않음
* 이름 수정하면 안되는 파일
public/index.html (페이지 템플릿)
src/index.js (js 시작점)
4. 프로젝트 실행
프로젝트 폴더로 이동후 개발 서버를 실행한다. 그럼 저절로 리액트 페이지가 뜬다.
cd [프로젝트 명]
npm start (또는 npm run start)
5. 확장 프로그램 설치
Reactjs Code Snippets: 리액트 컴포넌트 및 라이프사이클 함수 작성할 때 간편하게 코드를 생성하는 코드 스니펫 모음
728x90
'Frontend > React' 카테고리의 다른 글
[React] TicTacToe앱 만들기(3) - 게임 동작 기록, jumpTo() (0) | 2024.06.20 |
---|---|
[React] TicTacToe앱 만들기(2) - 리액트 Hooks, 순서, 승자 판별 (0) | 2024.06.18 |
[React] TicTacToe앱 만들기(1) - 컴포넌트 생성, props, state (1) | 2024.06.14 |
[React] 번들러 | 리액트 컴포넌트 | JSX (0) | 2024.06.12 |