• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

DiveIntoHacking/udemy-graphql-with-react-intro-search-repos: Udemyのオンライン講 ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

DiveIntoHacking/udemy-graphql-with-react-intro-search-repos

开源软件地址(OpenSource Url):

https://github.com/DiveIntoHacking/udemy-graphql-with-react-intro-search-repos

开源编程语言(OpenSource Language):

JavaScript 77.9%

开源软件介绍(OpenSource Introduction):

GraphQL with React入門 - QueryとMutationを学びPaginationの実装にチャレンジ!

本リポジトリは、Udemyのプログラミングコース「GraphQL with React入門 - QueryとMutationを学びPaginationの実装にチャレンジ!」の「実践編 - GitHubリポジトリ検索アプリケーションの開発にチャレンジ」のセクションで実装したソースコードを管理するためのものです。

本セクションで扱うソースコード

「本セクションで扱うソースコード」は以下のgit cloneコマンドで取得することが可能です。

$ git clone https://github.com/DiveIntoHacking/udemy-graphql-with-react-intro-search-repos.git

尚、本リポジトリは、GitHubとの通信を行う機能がありあますが、これには「GitHub Tokenの作成」で取得できるGitHubのアクセストークンの取得及び設定が必要になります。この詳細についてはレクチャーにて学習できますのでそちらでご確認ください。

以下は各レクチャーの名称とそのレクチャーで作成されたブランチ名との対応を示す表です。もし、レクチャーの中でうまく動作せず行き詰まったり、あるいは正常に動作はしたが自分の書いたコードとの比較を行ったりする場合には、各ブランチをcheckoutして参考にしてみてください。 全てレクチャー収録時のソースコードと同じもので動作確認済みのものとなっております。

レクチャー名 ブランチ名
デモアプリの説明 -
GitHub Tokenの作成 -
Reactアプリケーションの作成からGitHubリポジトリの作成 -
必要なnpmパッケージ(apollo-boost、graphql、react-apollo)をインストールする install-npm-packages
不要なコードやファイル等を除去する garbage-collection
dotenvをセットアップする setup-dotenv
GraphQLクライアントをセットアップする setup-graphql-client
GraphQLのコードを別のファイルに分離する separate-graphql-code
search queryとVariablesをアプリケーションに適用する apply-query-and-variables
検索フォームを作成し動的に検索を実行できるようにする dynamic-search-form
タイトルを表示する titlize
検索結果一覧をリスト表示する show-search-results
次ページ(Next)ボタンを実装する next-button
前ページ(Previous)ボタンを実装する previous-button
starの数を表示する show-stargazers
starを付けているかどうかの状態を表示する show-viewer-has-starred
onClickでstarを付与する add-star
onClickでstarを解除する remove-star
refetchQueriesを利用しstarの総数をstarの付与/解除に同期させる synchronize-star-count-with-refetch-queries
writeQueryを利用しstarの総数を書き換える update-star-with-write-query

FAQ

gitやGitHubに慣れていない方から寄せられる質問をまとめています。

リポジトリの変更などを知る方法は?

starボタンをクリックすると、GitHubのトップページのタイムラインにその内容が表示されるようになります。

自分のアカウントにリポジトリをぶら下げたいのですが。。。

forkすることで可能です。画面右上のForkボタンをクリックしてください。

上記で新規にcloneを行い、該当のブランチにcheckoutする方法は?

git clone後に、show-viewer-has-starredというブランチをcheckoutしたい場合を例にすると、以下にコマンドを実行することになります。

$ git clone https://github.com/DiveIntoHacking/udemy-graphql-with-react-intro-search-repos.git
$ cd udemy-graphql-with-react-intro-search-repos
$ git checkout -t origin/show-viewer-has-starred

ブランチ間の差分を知るには?

ブランチ間の差分を知るには以下のコマンドが有効です。以下は、「search queryとVariablesをアプリケーションに適用する」で実装したコードと「検索フォームを作成し動的に検索を実行できるようにする」で実装したコードとの差分を出力するコマンドになりますので、これを参考にしてコマンドを実行してみてください。

$ git diff origin/apply-query-and-variables..origin/dynamic-search-form

プログラムの誤りを見つけてたがその連絡の手段は?

本プログラムはUdemy教育用のものですので、受講生からのリクエストを最優先していますので、Udemyのコースに設置されている公式のQ&Aにてご指摘の内容をご報告頂ければと思います。(本プログラムはオープンソースプロジェクトではありませんのでGitHubのIssuesでお知らせ頂いても対応出来ない場合がありますのでご了承ください。)

その他、不明な点が有りましたらUdemyのQ&Aにてご質問ください。

動画コース一覧

他にも以下のコースをUdemyにて公開中です。

タイトル 概要
フロントエンドエンジニアのためのReact・Reduxアプリケーション開発入門 RESTful APIサーバと連携する実践的なCRUDアプリケーション開発手法を学び、今後のフロントエンドWeb開発の標準になり得るReact・Reduxアプリケーション開発をマスターし、もう一段階上のJavsScriptエンジニアになろう
GraphQL with React入門 - QueryとMutationを学びPaginationの実装にチャレンジ! GraphQLの言語仕様を学習し、GitHubのGraphQL APIと連携するReactアプリケーションの実装にチャレンジします!React/GraphQL/Apollo等を利用し、近未来を見据えたAPI開発手法を先取りしよう!
モジュールバンドラーwebpackを1日で習得!しかもフルスクラッチでインストールからカスタマイズまでの手順を理解する Reactを題材にし各種形式のモジュールをローダー(babel/css/sass/html/eslint)やプラグイン(JS圧縮のカスタム/CSSのファイル分離と圧縮)でバンドルする方法をハンズオンで解説、今回もGitHubにソース完全公開
React Hooks 入門 - HooksとReduxを組み合わせて最新のフロントエンド状態管理手法を習得しよう! Vue.js Firebase Docker Gatsby などを抑え、なんと受講生の37.2%が次に学びたいと注目度の高い React Hooks 。複雑な状態管理をシンプルに且つ美しく実装するためのフロントエンド開発手法を身につけよう!



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap