[React] 리액트를 활용한 기본 정의 및 환경설정

<React를 사용한 영화 App 만들어 보기> - 노마드코더

1. API yts.ag 클론 코딩을 통해서 만들어 볼 것이다.

2. 트랜스 파일러( 웹 팩 )

3. 리액트 코드를 브라우저가 이해할수 있는 언어로 바꿔주는것

(JS 6 Version)

https://webpack.github.io/

4. 리액트로 작업하려면 웹팩과 같은 모듈번들러를 사용한다

5. 페이스북이 create-react-app 이라는것을 제공해준다. 그러면 모듈번들러 같은걸 사용할 필요가 없다

<React&& npm(node package module)   환경 설정 하기 >

1. WebStorm Install -> 나는 Bracket을 사용하였다

2. Node.js Install

3. cmd

C:\>cd movie_app_react

C:\movie_app_react>npm install -g create-react-app

movie_app을 만들기 위함(패키지 설치하기 위함)

C:\movie_app_react>create-react-app movie_app

* npm은 package.json 파일에 의존적이므로 깔아줘야한다

C:\movie_app_react>npm init

4. 이제 create-react-app 가 설치되었으면 npm start 로 시작을 해준다.

C:\movie_app_react>cd movie_app

C:\movie_app_react\movie_app>npm start

5. 이렇게 npm start로 시작을 하게 되면

localhost:3000 으로 된 웹페이지가 하나 뜨게 될것이다. 이건 바로 미리 설치된 개발 서버를 보게 될수 있다.

이러한 서버도 우리가 직접 만들수도 있지만, 다른 강의에서 다루겠음

6. 개발서버 시작하면 

Starting the development server...

Compiled successfully!

You can now view movie_app in the browser.

  Local:            http://localhost:3000/

  On Your Network:  http://192.168.xxxxxx

Note that the development build is not optimized.

To create a production build, use npm run build.

7. 이제 새로운 cmd창을 띄운후에 movie_app 에서 code. 에디터를 열것이다.

windows -> 브라켓을 사용해서 열것이다!

브라켓으로 해서 열어보면 여러가지것들이 세팅된것을 확인할 수 있음

브라켓에서 App.js 파일 건드려보자

바로 반응해서 변화할껄?

CRA를 사용하면 바로 즉각반응한다는것이다. cmd창에서 compiling.... 문구가 뜨면서

확인해보면

바로 refresh 되는것을 확인할 수 있음!!!

configuration의 귀찮음 없이 개발서버를 만들어준다.

- MAC을 사야되나..

Windows 환경에서 불편하네..