[React] 리액트 CRA로 시작하기(create-react-app)

리액트 CRA로 시작하기

리액트 개발환경 설치

npm install --global create-reate-app

해당 폴더에 리액트 프로젝트 설치

npx create-react-app .

+ CRA 설치, 파일명 앞에  .  을 붙이면 현재 디렉터리에 그대로 생성된다.

npx create-react-app react-app

 

리액트 프로젝트 디렉토리로 이동

cd react-app

리액트 실행

npm run start

아래와 같은 빌드화면 확인 가능하다.

create-react-app

성공적으로 실행되었다면, react-app 으로 된 폴더가 생성되고 아래와 같은 파일 구조를 가진다.

.
├── README.md
├── node_modules
├── package.json
├── public
├── src
└── yarn.lock

• src/index.js : 엔트리 파일
• public/index.html : html 템플릿 파일
• npm run build : 배포 버전 생성
• build : 배포 버전의 내용
• import ‘filename.css’를 이용해서 css를 사용할 수 있다.
• 리액트는 하나의 태그가 전체를 감싸야 된다.
• 사용자 정의 태그는 무조건 대문자로 시작한다.
  • 소문자로 시작하면 html native 태그로 인식한다.
• 사용자 정의 태그란? → 컴포넌트