reactでcookieを扱う - masalibの日記

社内の勉強会でreactをおこなっているのですがcookieを扱う部分ではまってしまい、５人がかかりで調査したのですがわからず宿題になってしまいました

react-cookieというモジュールをインストールをしたのですがサンプルの理解できず時間がかかってしまいました自分の理解も含めてブログにのこします

モジュールインストール
index.jsの修正
app.jsの修正
感想
参考URL
参考本
モジュールインストール
index.jsの修正
app.jsの修正
Hello {this.state.name}
Hello {this.state.name}
- app.jsの修正の解説５
感想
参考URL
参考本

モジュールインストール

create-react-appでサンプルappを作成します
その後、今回使用する「react-cookie」をインストールする

cd 適当なフォルダ（自分の場合はc:\git）
create-react-app cookie
cd cookie
npm install react-cookie
npm install

index.jsの修正

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { CookiesProvider } from 'react-cookie'	// ←react-cookeもモジュールを読み込む

// デフォルトのappのタグに対してCookiesProviderをくくる
ReactDOM.render(
  <cookiesprovider>
    <app>
  </app></cookiesprovider>, document.getElementById('root') )
registerServiceWorker()

index.js側でcookieを受けれるcreate-react-appでサンプルappを作成します
その後、今回使用する「react-cookie」を設定する

app.jsの修正

ソースです

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { withCookies, Cookies } from 'react-cookie';
import PropTypes from 'prop-types';	// 解説１

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};		// 解説１
    this.handleChange = this.handleChange.bind(this);	// 解説１
    this.handleNameChange = this.handleNameChange.bind(this);	// 解説１
  }

  
  componentWillMount() {
    const { cookies } = this.props;		// 解説２
      this.state = {
      name: cookies.get('name') || '名無しさん'	// 解説２
    };
  }
  handleChange(event) {
    this.setState({value: event.target.value});	// 解説３
  }

  handleNameChange(event) {
    const { cookies } = this.props;			// 解説３
    var name = this.state.value;			// 解説３
    cookies.set('name', name, { path: '/' });	// 解説３
    this.setState({ name });			// 解説３
  }

  render() {
    return (
      <div classname="App">
		<!-- 解説４ -->
        <h1>Hello {this.state.name} </h1>
        <form onsubmit="{this.handleNameChange}">
          <label>
            Name:
            <input type="text" value="{this.state.value}" onchange="{this.handleChange}/">
          </label>
          <input type="submit" value="Submit">
        </form>
      </div>
    );
  }
}

export default withCookies(App);// 解説５

app.jsの修正の解説１

	import PropTypes from 'prop-types';

prop-typesをimportしています
Propは基本的にはCompnentのattributeとして定義してComponentの中ではthis.props.xxxとして参照する

    this.state = {value: ''};		
    this.handleChange = this.handleChange.bind(this);	
    this.handleNameChange = this.handleNameChange.bind(this);

this.handleChangeとthis.handleNameChangeで
this.setStateを使うために設定する

app.jsの修正の解説２

  componentWillMount() {
    const { cookies } = this.props;
  
    this.state = {
      name: cookies.get('name') || '名無しさん'
    };
  }

ComponentがDOMツリーに追加される前に一度だけ呼ばれます。
なので初期化処理を行うのに適しています。
この中でsetStateするとrender時にまとめて行われます。<<qiita.com
より引用
this.state = {name: cookies.get('name') || '名無しさん'};
の部分でcookiesから取得してもしなかったら名無しさんを設定しています
app.jsの修正の解説３
  handleChange(event) {
    this.setState({value: event.target.value});	
  }

  handleNameChange(event) {
    const { cookies } = this.props;			
    var name = this.state.value;			
    cookies.set('name', name, { path: '/' });	
    this.setState({ name });			
  }
handleChangeの関数では
テキストボックスで入力した内容をリアルタイムで
Stateに保存しています
handleNameChangeの関数では
state.valueにある内容をcookieにセットしています
app.jsの修正の解説４

<h1>Hello {this.state.name} </h1>
<form onsubmit="{this.handleNameChange}">
  <label>
    Name:
    <input type="text" value="{this.state.value}" onchange="{this.handleChange}/">
  </label>
  <input type="submit" value="Submit">
</form>
{this.state.name}は初期設定している内容または変更した内容を出力している
<input type="text" value="{this.state.value}" onchange="{this.handleChange}/">
は入力した内容を変更されるたびにonChangeで設定されているthis.handleChangeが
呼ばれて、テキストボックスの内容をthis.state.valueにいれている
<form onsubmit="{this.handleNameChange}">
はthis.state.valueの内容をcookieとthis.state.nameにいれています
app.jsの修正の解説５
export default withCookies(App);
レンダリングの部分に加えて、cookieも返すという部分
これがないとcookieがindexに返さないので保存ができない
感想

めんどくさい・・・
もう少し楽なればいいのにと思う

参考URL

http://shibe97.tumblr.com/post/133625712157/reactアプリケーション内でcookieを使う
shibe97.tumblr.com
参考本

いまどきのJSプログラマーのための Node.jsとReactアプリケーション開発テクニック
作者: クジラ飛行机
出版社/メーカー: ソシム
発売日: 2017/07/26
メディア: 単行本
この商品を含むブログを見る
Reactではじめるフロントエンド開発入門
作者: 中野仁
発売日: 2017/11/14
メディア: Kindle版
この商品を含むブログを見る
Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門
作者: Stoyan Stefanov,牧野聡
出版社/メーカー: オライリージャパン
発売日: 2017/03/11
メディア: 単行本（ソフトカバー）
この商品を含むブログを見る

