React.jsを勉強した[MEMO]

10671 ワード

JavaScript React 勉強メモ JavaScript テキストリンク

React.js勉強まとめ

久々にQiita投稿。

React.jsとは

Facebook社が開発しているライブラリ。
コンポーネント思考のJavaScriptライブラリ。
必要なコンポーネントを作成して、必要なページごとに読み込む。

私が注目しているCMSであるDrupalでは標準サポートすることが決定したらしい。
DrupalはModuleとしても提供してますね。
https://www.drupal.org/project/react

勉強方法・参考サイト

公式のチュートリアル

チュートリアル

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から本と同じバージョンを落としました。
https://github.com/facebook/react/releases/tag/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にコピペが量産されるので、それをコンポーネントとして一つのものにしておけるのはすごいメリットだなと感じました。

React.jsがAngularを邪魔するということもないはずなので採用してみたいな。

[^1]: 別に私個人が勉強をしたくないとかじゃなくて、新参者のハードルが高い。PGやSEなら勉強するのが当たり前という声は出そうだが、それはそれ。

Author And Source

この問題について(React.jsを勉強した[MEMO]), 我々は、より多くの情報をここで見つけました https://qiita.com/UltraBirdTech/items/0bd7f2cc6e39e8bc3a95

著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。

Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .