プロジェクトHere

コード日8日- 10日

これは個人的な反射のポスト私は私の2つの半日プロジェクトを作成するために行ったプロセスを詳述しています.私はジュニアコーダーであるので、あなたが私が何か奇妙なことをしたと思うならば、どうか私に話してください.この反射のポストは、私が私の思考プロセスを拡大することができて、私が学んだものを固くしようとすることができるように、あります.

目的

APIを使用してデータを収集し、表示する

別のエントリをルックアップし、データを取得する1つのAPIからデータを使用してください

関連するスクリプトを学ぶ

計画機能

風味レベル

相対サイジングスケール

タイミングで成長サイクルディスプレイ?

バグと後悔

クロムの上に現れない日の成長時間のためのメーター

セッティングタイミングの奇妙さ?それはハックのような感じで動作するようになった

プロセスのスクリーンショットを撮影していない

CSSトランジションの使用方法

タイプスクリプト

私が直接概念または言語への私の導入のためにチュートリアルに従わなかったのはこれが初めてです.私はすでにC -経線の基礎を知っているので、私はちょうど反応セットで使用されるタイプスクリプトの例を見つけて、私が得た誤りを捜して働いていました.だからここでどのように私の理解から動作します.
タイプスクリプトでは、変数のすべてを入力する必要があります.十分簡単.あなたはどのようなタイプが起こっている知っている必要があります.まあ、それは常に簡単ではない.それは私のベリーのルックアップのための状態に渡され、多くのデータを扱うときに厄介になったと何がすべての部分にあった定義する必要があります.多分、私は間違ってそれをしています、しかし、私が見たものから、私は本質的に2回ものを定めなければなりません.インターフェイスで一度、もう一度コンストラクタに初期値を与えます.正直、私はインターフェイスのより深い意味を知りません、それはちょうど規則正しい方法であなたの状態と小道具を定義するのに必要です.
成長サイクル成分

import React, { Component } from 'react';

interface IProps {
  id: number,
  growth_time: number
}

interface IState {
  timer: any,
  stage: string,
  x: number
}


class Growth extends Component<IProps, IState> {
  constructor(props: IProps) {
    super(props);
    this.state = {
      stage: '/growth/AllTreeSeed.png',
      timer: setInterval(this.setTimer, 0),
      x: 1
    }
  }

  render() {
    const { stage } = this.state;
    return (
      <img src={stage} />
    )
  }

  setTimer = () => {
    if (this.props.growth_time != 0) {
      clearInterval(this.state.timer);
      this.setState({ timer: setInterval(this.changeDisplay, 1000 * this.props.growth_time) });
    }
  }

  changeDisplay = () => {
    if (this.state.x >= 5) {
      this.setState({ x: 0 });
    }
    switch (this.state.x) {
      case 0: this.setState({ stage: `${process.env.PUBLIC_URL}/growth/AllTreeSeed.png` }); break;
      case 1: this.setState({ stage: `${process.env.PUBLIC_URL}/growth/AllTreeSprout.png` }); break;
      case 2: this.setState({ stage: `${process.env.PUBLIC_URL}/growth/${this.props.id}Taller.png` }); break;
      case 3: this.setState({ stage: `${process.env.PUBLIC_URL}/growth/${this.props.id}Bloom.png` }); break;
      case 4: this.setState({ stage: `${process.env.PUBLIC_URL}/growth/${this.props.id}Berry.png` }); break;
    }
    this.setState({ x: this.state.x + 1 })
  }

  componentWillUnmount() {
    clearInterval(this.state.timer);
  }
}

export default Growth;

setintervalとハック

この目標は、成長サイクルのグラフィックがどのくらいの期間成長するかに基づいて遅くなるということです.'時間'は1秒です.
ちょうど今私が前に持っていた問題を修正した、私がこの記事を書いている間、それを座らせることができませんでした.もともと私は5000 *状態にタイマーを設定します.小道具しかし、問題は、私のコンポーネントにおいて、私の値を初期化するとき、成長時間は0に設定されます.したがって、コンポーネントが開始すると、間隔は、すべての0 milisecondsを更新するように設定され、我々は、タイマーをクリアし、新しいものを起動するまで狂ったように更新されます.この問題は以前に固執しました.そこで、正しい小文字を受信した後に関数を更新する必要がありますが、ComponentDidupDate ()が現在の状態を設定することができます.同様に、完全にエラーが発生していない間、SetTimer関数でレンダリングされたSetTimerは、レンダリングするたびに更新を試みることについて警告を出します.
それは私たちは0ではなく、母の日の時間の小道具を受けていると、一度それが小道具(またはそれはむしろ私はそれをしたいのです)明確な間隔を持っているので、私はタイマーの状態を変更した場合でも、私たちはそれが起こったことを覚えていたとしてchangedisplayのための新しい間隔を設定します.

