리액트 입문기 - 리액트 프로젝트 생성

지금부터 리액트 프로젝트를 생성해서 리액트에 대해서 알아보도록 하겠습니다.

nodejs설치

리액트 설치를 위해 nodejs를 설치합니다. nodejs설치시 npm도 같이 설치 됩니다.

리액트 프로젝트 생성

cmd 창을 열어 프로젝트를 생성할 경로로 이동합니다.

npm init react-app <프로젝트 이름>
을 입력하여 리액트 프로젝트를 만듭니다.

생성이 완료되었다면 프로젝트 폴더로 이동후
npm start 로 프로젝트 서버를 실행시켜 줍니다.

node-modules

리액트를 설치하면 node-modules폴더가 생기면서 이안에 리액트가 설치가 되어집니다. 그리고 js파일에서 리액트를 불러올때 import React from 'react' 를 사용하여 불러올수 있습니다.

번들러

웹브라우저에는 import, export를 사용할 수 없기때문에 이를 위해 번들러를 사용합니다.
리액트의 경우 webpack을 사용합니다.
번들러 도구를 사용하면 import로 불러온 모듈을 하나의 파일로 생성해줍니다.

로더

웹팩을 사용하면 SVG, CSS같은 파일들을 불러올 수 있습니다. 이렇게 파일을 불러오는 것을 웹팩의 로더(loader) 라고 합니다.

참고자료
리액트를 다루는 기술