[React] 기초 - Create React App

Create React App

• Create React App란 ? 리액트 SPA를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인. 복잡한 개발 세팅을 해줌.

Create React App 실행방법

1) git --version, node --version, npm --version 으로 버전확인
2) 경로를 지정해서 mkdir 폴더명 으로 새로운 폴더를 만들어준다.
3) npx create-react-app 프로젝트명 으로 새로운 리액트 프로젝트 시작한다.

• react
• react-dom (리액트를 브라우저 돔에 렌더링하도록 도와주는 것)
• react-scripts (SPA구현과 복잡한 모던프론트엔드 기술 세팅이 준비된 것)
• cra-template (관련패키지)
• 위에 것들이 설치되며, Happy hacking! 이 나오면 설치 완료된 것임.

4) 폴더 구성

• node_modules : 쉽게 리액트를 개발할 수 있도록 패키지를 저장한 폴더.
• package.jason, package-lock.jason 파일에 패키지 목록과 중요한 정보가 적혀있음.
  • 리액트 앱 실행 명령어 : react-scripts start = npm run start(package.jason 파일에서 확인 가능)
• src폴더 : 새로만들 앱의 필수적 파일이 저장되어이 있음.
  • index.js
    • import라는 키워드를 통해 node.js에 설치된 패키지를 불러오거나 src 디렉토리에 설치된 js파일 불러올 수 있다.
    • 지워도 되는 부분 : X
      

// React로 개발한 것<App />을 HTML 엘리먼트에 접근해서 넣어준다
ReactDOM.render(
  <App />, // React로 개발한 부분
  document.getElementById('root') // DOM으로 원하는 HTML 엘리먼트 위치 가져옴
);

• 랜덤 명언 리액트 앱 코딩