React를 browserify로 빌드하기

react의 구동 환경은 브라우저임에도 불구하고 react 컴포넌트들을 다운받아 보면
var React = require(‘react’);
이와 같이 시작하고 있는 것들을 심심찮게 보게 된다.
물론 이런 문법이 바로 브라우저에서 돌아갈리는 만무하다.
그래서 이럴때 필요한게 바로 browserify나 webpack이다.

개인적으로 browserify를 사용하므로 이에 대해 알아보자.

위의 명령어로 설치하고,

이와 같이 사용하게 된다. src.js 파일은 require()등이 등장하는 파일이고, dest.js파일은 브라우저에서 실행하게 될 아웃풋 파일이다.
그런데, react는 js가 아닌 jax문법이기 때문에 browserify가 바로 변환을 할 수가 없다.
그래서 또 필요한게 reactify 모듈

위의 명령어로 reactify를 설치한 후

이와 같이 browserify를 실행해주면 require()도 쓰고, jax로 짜여져있는 react프로젝트도 브라우저에서 실행가능한 형태로 변환되는것을 볼 수가 있다.
ECMAScript6로 코딩된것도 볼수 있는데 그럴땐 위 명령어에 –es6 옵션을 붙여주면 된다.