ミームジェネレータを構築することによって反応を学ぶ

ミームは素晴らしいです-彼らはアイデアや意見を記述するような楽しい方法です.だから私はミームジェネレータジェネレータを選んだのは偶然ではないfree React course Scrimbaでアプリは、APIからランダムなミーム画像を引っ張って、あなたの非常に独自の、パーソナライズされたミームを作成するためにそれの上にテキストを配置することによって動作します.
だから、この記事では、私はあなたのアプリを作成するためのステップバイステップガイドを与えるよ.あなたが混乱するならば、あなたはScrimbaコースでこれらのステップに続くこともできますthis lecture.
そして、あなたが私の教えスタイルが好きで、あなたがこのチュートリアルを終えたあと、より厳しい挑戦のために気分になっているならば、チェックしてくださいmy upcoming advanced course Scrimbaで

Note: You should already be fairly familiar with some of the fundamental concepts of React, like components, state, props, and lifecycle methods. Also, this tutorial doesn't use Hooks, but in my upcoming course we'll cover Hooks in depth and get tons of practice using them.

BoilerPlateの作成とアプリケーションコンポーネントのレンダリング

我々が行う必要がある最初のアプリケーションのためのボイラープレートコードを作成することです.これを行うにはReact and ReactDOM 使用ReactDOM コンポーネントをレンダリングするApp , 後で作成します.それから我々はApp ' root 'のコンポーネント.また、インポートApp そのファイルから"./App" , 我々はすぐに作成されます.

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

ReactDOM.render(<App />, document.getElementById('root'));

その後、我々を作成するApp.js ファイル.その中で、私たちはApp 今のところ、単純な<h1> . その後、エクスポートします.The <h1> 我々は、アプリが正しく画面に表示されていることを確認することができます.

import React from 'react';
function App() {
  return <h1>Hello world!</h1>;
}
export default App;

結果として出力されます.

ヘッダーとmemegeneratorコンポーネントの作成

次に、ヘッダーとmemegeneratorコンポーネントを作成します.MemoryGeneratorはAPIに呼び出し、データを状態に保持します.
の作成から始めましょうHeader.js ファイル.ヘッダーは表示にのみ使用されるコンポーネントですので、機能コンポーネントである必要があります.今のところ、コンポーネントは単純な<h1> . 作成後、ヘッダーをエクスポートします.

import React from 'react';
function Header() {
  return <h1>HEADER</h1>;
}
export default Header;

次に、我々はMemeGenerator.js ファイル.としてMemeGenerator コンポーネントはデータを保持し、APIへの呼び出しを行います.我々はまだ反応を輸入する必要があります、そして、それがクラス構成要素であるので、我々は輸入しますComponent これはnamed import ).
MemeGeneratorはAを必要とするconstructor() コールsuper() そして、それが状態を保持しているように、我々は現在それにいくつかの空の状態を加えます.ヘッダーコンポーネントのように、我々は単純になります<h1> で始める.その後、memegeneratorをエクスポートします.

import React, { Component } from 'react';
class MemeGenerator extends Component {
  constructor() {
    super();
    this.state = {}; //empty state
  }
  render() {
    return <h1>MEME GENERATOR SECTION</h1>;
  }
}
export default MemeGenerator;

今、我々は両方のヘッダーとmemegeneratorをインポートするApp.js そして、私たちのアプリケーションコンポーネントのそれぞれのインスタンスを作成します.コンポーネントを正しく表示するには、<div> .

import React from 'react';
import Header from './Header';
import MemeGenerator from './MemeGenerator';
function App() {
  return (
    <div>
      <Header />
      <MemeGenerator />
    </div>
  );
}
export default App;

ヘッダーコンポーネントを完了します。

完了する<Header> コンポーネントを挿入することによって<img> srcをイメージのURLに設定します.次に、<p> 我々のアプリの名前でタグを付け、それらの両方をセマンティックHTML 5にラップする<header> タグ.

function Header() {
  return (
    <header>
      <img
        src='http://www.pngall.com/wp-content/uploads/2016/05/Trollface.png'
        alt='Problem?'
      />
      <p>Meme Generator</p>
    </header>
  );
}

スタイリングがこのコースの範囲の外にあるので、CSSスタイルはすでに作成されていて<header> タグ.結果は次のようになります.

それは、学習者は常にスタイリングで再生することができますし、自分で自分のCSSスキルを磨く.と<Header/> 今完了すると、チャレンジの残りの部分で行われます<MemeGenerator/>

4 .初期化状態

我々は現在、それがトップテキスト、一番下のテキストとランダムなイメージ(すでに供給される)を保存するように状態を初期化しなければなりません.
これをするために、私たちは、私たちが<MemeGenerator/> 我々が元々それを建てたとき.初期化topText and bottomText 空の文字列としてrandomImg 指定URLとして.

