리액트는 jQuery 같은 것을 단순하게 <script>...</script>의 형태로 불러와서 사용하지 않습니다. 그렇게도 할 수 있지만 굉장히 제한적입니다. 대신 Node,yarn,Webpack,Babel 등의 도구를 설치하여 프로젝트를 설정해줘야 합니다.

이를 create-react-app를 통하여 쉽게 준비할 수 있습니다.

Webpack, Babel은 무은 용도 인가?

리액트 프로젝트를 만들면서, 컴포넌트를 여러가지 파일로 분리해서 저장할 것이고, 또 이 컴포넌트는 일반 자바스크립트가 아닌 JSX문법으로 작성합니다. 여러가지 파일을 한개로 결합하기 위해 Webpack 이라는 도구를 사용할 것이고, JSX를 비롯한 새로운 자바스크립트 문법들을 사용하기 위해서 Babel이라는 도구를 사용합니다.

create-react-app 설치 및 사용

설치

다음 명령어를 통해 설치합니다.

npm install -g create-react-app

만약에 yarn을 통해서 설치하고 싶다면 다음과 같이 입력합니다.

yarn global add create-react-app

사용

다음 명령어를 통해 사용합니다.

create-react-app react_test

실행은 다음과 같습니다.

cd react_test
yarn start

그렇다면 다음과 같은 페이지가 나타나게 됩니다.