React.js 공부 요약

오랜만에 Qiita 게시.

React.js란?

Facebook사가 개발하고 있는 라이브러리.
구성 요소 생각의 자바 스크립트 라이브러리.
필요한 구성 요소를 만들고 필요한 각 페이지에 로드합니다.

내가 주목하고 있는 CMS인 Drupal에서는 표준 지원하기로 결정한 것 같다.
Drupal은 Module로도 제공하고 있네요.
htps //w w. d루파l. 오 rg / p 로지 ct / rea ct

공부 방법・참고 사이트

공식 튜토리얼

튜토리얼

O'REILLY의 책

React 초보자 가이드

Let's Begin!!

npm install

npm install -g create-react-app

npm install -g create-react-app

/usr/local/bin/create-react-app -> /usr/local/lib/node_modules/create-react-app/index.js
/usr/local/lib
└─┬ [email protected] 
  ├─┬ [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └── [email protected] 
  │ ├── [email protected] 
  │ └── [email protected] 
  ├── [email protected] 
  ├─┬ [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ └── [email protected] 
  │ └─┬ [email protected] 
  │   └── [email protected] 
  ├─┬ [email protected] 
  │ ├── [email protected] 
  │ └─┬ [email protected] 
[email protected] 
  │   └── [email protected] 
  ├─┬ [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ └── [email protected] 
  ├─┬ [email protected] 
  │ ├─┬ [email protected] 
  │ │ └─┬ [email protected] 
  │ │   ├── [email protected] 
  │ │   ├─┬ [email protected] 
  │ │   │ └── [email protected] 
  │ │   ├─┬ [email protected] 
  │ │   │ ├─┬ [email protected] 
  │ │   │ │ ├── [email protected] 
  │ │   │ │ ├─┬ [email protected] 
  │ │   │ │ │ ├─┬ [email protected] 
  │ │   │ │ │ │ ├── [email protected] 
  │ │   │ │ │ │ └── [email protected] 
  │ │   │ │ │ └── [email protected] 
  │ │   │ │ ├─┬ [email protected] 
  │ │   │ │ │ └── [email protected] 
  │ │   │ │ └── [email protected] 
  │ │   │ └── [email protected] 
  │ │   ├─┬ [email protected] 
  │ │   │ ├─┬ [email protected] 
  │ │   │ │ └── [email protected] 
  │ │   │ ├── [email protected] 
  │ │   │ ├─┬ [email protected] 
  │ │   │ │ ├── [email protected] 
  │ │   │ │ ├── [email protected] 
  │ │   │ │ ├─┬ [email protected] 
  │ │   │ │ │ ├─┬ [email protected] 
  │ │   │ │ │ │ └── [email protected] 
  │ │   │ │ │ ├── [email protected] 
  │ │   │ │ │ └── [email protected] 
  │ │   │ │ ├─┬ [email protected] 
  │ │   │ │ │ ├── [email protected] 
  │ │   │ │ │ └── [email protected] 
  │ │   │ │ └─┬ [email protected] 
  │ │   │ │   └── [email protected] 
  │ │   │ ├── [email protected] 
  │ │   │ ├── [email protected] 
  │ │   │ ├── [email protected] 
  │ │   │ ├─┬ [email protected] 
  │ │   │ │ └─┬ [email protected] 
  │ │   │ │   └── [email protected] 
  │ │   │ └─┬ [email protected] 
  │ │   │   ├─┬ [email protected] 
  │ │   │   │ ├── [email protected] 
  │ │   │   │ └── [email protected] 
  │ │   │   └── [email protected] 
  │ │   └─┬ [email protected] 
  │ │     ├── [email protected] 
  │ │     └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └─┬ [email protected] 
  │ │   ├── [email protected] 
  │ │   └── [email protected] 
  │ └─┬ [email protected] 
  │   ├── [email protected] 
  │   └── [email protected] 
  ├── [email protected] 
  ├─┬ [email protected] 
  │ ├─┬ [email protected] 
  │ │ └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ └─┬ [email protected] 
  │ │   └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └─┬ [email protected] 
  │ │   └─┬ [email protected] 
  │ │     ├── [email protected] 
  │ │     └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └─┬ [email protected] 
  │ │   ├── [email protected] 
  │ │   ├── [email protected] 
  │ │   └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └── [email protected] 
  │ └── [email protected] 
  ├─┬ [email protected] 
  │ └── [email protected] 
  └─┬ [email protected] 
    └── [email protected]

다양한 들어 가지 마라.

module 작성

create-react-app my-app

create-react-app my-app


Creating a new React app in /Users/hatoritakuya/work/javascript/react/sample/my-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...


> [email protected] install /Users/[hogehoge]/react/sample/my-app/node_modules/fsevents
> node install

[fsevents] Success: "/Users/[hogehoge]/react/sample/my-app/node_modules/fsevents/lib/binding/Release/node-v48-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile

> [email protected] postinstall /Users/[hogehoge]/react/sample/my-app/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js

[email protected] /Users/[hogehoge]/react/sample/my-app
├─┬ [email protected] 
│ ├─┬ [email protected] 
│ │ ├── [email protected] 
│ │ ├─┬ [email protected] 
│ │ │ └─┬ [email protected] 
│ │ │   ├── [email protected] 

~~~~~~~~~~~~~~~~~~~~~~~~省略~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  │   └── [email protected] 
  ├─┬ [email protected] 
  │ └─┬ [email protected] 
  │   ├── [email protected] 
  │   └── [email protected] 
  └── [email protected] 

Success! Created my-app at /Users/[hogehoge]react/sample/my-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd my-app
  npm start

Happy hacking!

FW나 라이브러리가 커맨드만으로 필요한 모듈을 가지런히 해 준다.
좋은 시대에 태어나서 좋았다.

npm start

> npm start

> [email protected] start /Users/[hogehoge]/react/sample/my-app
> react-scripts start

Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://192.168.11.4:3000/

Note that the development build is not optimized.
To create a production build, use npm run build.

와우 일어났다.

Hello World

React 초보자 가이드 의 Hello World.

책의 내용은 조금 낡다(2018년 3월 현재).
Facebook에서 버전 관리하는 링크가 존재하지 않았습니다.
대신 Git에서 책과 같은 버전을 삭제했습니다.
htps : // 기주 b. 코 m / 후세 보오 k / 레아 ct / 레아 아세 s / 타 g / v15.4.1

<!DOCTYPE html>
<html>
   <head>
     <title>Hello React</title>
     <meta charset="utf-8">
   </head>
   <body>
     <div id="app">
     </div>
     <script src="react/react-15.4.1/build/react.js"></script>
     <script src="react/react-15.4.1/build/react-dom.js"></script>
     <script>
       ReactDOM.render(
         React.DOM.h1(null, "Hello world!"),
         document.getElementById("app")
       );
     </script>
   </body>
 </html>

실행 결과

meta 태그의 닫는 것을 잊어 2시간 빠진 것은 비밀.
이 책 하나대로 핥으면 버전 올려 보자.

정리·감상

Drupal이나 Rails등 서버측이 강한 CMS, FW를 선정하고 있는 경우는 유효한 선택사항이라고 생각한다.
이유는, 뷰측까지 리치인 FW를 채용해 공부 코스트나 복잡성을 주고 싶지 않기 때문.
예를 들면, 뒷면은 Rails, 표는 Angular로 하면 공부비용 오른다. 싫어. 무리. [^1]

그렇다면, 뒤의 처리와 View의 표시까지 Rails에 맡기고, 테이블은 React.js라든지로 가볍게 구현해 컴퍼넌트 추가 정도로 좋지 않을까.

또한 유사한 부품의 복사본을 막을 수 있는 것이 좋네요.
Angular로 개발하고 있으면, 화면은 다르지만 같은 기능(일람이나 모달 열기라든지)은 많이 실장하고 있다.
그때마다 Controller와 View에 copipe가 양산되기 때문에 그것을 컴포넌트로 하나로 해두는 것은 대단한 이점이라고 느꼈습니다.

React.js가 Angular를 방해한다는 것도 없을 것이므로 채용하고 싶다.

[^1]: 별로 나 개인이 공부하고 싶지 않다든가 아니라 신참자의 장애물이 높다. PG나 SE라면 공부하는 것이 당연하다는 목소리는 나올 것 같지만, 그것은 그것.

Reference

이 문제에 관하여(React.js를 공부한 [MEMO]), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/UltraBirdTech/items/0bd7f2cc6e39e8bc3a95

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

React.js를 공부한 [MEMO]