数学

エム、数学.私は数学を得るにはあまりにもばかだと言うだろうが、それは私がコーディングについて言ったものであり、今私はどこに見て!しかし、私はまだ多くの物事のための最良の解決策との戦いも簡単ですので、それを介して一歩を踏み出しましょう.

APIから、我々は数/40で力を与えられます.この番号は、ベリーのそれぞれの味のための10または5の場所になるので、我々の表現当たり半分の星で終わることができます.我々は星が10ポイントの価値があるので、我々は力を取り出して、ちょうど1の場所を得るために10によって分割し、どのように多くの充填され、半分の満たされた星に満たされているにもかかわらず、フルスターという名前があります.星がforループで実行されるので、我々が5であるならば、我々はまだもう一つの星をつくります.
私たちが半星を持っているかどうかを判断するために、私たちはモジュロ演算子を使用して、10で割ったかどうかを確認します.三項演算子(空想小if文)を使用して、剰余が0(false)の場合、我々は半分の星がないと言う.残りが0でない数(真)であるならば、我々は我々に1つの半分の星があるということを知っています.
私たちは何を残して空の星を計算し、ハーフスターがあるかどうかを別の三元演算子を使用します.がある場合は、我々はそれをフルスターのいずれかに置き換えたい.

    let potency = this.props.potency;
    let fullStars: number = potency / 10;
    let halfStars: number = potency % 10 ? 0 : 1;
    let emptyStars: number = 4 - fullStars;
    halfStars ? null : fullStars--;

ポークAPI

使いましたPokéAPI ベリーデータのほとんどを集めるために.私は、成長サイクルとサイズ比較のために(200 +)イメージを保存しました.Berryの情報はBerryの項目リストとは別のもので、アイテムのイメージにURLが含まれています.

  fetchBerry() {
    axios.get(`https://pokeapi.co/api/v2/berry/${this.props.berryID}`)
      .then(res => {
        this.setState({ info: res.data });
        return axios.get(`${this.state.info.item.url}`)
      }).then(res => {
        this.setState({ item: res.data });
      })
  }

デザイン

CSSをコードとインラインにしておくか、それ自身のファイルの外にあるかどうかを議論しました.私は、それ自身のファイルの外側を好むと思います、しかし、私はダイナミックなスタイルをインラインで宣言するのが便利であるとわかります.それぞれのベリーのサイズについては、私たちは番号を与えられている、私は直接画像の高さに、それを3に分かれているので、いくつかの最大のものがデザインを中断しないように分かれています.あなたはまだ非常に小さな果実で終わるが、関係サイズが同じである限り、私たちはそれが意図したデザインを示すためにアイコンスプライトを持っている限り、これは大丈夫だと思う.

        <img 
          src={`${process.env.PUBLIC_URL}/size/${this.props.id}.png`}
          style={{ height: `${this.props.size / 3}px` }}
        />

次は何ですか。

私は自分のCSSアニメーション技術を強化する必要があるので、私は何かインタラクティブなものが必要ですが、私はまだ何がわからない.私は、私がここのコメントで見つけた推薦から記法の使用を採用しました、それで、私は私が学びたいものとプロジェクトアイデア、または私の友人が持っているものを追跡していました.私はvscodeのライブ共有について読んで、私の非常に良い友人/メンターとそれを試してみて、私は本当にそれに興奮している!

localhostはもうローカルではない

ジョナサン・カーター・ 月26日・ 5分読む

#webdev #javascript #beginners #productivity

私たちはそれなしでしばらくの間ペアプログラミングをしました、しかし、私は本当にこれを使っている彼女と若干の種類のプロジェクトをしたいです.