ページ

2017年12月10日日曜日

改めてReactをやってみる1

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

React

:computer:環境構築


Create React App というものが用意されているらしい。
折角なのでそれを使って環境を構築してみる。
sh
$ npm install -g create-react-app
$ create-react-app react-sample
Editor
こちらにおすすめパッケージやらが乗っている
とりあえずAtom使いなのでlanguage-babelはインストール

:pencil: 実装


簡単なサンプル

チュートリアルにもあるように一旦src/*のファイルを削除
index.cssindex.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'));
実行結果
image.png (15.3 kB)

:bomb: バッドノウハウ


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

:link: 関連リンク


0 件のコメント:

コメントを投稿