class MemeGenerator extends Component {
  constructor() {
    super();
    this.state = {
      topText: '',
      bottomText: '',
      randomImg: 'http://i.imgflip.com/1bij.jpg'
    };
  }
}

API呼び出しの作成

次に、提供されたURLへのAPI呼び出しを行い、データを保存しますresponse.data.memes ) 新しい状態プロパティにallMemeImgs .
エンドポイントからデータをロードする必要があるときに、コンポーネントを使用するには、リクエストを行うには良い場所ですcomponentDidMount() ライフサイクル法.コンポーネントがマウントされるとすぐに、ネイティブfetch() 関数を指定したURLにコールする.

componentDidMount() {
  fetch("https://api.imgflip.com/get_memes")
}

これは、我々がJavaScriptオブジェクトに変わる約束を返します.json() メソッド.

componentDidMount() {
  fetch("https://api.imgflip.com/get_memes")
    .then(response => response.json())
}

それから、私たちは、memes配列をresponse.data .

componentDidMount() {
fetch("https://api.imgflip.com/get_memes")
  .then(response => response.json())
  .then(response => {
  const { memes } = response.data
  })
}

さて、結果を新しい状態プロパティに保存しますallMemeImgs . これを行うには、allMemeImgs 空の配列.

this.state = {
  topText: '',
  bottomText: '',
  randomImg: 'http://i.imgflip.com/1bij.jpg',
  allMemeImgs: []
};

今すぐにcomponentDidMount() , 我々は状態を設定します.前の状態が何であるかに興味がないのでallMemeImgs ミーム.

componentDidMount() {
  fetch("https://api.imgflip.com/get_memes")
    .then(response => response.json())
    .then(response => {
  const { memes } = response.data
  this.setState({ allMemeImgs: memes })
  })
}

それが働くことを保証するためにconsole.log 最初の項目は次のようになります.

全体の概観は、ここにありますcomponentDidMount() 関数.

componentDidMount() { //ensure that data is fetched at the beginning
  fetch("https://api.imgflip.com/get_memes") //call to URL
    .then(response => response.json()) //turn promise into JS object
    .then(response => {
  const { memes } = response.data //pull memes array from response.data
  console.log(memes[0]) // check data is present
  this.setState({ allMemeImgs: memes }) // set allMemeImgs state
})
}

6 .入力フォームの作成

我々は今、最終的には、上部と下部のテキストを入力するユーザーを許可するフォームを作成します.HTMLでこれを行う<form> タグとシンプル<button> と言う.我々は、事前に提供されるCSSでそれをスタイル.

render() {
  return (
    <div>
      <form className="meme-form">
        <button>Gen</button>
      </form>
    </div>
  )
}

フォームへの入力フィールドの追加

次に、2つの入力フィールド(一番上のテキストのためのものと一番下のテキストのための1つ)を加えるのは、我々次第です.フォームは制御されたフォームである必要がありますので、そのために必要な属性をすべて追加する必要があります.私たちはonChange 後でハンドラ.
両方の型を持つ2つの入力フィールドを作成しますtext と適切な名前属性(topText and bottomText ). ラベルを使用するのではなく、プレースホルダーを使用します.
最後に、これを作るためにcontrolled form , この値は、state with {this.state.topText} and {this.state.bottomText} .

render() {
  return (
    <div>
      <form className="meme-form">
        <input
          type="text"
          name="topText"
          placeholder="Top Text"
          value={this.state.topText}
        />
        <input
          type="text"
          name="bottomText"
          placeholder="Bottom Text"
          value={this.state.bottomText}
        />
        <button>Gen</button>
      </form>
    </div>
  )
}

8 . onchangeハンドラを作成する。

さて、入力フィールドのすべての変更に対応する状態を更新するOnChangeハンドラを作成します.
まず、我々はhandleChange() イベントを受け取る関数.

handleChange(event) {

}

さて、我々はonChange 両方の入力フィールドが等しいhandleChange .

<form className='meme-form'>
  <input
    type='text'
    name='topText'
    placeholder='Top Text'
    value={this.state.topText}
    onChange={this.handleChange}
  />
  <input
    type='text'
    name='bottomText'
    placeholder='Bottom Text'
    value={this.state.bottomText}
    onChange={this.handleChange}
  />
  <button>Gen</button>
</form>

我々は、コンストラクタでメソッドをバインドするのを忘れないようにする必要があります.

constructor() {
  super()
  this.state = {
    topText: "",
    bottomText: "",
    randomImg: "http://i.imgflip.com/1bij.jpg",
    allMemeImgs: []
  }
  this.handleChange = this.handleChange.bind(this)
}