社内の勉強会でreactをおこなっているのですがcookieを扱う部分ではまってしまい、５人がかかりで調査したのですがわからず宿題になってしまいました
react-cookie
react-cookieというモジュールをインストールをしたのですがサンプルの理解できず時間がかかってしまいました自分の理解も含めてブログにのこします

モジュールインストール

index.jsの修正

app.jsの修正

app.jsの修正の解説１

app.jsの修正の解説２

app.jsの修正の解説３

app.jsの修正の解説４

app.jsの修正の解説５

感想

参考URL

参考本
モジュールインストール

create-react-appでサンプルappを作成します

その後、今回使用する「react-cookie」をインストールする
cd 適当なフォルダ（自分の場合はc:\git）

create-react-app cookie

cd cookie

npm install react-cookie

npm install 
index.jsの修正

src/index.js
import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import registerServiceWorker from './registerServiceWorker';

import { CookiesProvider } from 'react-cookie'	// ←react-cookeもモジュールを読み込む
// デフォルトのappのタグに対してCookiesProviderをくくる

ReactDOM.render(

  

    

  , document.getElementById('root') )

registerServiceWorker()
index.js側でcookieを受けれるcreate-react-appでサンプルappを作成します

その後、今回使用する「react-cookie」を設定する
app.jsの修正

ソースです
import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css';

import { withCookies, Cookies } from 'react-cookie';

import PropTypes from 'prop-types';	// 解説１
class App extends Component {

  constructor(props) {

    super(props);

    this.state = {value: ''};		// 解説１

    this.handleChange = this.handleChange.bind(this);	// 解説１

    this.handleNameChange = this.handleNameChange.bind(this);	// 解説１

  }
  

  componentWillMount() {

    const { cookies } = this.props;		// 解説２

      this.state = {

      name: cookies.get('name') || '名無しさん'	// 解説２

    };

  }

  handleChange(event) {

    this.setState({value: event.target.value});	// 解説３

  }
  handleNameChange(event) {

    const { cookies } = this.props;			// 解説３

    var name = this.state.value;			// 解説３

    cookies.set('name', name, { path: '/' });	// 解説３

    this.setState({ name });			// 解説３

  }
  render() {

    return (

      
"App">
		
        
Hello {this.state.name} 
        {this.handleNameChange}>

          

            Name:

            "text" value={this.state.value}  onChange={this.handleChange}/>

          

          "submit" value="Submit" />

        
      
    );

  }

}
export default withCookies(App);// 解説５
app.jsの修正の解説１
	import PropTypes from 'prop-types';	
prop-typesをimportしています

Propは基本的にはCompnentのattributeとして定義してComponentの中ではthis.props.xxxとして参照する
    this.state = {value: ''};		

    this.handleChange = this.handleChange.bind(this);	

    this.handleNameChange = this.handleNameChange.bind(this);	
this.handleChangeとthis.handleNameChangeで

this.setStateを使うために設定する
app.jsの修正の解説２
  componentWillMount() {

    const { cookies } = this.props;

  

    this.state = {

      name: cookies.get('name') || '名無しさん'

    };

  }
ComponentがDOMツリーに追加される前に一度だけ呼ばれます。

なので初期化処理を行うのに適しています。

この中でsetStateするとrender時にまとめて行われます。<<qiita.com

より引用
this.state = {name: cookies.get('name') || '名無しさん'};

の部分でcookiesから取得してもしなかったら名無しさんを設定しています
app.jsの修正の解説３
  handleChange(event) {

    this.setState({value: event.target.value});	

  }
  handleNameChange(event) {

    const { cookies } = this.props;			

    var name = this.state.value;			

    cookies.set('name', name, { path: '/' });	

    this.setState({ name });			

  }
handleChangeの関数では

テキストボックスで入力した内容をリアルタイムで

Stateに保存しています
handleNameChangeの関数では

state.valueにある内容をcookieにセットしています
app.jsの修正の解説４
Hello {this.state.name} 
{this.handleNameChange}>

  

    Name:

    "text" value={this.state.value}  onChange={this.handleChange}/>

  

  "submit" value="Submit" />
{this.state.name}は初期設定している内容または変更した内容を出力している
"text" value={this.state.value}  onChange={this.handleChange}/>
は入力した内容を変更されるたびにonChangeで設定されているthis.handleChangeが

呼ばれて、テキストボックスの内容をthis.state.valueにいれている
{this.handleNameChange}>
はthis.state.valueの内容をcookieとthis.state.nameにいれています
app.jsの修正の解説５
export default withCookies(App);
レンダリングの部分に加えて、cookieも返すという部分

これがないとcookieがindexに返さないので保存ができない
感想

めんどくさい・・・

もう少し楽なればいいのにと思う

参考URL

http://shibe97.tumblr.com/post/133625712157/reactアプリケーション内でcookieを使う
shibe97.tumblr.com

参考本

いまどきのJSプログラマーのための Node.jsとReactアプリケーション開発テクニック
作者: クジラ飛行机
出版社/メーカー: ソシム
発売日: 2017/07/26
メディア: 単行本
この商品を含むブログを見る
Reactではじめるフロントエンド開発入門
作者: 中野仁
発売日: 2017/11/14
メディア: Kindle版
この商品を含むブログを見る
Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門
作者: Stoyan Stefanov,牧野聡
出版社/メーカー: オライリージャパン
発売日: 2017/03/11
メディア: 単行本（ソフトカバー）
この商品を含むブログを見る
no