ReactとTypescriptでページネーションを実装してみよう【react-paginateを利用】

Поделиться
HTML-код
  • Опубликовано: 17 окт 2024
  • #入門 #react #typescript #ページネーション #jsonplaceholder #API #プログラミング #エンジニア #独学 #web制作
    【さらに詳しく学びたい方へ。Udemy90%割引クーポン発行中🚀】
    ↓↓↓↓↓
    shincode.info/2...
    \ShinCode_Camp開校しました/
    プログラミング講座&副業・起業&就職・転職が学べるプラットフォーム🚀
    🎁月額2500円で全講座が見放題
    🎁分からない箇所は質問し放題
    🎁7日間無料キャンペーン実施中
    🎁コミュニティ機能付き
    🎁いつでも解約可能etc...
    ↓↓↓↓↓
    code-s-school-...
    -----------------------------------------------------------------------------------------------------------------------------
    【この動画を視聴するメリット】
    ・Reactでページネーションが実装できる
    ・Typescriptの基礎が学べる
    ・JsonplaceholderでFakeAPIの利用法が理解できる
    【信頼性】
    ・Udemy講師
    ・講師レビュー評価94.6%
    ・Udemy受講生延べ3000人突破
    ・Webアプリ/サイト開発数:200以上
    ・生きがい:プログラミングでサイトやアプリを作ること
    ★チャンネル登録はこちらから★
    / @programming_tutorial_...
    ★今回のソースコード★
    ★運営者SNS★
    Twitter: / shin_engineer
    ★この動画で使用している機材★
    キーボード(Keychron K6 赤軸):amzn.to/3F4zca5
    マウス(Logicool G ロジクール G ゲーミングマウス):amzn.to/3DZaaYB
    マイク(サンワダイレクト USBマイク PCマイク):amzn.to/30AVwJF
    マイクスタンド(Luling Arts マイクスタンド マイクアーム スタンド):
    amzn.to/3se5onZ
    ※アフィリエイトリンクになります。

Комментарии • 14

  • @西田隆二-c2i
    @西田隆二-c2i 2 месяца назад +2

    分かりやすい説明で、とても参考になりました。ありがとうございます。

  • @トムリドル-h9x
    @トムリドル-h9x Год назад +1

    今日もたくさん学びがありました。
    ありがとうございます。

  • @はらみ-d2t
    @はらみ-d2t Год назад +1

    わかりやすい解説ありがとうございます!!ブートストラップを使用せず、自身でcssを当てたいのですが、どのようにすればいいのでしょうか、、、?😢

    • @programming_tutorial_youtube
      @programming_tutorial_youtube  Год назад

      cssをカスタマイズするためには今回使ったライブラリを使用せずにカスタムでページネーションを実装する必要があると思います(もしくは普通にclassnameを付与してcssカスタマイズすることが可能?かもしれません)。
      ReactやNextjsを使用しているのであれば、Reactページネーション等で検索すれば難しいですが何か出てくるはずです。

  • @dmcreatorjapan
    @dmcreatorjapan Год назад +1

    2個以上propsで渡すのって開発時においてめんどくさくないですか?

  • @tu-sy7cx
    @tu-sy7cx Год назад +1

    firefoxでgrid-template-columnsが効かないです~...
    なぜでしょう?

    • @programming_tutorial_youtube
      @programming_tutorial_youtube  Год назад

      Firefoxでgrid-template-columnsが機能しない場合、可能性がある問題は以下のとおりです。
      1. ブラウザのバージョンが古い: Firefoxが最新バージョンであることを確認してください。バージョンが古い場合、grid-template-columnsが機能しない可能性があります。
      2. CSSの文法が正しくない:grid-template-columnsを正しく使用していることを確認してください。例えば、grid-template-columns: 100px 100px;のように、値の間にスペースが必要です。
      3. displayプロパティが間違っている:grid-template-columnsを適用する前に、display: grid;を使用して、親要素をグリッドコンテナに設定する必要があります。displayプロパティをチェックしてください。
      4. ブラウザー互換性の問題:Firefoxで機能しない可能性のある別の原因は、ブラウザー互換性の問題です。その場合、-moz-grid-template-columnsを使用することができます。
      よろしくお願いします。

  • @にゃんまど
    @にゃんまど Год назад +1

    なんでそんなにカーソル移動早いんですか?普通にマウスで合わてるスピードじゃない気がします。

    • @programming_tutorial_youtube
      @programming_tutorial_youtube  Год назад

      どの場面か分かりませんが、おそらくカット編集の影響でそう見えているだけかもしれませんね、、

    • @node_python_lover454
      @node_python_lover454 Год назад +1

      カーソルの移動速度を最大化した上で、習熟すれば、真似できるんじゃないですかね?

    • @にゃんまど
      @にゃんまど Год назад +1

      @@programming_tutorial_youtube あーそうかもしれません笑

    • @にゃんまど
      @にゃんまど Год назад

      @@node_python_lover454 パソコンにもそんな設定があったんですね!今度弄ってみます!

  • @penguasamisterius
    @penguasamisterius Год назад +1

    Saya tidak mengerti video ini ada di beranda youtube !!!
    Tolong sediakan bahasa melayu !!!!