新しいテストhandleChange() 関数は、我々は単純なconsole.log :

handleChange(event) {
  console.log("Working!")
}

正しく発火するなら、次のようになります.

今、埋め込むhandleChange() 関数.これを行うには、イベントから名前と値のプロパティをプルします.我々が更新することになっている状態の名前を得ることができるように、ターゲットをtopText or bottomText ) ボックスに入力される値.

handleChange(event) {
  const { name, value } = event.target
}

我々は今、状態を更新するためにこれらを使用します.前の状態が何であるかに興味がないので、我々はちょうど我々が[name] を入力フィールドに入力します.

handleChange(event) {
const {name, value} = event.target
this.setState({ [name]: value })
}

9 .トップとボトムのテキストと一緒にmemeイメージを表示する

我々は今、アプリの上部と下部のテキストと一緒にミームの画像を表示する必要があります.を挿入する<img> 下のタグ<form> を設定し、randomImg を使用してソースとして初期化したsrc={this.state.randomImg} . 次に2を加える<h2> また、状態に保存される対応するテキストを表示するタグ.これらはすべて包まれているdiv と事前にスタイルを提供meme クラス.

<div className='meme'>
  <img src={this.state.randomImg} alt='' />
  <h2 className='top'>{this.state.topText}</h2>
  <h2 className='bottom'>{this.state.bottomText}</h2>
</div>

我々は今、テキストボックスに入力してアプリをテストすることができます.状態がすべてのキーストロークに正しく設定されているので、イメージに表示されるテキストは、入力するたびに変更されます.

10 .トップとボトムのテキストと一緒にランダムなミーム画像を表示する

今、私たちは私たちのランダムから選択するmemeイメージを表示するメソッドを作成する必要がありますallMemeImgs 配列Gen ボタンをクリックします.配列の選択した画像のプロパティは.url .
我々はこの仕事をより小さな部分に割り込むことができる.
まず、フォームのonSubmit 我々の新しいメソッドの名前を等しくするためにhandleSubmit() .<form className="meme-form" onSubmit={this.handleSubmit}>私たちは今handleSubmit() 上記の関数render() 関数.イベントのデフォルトをpreventする必要があります.それ以外の場合、メソッドはページを更新しようとします.

handleSubmit(event) {
  event.preventDefault()
}

また、バインドする必要がありますhandleSubmit() 我々の中でconstructor() .

constructor() {
  super()
  this.state = {
    topText: "",
    bottomText: "",
    randomImg: "http://i.imgflip.com/1bij.jpg",
    allMemeImgs: []
  }
  this.handleChange = this.handleChange.bind(this)
  this.handleSubmit = this.handleSubmit.bind(this)
}

今、私たちは、ランダムな番号を取得する必要がありますそのインデックスからのミームを取得し、設定randomImg に.url ランダムアイテムの.

handleSubmit(event) {
  event.preventDefault()
  // get a random int (index in the array)
  // get the meme from that index
  // set `randomImg` to the `.url` of the random item I grabbed
}

乱数を得るために、我々は使用しますMath.floor(Math.random) . それが我々のインデックスの1つであることを確認するためにallMemeImgs arrayの長さを乗算します.

const randNum = Math.floor(Math.random() * this.state.allMemeImgs.length);

現在設定randMemeImg 等しいallMemeImgs , インデックス付きでallMemeImgs としてrandNum もうだめだ.次に.url それの最後まで.

const randMemeImg = this.state.allMemeImgs[randNum].url;

今、私たちがする必要があるのは、RandomrandMemeImg .

this.setState({ randomImg: randMemeImg });

完成handleSubmit() 関数は以下のようになります:

handleSubmit(event) {
  event.preventDefault()
  const randNum = Math.floor(Math.random() * this.state.allMemeImgs.length)
  const randMemeImg = this.state.allMemeImgs[randNum].url
  this.setState({ randomImg: randMemeImg })
}

ミームジェネレータ

我々は今Memeジェネレータアプリケーションを完了していると私たちがヒットするたびに別の画像を得るGen ボタンを入力します.
我々の学習のために、我々はコードで遊ぶことができて、我々がそれを改善することができるかどうか別のAPIからイメージを得るかどうかを見ることができました.いくつかの本当に頑丈な練習のために、我々はすべてのコードを削除することができますし、再びゼロからそれを構築してみてください.
チュートリアルを通じて、このプロジェクトで使用されるすべてのスキルを学ぶにおめでとうございます.
そして、あなたがそれの準備ができている場合は、私の来るをチェックアウトadvanced course , それは反応でプロレベルに行くよ!