[ReactJS] React.js 프로젝트 셋업

개발환경 구성하기

1) node.js 설치

$ brew install node

2) yarn 설치

npm을 wrappering 한 형태. npm 개선판. npm이 있어야 사용 가능 (npm은 node.js를 설치하면 자동으로 설치된다.)

$ brew install yarn

프로젝트 시작

create-react-app

webpack, babel 등 react를 사용할 때 같이 사용해야 할 라이브러리들을 별도의 설정 필요 없이 한 번에 설치해주는 명령어

참고: https://github.com/facebook/create-react-app

my-app이라는 이름으로 react 프로젝트 폴더를 생성한다고 하면,

$ yarn create react-app my-app

이후 해당 프로젝트를 실행하려면

$ cd my-app
$ yarn start

프로젝트 생성 후 기초 작업

1. src폴더 하위 App.css, index.css, logo.svg 삭제
2. index.js 파일에서 index.css에 대한 참조 구문 제거
3. App.js 파일에서 App.css, logo.svg 참조 구문 제거
4. App.js 파일에서 return 내부 JSX 내용 초기화

   const App = () => {
     return (
       <div>
         <h1>Hello React</h1>
       </div>
     );
   }