React를 배우는 가운데 반드시 누르고 싶은 것 ①

1. 소개

스마트 폰 앱을 개발할 때 React Native가 유행하고있는 것 같습니다.
React Native를 만지기 전에 먼저 React에 대해 공부하고 싶지 않다면 기사에 정리해 두고 싶습니다.

2. React란?

개발자는 Facebook으로 한마디로 UI 부품을 만들기 위한 javaScript 라이브러리가 됩니다.
Facebook, Instagram, GitHub ATOM, Twitter 모바일 등에서 사용되고 있습니다.

3. React의 특징

3-1. Just the UI

프레임워크가 아니라 어디까지나 UI를 구축하기 위한 라이브러리가 됩니다. MVC에서 말하는 V만 기능을 제공합니다.
라이브러리에 속하기 때문에 Angular.js 및 Backbone.js와 함께 사용할 수 있습니다.

3-2. Virtual DOM

실제의 DOM과 쌍을 이루는 구조체를 준비해, 그 구조체에 대해서 처리를 실시합니다.
그 결과 태어난 차분만을 실제의 DOM에 반영하는 것으로, UI 표현의 고속화를 실현하고 있습니다.

3-3. Data flow

데이터 변경에 따라 UI 변경이 이루어지는 단방향 데이터 바인딩 메커니즘이 사용됩니다.
따라서 코드의 복잡성을 피하고 간단한 설계가 가능합니다.
(덧붙여서 Vue.js는 양방향 데이터 바인딩)

4. React로 만든 웹 앱

＜ Made with React ＞

위의 사이트에서 React(혹은 React Native)로 만들어진 웹 앱이 갤러리 형식으로 게재되어 있습니다. React를 사용하면 이런 것을 만들 수 있다고 이미지할 수 있을지도 모릅니다.

5. React 환경 구축

5-1. Node.js 설치

React 환경 구축에는 Node.js(Ver4 이상)가 설치되어 있어야 합니다.
Node.js 설치 방법은 아래를 참조하십시오.

Node.js를 배우는 동안 반드시 누르고 싶은 것

5-2. React 설치

다음 명령을 실행하기만 하면 됩니다.

npm install -g create-react-app

6. 앱 생성 및 서버 시작 확인

6-1. 앱 만들기

다음 명령을 실행합니다.

create-react-app test-app (作成したいフォルダ名)

그러면 다음과 같은 구성으로 폴더를 만들 수 있습니다.

6-2. 서버 시작 확인

만든 폴더로 이동하여 서버를 시작합니다.

cd test-app  // 移動して
npm start    // 起動！

브라우저에서 http://localhost:3000/로 이동합니다.
아래와 같은 화면이 표시되면 OK입니다.

7. IDE

React의 IDE는 Visual Studio Code가 권장합니다.
Visual Studio Code에서는 다음과 같이 디버깅을 수행할 수 있습니다.

7-1. Debugger for Chrome 설치

Visual Studio Code의 확장 메뉴에서 Debugger for Chrome을 설치합니다.

7-2. launch.json 설정

launch.json을 열고 다음과 같이 설정합니다.
(url, webRoot는 환경에 맞게 다시 작성하십시오.)

7-3. 디버깅

서버가 시작되지 않은 경우 시작합니다.
그 후 다음 버튼에서 디버깅을 할 수 있습니다. (메뉴에서 디버그 ⇒ 디버그 시작에서도 OK)
물론 브레이크 포인트도 있습니다.
테카 디버그 실행과 동시에 기동할 수도 있는 것인가? ? ?

Reactide

React 전용의 IDE < Reactide . . 정식으로 출시될 때까지 사용은 삼가하는 것이 좋을지도 모릅니다.
뭔가 정보를 가지고있는 분은 전개하실 수 있으면 기쁩니다.

8. 결론

아직 구문은 좀처럼 익숙하지 않습니다 ^^;

Node.js를 배우는 동안 반드시 누르고 싶은 것

에서 공부한 것과 함께 Node.js + React 앱을 만들고 싶습니다.