改めてReactをやってみる1

少し前にReactやったが、時間が過ぎたので改めてやってみる。

React

公式ページ

環境構築

---

Create React App というものが用意されているらしい。
折角なのでそれを使って環境を構築してみる。

sh

$ npm install -g create-react-app
$ create-react-app react-sample

Editor

こちらにおすすめパッケージやらが乗っている
とりあえずAtom使いなのでlanguage-babelはインストール

 実装

---

簡単なサンプル

チュートリアルにもあるように一旦src/*のファイルを削除
index.cssとindex.jsを追加し、index.jsを以下のように修正

js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

yarn startすると空のページが表示される。

コンポーネントを作る

チュートリアルにあるサンプルのコンポーネントを試してみる

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

ReactDOM.render(<ShoppingList name="Mark" />, document.getElementById('root'));

実行結果

 バッドノウハウ

---

create-react-appでエラー

error An unexpected error occurred: "https://registry.yarnpkg.com/setimmediate: socket hang up".
info If you think this is a bug, please open a bug report with the information provided in "/Users/xxxxx/react-sample/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
Error: socket hang up
    at TLSSocket.onHangUp (_tls_wrap.js:1124:19)
    at TLSSocket.g (events.js:292:16)
    at emitNone (events.js:91:20)
    at TLSSocket.emit (events.js:185:7)
    at endReadableNT (_stream_readable.js:974:12)
    at _combinedTickCallback (internal/process/next_tick.js:80:11)
    at process._tickCallback (internal/process/next_tick.js:104:9)
Error: socket hang up
    at TLSSocket.onHangUp (_tls_wrap.js:1124:19)
    at TLSSocket.g (events.js:292:16)
    at emitNone (events.js:91:20)
    at TLSSocket.emit (events.js:185:7)
    at endReadableNT (_stream_readable.js:974:12)
    at _combinedTickCallback (internal/process/next_tick.js:80:11)
    at process._tickCallback (internal/process/next_tick.js:104:9)

原因: 自分の場合はウィルス対策ソフトを一時的に無効化したらすんなり通った。。

 関連リンク

---

• tutorial