TutorialReactNativeのダウンロードTutorialReactNativeソースコードのダウンロード

ネイティブチュートリアルを反応します

このチュートリアルの目的は、React Nativeを使用して最初のステップでガイドすることです。

TV Maze APIを使用してアプリを作成し、以下のプロトタイプに従ってください。

このチュートリアルは建設中です。これまでのところ、彼は次のポイントをカバーしています。

React Nativeおよび依存関係のインストール。
プロジェクトの初期化。
ビュー、テキスト、テキストインプット、画像、タッチアブルパシティ、フラットリスト、スタイルシート。
リクエストを行うためのaxiosの使用。
コンポーネントの作成方法。

コードのリポジトリ準備が整っており、建設中：https：//github.com/erbuen/favtvshow :)

1。アプリケーションはどのようになりますか？

コードの作成を開始する前に、各画面に関連する動作を理解することが重要です。

1.1。ホーム画面

これは、アプリケーションを起動するときにユーザーが表示する画面です。

ホーム画面

彼女には検索バーがあり、バーの右側にボタンが必要です。

検索バーにはプレースホルダーが必要です。求められる単語を入力するときは、キーボードが検索を開始するために利用できるボタンを使用する必要があります。たとえば、モバイルブラウザでURLを入力したときの発生方法です。

結果を見つけることは、検索バーの下とタイトル「検索結果」の下に、1行で表示する必要があります。結果が得られない場合は、「結果が見つかりません」というメッセージを表示する必要があります。

結果は、画像、シリーズの名前、およびそれに起因するジャンルを含む「カード」として表示する必要があります（セクション1.3を参照）。

ユーザーが結果の1つを選択するとき、シリーズの完全な情報を表示する別の画面に移動する必要があります。この画面についてはすぐに説明します。

検索バーの正しいボタンは、クリックしたときに、「お気に入り」というタイトルの下にユーザーのお気に入りのシリーズを表示する必要があります。

検索が進行中の場合は、画面に何も表示しないでください。

お気に入りのシリーズがない場合は、「お気に入りのシリーズはまだありません」というメッセージを表示します。

1.2。シリーズの詳細画面

ユーザーがシリーズをクリックして、検索結果のいずれかで、または有利な場合は、この画面に移動する必要があります。

ホーム画面

この画面は、シリーズ、名前、ジャンル、要約に関連付けられた画像を表示する必要があります。

名前とジャンルの横には、ユーザーがシリーズを好むようにボタンが必要です。

ユーザーがボタンをクリックしてシリーズを支持すると、データはアプリケーションの内部グローバルストレージに保存され、「トースト」または同様の可能性のあるユーザーに視覚的な戻りがあるはずです。

シリーズの画像の上には、前の画面に移動する戻りボタンが必要です。

要約の内容はデバイスの画面サイズよりも大きいため、ユーザーは画面をロールすることができるはずです。

1.3。シリーズを表示するコンポーネント

少なくとも1つの結果を検索して取得するとき、またはお気に入りのシリーズにアクセスするときにシリーズリストが表示されます。

この目的のために、以下の画像としてカードコンポーネントを構築する必要があります。

カードをクリックしてフラットリストに表示する必要があります。

2。必要な依存関係をインストールします

プロジェクトを開始する時が来ました！これを行うには、Reactネイティブページにアクセスして、 [開始]をクリックします。

開始ページには、Reactネイティブから始めるために必要なすべての情報が見つかります。このチュートリアルでは、 React Native ClickStartオプションを選択することをお勧めします。

次に、プロフィールに合った最良のオプションを選択します。私の場合、私はMacを使用して開発するので、開発中にそれらを選択し、iPhoneを使用してテストするようにターゲットでターゲットを選択しましたが、 Androidを選択できたかもしれません。

Macを使用している場合にのみ、 iOSとしてターゲットを選択できます。 WindowsとLinuxの場合、必然的にAndroidを選択する必要があります。

オペレーティングシステムに従ってオプションを選択した後、Reactネイティブを使用するために必要な施設をインストールする手順に従ってください。

3。始めましょう！

Reactネイティブサイトの段階的なステップに従ってすべての依存関係をインストールした後、次のコマンドでプロジェクトを起動できます。

npx react-native init NomeDoProjeto

プロジェクトの作成には数分かかることがあります。心配しないでください。

プロセスが完了したら、次のコマンドでプロジェクトを実行できます。

 cd NomeDoProjeto
npx react-native run-ios

MacOSを使用している場合。または、WindowsまたはLinuxを使用している場合：

 cd NomeDoProjeto
npx react-native run-android

しばらくして、そしてこのコマンドを初めて実行すると、本当に長い時間がかかることがあります - あなたはそのようなものを見ることができます（ターゲットOSによって異なります）：

重要：最初の実行（変更なし）のデフォルトのプロジェクトテキストには、変更（リロード）を表示し、デバッグするオプションに言及していることに注意してください。これは、コードを変更して変更を確認し、リアルタイムでデバッグを作成できることを意味します。

プロジェクトを変更するには、選択したコードエディターを使用する必要があります。

原子
崇高
ビジュアルスタジオコード

選択したコードエディターでプロジェクトを開くと、このフォルダーとファイル構造が表示されます。

注：これは私のビジュアルスタジオコードのサイドバーです。標準とは別のテーマを使用しており、各ファイルまたはフォルダーに関連付けられたアイコンの画像を変更する拡張機能もあります。私がプロジェクトに与えた名前はfavtvshowです。

ここで知ることが重要なこと：

AndroidフォルダーとiOSフォルダーには、生成されたネイティブコードが含まれています。 Android StudioまたはXcodeでアプリケーションを各IDEでそれぞれ開いて実行できます。これらのフォルダーは、アプリケーションのリリースを生成するために重要です。
node_modulesフォルダーには、NPMによってインストールされたすべてのプロジェクト機能が含まれています。
アプリケーションは、最初にapp.jsファイルを介して編集できます。
index.jsファイルは、アプリケーションのグローバルコンポーネント、つまりロードされる最初のコンポーネントを探して記録します。 App.jsファイルのコンテンツと画面上のレンダリングが重要です。
Package.jsonファイルには、敷地内のすべてのデータが含まれており、プロジェクトに関連するスクリプトも含まれています。

4. app.jsを書く

app.jsファイルのすべてのコンテンツを削除し、次のことを置き換えます。

 import React , { Component } from 'react' ; // 1
import { Text , View , StyleSheet } from 'react-native' ; // 2

// 3
export default class App extends Component {
  render ( ) {
    return (
      // 4
      < View style = { styles . hello } >
        < Text > Hello, world! </ Text >
      </ View >
    ) ;
  }
}

// 5
const styles = StyleSheet . create ( {
  hello : {
    flex : 1 ,
    justifyContent : 'center' ,
    alignItems : 'center' ,
  } ,
} ) ;

直接使用するために、Reactとコンポーネントクラスをインポートします。ここでコンポーネントを気にしなかった場合、 3では、コンポーネントのみではなくReact.comPonentを使用する必要があります。
Reactネイティブのテキスト、ビュー、スタイルシートのクラスをインポートして、画面上のコンテンツのレンダリングでそれらを使用できるようにします。
ここでコンポーネントとしてアプリクラスをエクスポートする必要があります。 index.jsを覚えていますか？次に、 index.jsによって読み取りおよび記録されるコンポーネントとしてアプリをエクスポートします。私たちのクラスは、返品内にあるものをレンダリングします。
ここには、スタイルを通じてカスタマイズを受信するビューコンポーネントがあります。このコンポーネントには、コンテンツ「こんにちは、世界！」を受信するテキストコンポーネントがあります。カスタマイズはありません。
使用したいスタイルを備えたオブジェクトを受信する一定のスタイルを宣言します。今のところ、ビューのカスタマイズで使用するHelloのみが1つしかありません。

App.jsコンテンツを削除したら、この新しいコンテンツを配置してファイルを保存します。シミュレーターが実行されている場合は、自動的にビューを再充電します。

テキストに関する公式ドキュメントとコンポーネントと抽象化スタイルシートを表示してください。

テキストコンポーネントでテキストのスタイルを少し変更しましょう。まず、テキストラインを書き換えて、次のようになります。

 < Text style = {styles.text} > Hello, world! </ Text >

次に、スタイルにテキストスタイルを追加します。それは次のようになります：

 const styles = StyleSheet . create ( {
  hello : {
    flex : 1 ,
    justifyContent : 'center' ,
    alignItems : 'center' ,
  } ,
  text : { 
    fontSize : 30 ,
    color : 'blue' ,
  } ,
} ) ;

ファイルを保存すると、シミュレータの結果をご覧ください！ :)

5。プロジェクトの最初の画面に行きましょう！

プロトタイプによると、プロジェクトに顔を与え始める必要があります。少なくとも最初は、これを可能な限り簡単に行います。

ホーム画面の必要な要素をどのように追加できますか？そのうちの1つは検索バーです。この準備ができたコンポーネントにはライブラリがありますが、それを行う方法を学ぶことができるように、それらを使用しません。

TextInputコンポーネントを2番目のインポートラインに追加しましょう。こちらのこのコンポーネントのドキュメントを参照してください。

 import { Text , View , StyleSheet , TextInput } from 'react-native' ;

画面を次のようにレンダリングすることの世話をするコードパッセージを変更しましょう。

 export default class App extends Component {
  render ( ) {
    return (
      < View style = { styles . screen } >
        < View style = { styles . search } >
          < TextInput style = { styles . input } />
        </ View >
        < View style = { styles . results } >
          < Text > Os resultados aparecerão aqui </ Text >
        </ View >
      </ View >
    ) ;
  }
}

画面のすべての要素をカプセル化するビューコンポーネントがあり、画面スタイルを受信します。

このコンポーネント内には、他の2つのビューコンポーネントがあります。1つは検索スタイルを受け取る上部（白い背景）と、結果を受け取る1つ（視覚化のために一時的に明るい灰色）です。

上部コンポーネント内には、 TextViewコンポーネントがあります。画面の下部にあるコンポーネントの内部には、テキストコンポーネントがあります。

次に、スタイルを変更してみましょう。

 const styles = StyleSheet . create ( {
  screen : {
    flex : 1 ,
    flexDirection : 'column' ,
  } ,
  search : {
    flex : 1 ,
    justifyContent : 'center' ,
    alignItems : 'center' ,
  } ,
  input : {
    marginTop : 55 ,
    height : 40 ,
    width : 250 ,
    borderColor : 'lightgray' ,
    borderWidth : 1 ,
    padding : 10 ,
    fontSize : 20 ,
  } ,
  results : {
    flex : 4 ,
    backgroundColor : 'lightgray' ,
    alignItems : 'center' ,
  } ,
} ) ;

変更を加えてファイルを保存します。次に、各アイテムの説明を参照してください。

他のすべてのコンポーネント（スクリーン名スタイル）を網羅するビューコンポーネントは、1に等しいフレックスを持っています。これにより、他のすべてを含むため、すべてが画面になります。列に等しいcolumnに等しいFlexDirectionがあり、その中のコンポーネントが垂直に整理されたいためです。
検索スタイルビューコンポーネントが上向きになり、結果が以下にとどまる結果があります。これらは、画面スタイルを備えたビューコンポーネント内にあり、垂直に整理しています。彼らは同じスペースを分割する必要があります。 Flexを使用してこれを行います。アッパーにはフレックス1と下部4があります。これは、1つの比例部品（1+4）があることを意味します。重要： FlexBoxの詳細については、Reactネイティブドキュメントを参照してください:)
検索スタイルビューコンポーネントを見ると、内部では、入力スタイルでカスタマイズされたTextViewコンポーネントを配置します。それにより、その高さ（高さ）、幅（幅）、画面の上部マージン（Margintop）、境界線の色、境界幅の厚さ、後方（パディング）、フィールドソースサイズ（フォントサイズ）を定義することができました。

シミュレーターでは、 TextInputをクリックすると、キーボードが自動的に表示されます。何かを入力して、[iOSの場合も）「return」をクリックできます。今のところ、動作を実装する必要があるため、何も起こりません。

TextInputで入力されたテキストを受信するRender（）関数の前に、状態と呼ばれる変数を追加しましょう。

  state = {
    searchText : '' ,
  }

また、 TextInputを変更してプレースホルダーを設定し、それをタイプされたテキストの状態変数に保存します。彼はこのようになります：

  < TextInput
    placeholder = { 'Procure uma série' }
    style = { styles . input }
    onChangeText = { ( text ) => this . setState ( { searchText : text } ) }
  />

コンポーネントのonchangeTextメソッドに注意してください。 Textの値を受信し、 SearchTextで保存された（this.setState）。これをリアルタイムで確認できます。別のコンポーネントにわずかな変更を加えることができます。

私たちが持っているところ：

 < Text > Os resultados aparecerão aqui </ Text >

変更：

 < Text > {this.state.searchText} </ Text >

テキストインプットに何かを入力するために保存してテスト:)

TextInputをもう少し変更するには、ユーザーがReturnキー（またはAndroidで同等）を押したときに検索を発生させるために、 OnSubmititingメソッドを使用してみましょう。今のところ、APIにまだリクエストを行いませんが、物事を転送したままにします！

私たちのTextInputは次のようになります：

  < TextInput
    placeholder = { 'Procure uma série' }
    style = { styles . input }
    onChangeText = { ( text ) => this . setState ( { searchText : text } ) }
    onSubmitEditing = { ( ) => this . submitSearch ( ) }
  />

submitsearch（）関数を追加する必要があります。これは、状態のすぐ下に実行できます。それは次のようになります：

  state = {
    searchText : '' ,
  }

  submitSearch ( ) { 
    alert ( 'Buscar: ' + this . state . searchText ) ;
  }

まだリクエストを行っていないため、テキストフィールドに入力されたコンテンツが検索で使用されることに気付くようにアラートを付けます。

6。APIの理解

データを使用してアプリを普及させることができるように、Open Rest API（認証する必要はありません）であるAPI TV Mazeを使用して、JSON形式でデータを返します。

このAPIを使用して検索例を見てみましょう。解剖学という言葉で検索を実行したい場合は、次のエンドポイントを使用します。

 [GET] http://api.tvmaze.com/search/shows?q=anatomy

その結果、解剖学などのすべてのエントリを含むJSON（1つのストレッチのみが表示されています）があります。

[
  {
    "score" : 20.919525 ,
    "show" : {
      "id" : 67 ,
      "url" : " http://www.tvmaze.com/shows/67/greys-anatomy " ,
      "name" : " Grey's Anatomy " ,
      "type" : " Scripted " ,
      "language" : " English " ,
      "genres" : [
        " Drama " ,
        " Romance " ,
        " Medical "
      ],
      "status" : " Running " ,
      "runtime" : 60 ,
      "premiered" : " 2005-03-27 " ,
      "officialSite" : " http://abc.go.com/shows/greys-anatomy/ " ,
      "schedule" : {
        "time" : " 21:00 " ,
        "days" : [
          " Thursday "
        ]
      },
      "rating" : {
        "average" : 8.3
      },
      "weight" : 99 ,
      "network" : {
        "id" : 3 ,
        "name" : " ABC " ,
        "country" : {
          "name" : " United States " ,
          "code" : " US " ,
          "timezone" : " America/New_York "
        }
      },
      "webChannel" : null ,
      "externals" : {
        "tvrage" : 3741 ,
        "thetvdb" : 73762 ,
        "imdb" : " tt0413573 "
      },
      "image" : {
        "medium" : " http://static.tvmaze.com/uploads/images/medium_portrait/211/529884.jpg " ,
        "original" : " http://static.tvmaze.com/uploads/images/original_untouched/211/529884.jpg "
      },
      "summary" : " <p>The doctors of Grey Sloan Memorial Hospital deal with life-or-death consequences on a daily basis -- it's in one another that they find comfort, friendship and, at times, more than friendship. Together they're discovering that neither medicine nor relationships can be defined in black and white. Real life only comes in shades of grey.</p> " ,
      "updated" : 1576320037 ,
      "_links" : {
        "self" : {
          "href" : " http://api.tvmaze.com/shows/67 "
        },
        "previousepisode" : {
          "href" : " http://api.tvmaze.com/episodes/1749376 "
        },
        "nextepisode" : {
          "href" : " http://api.tvmaze.com/episodes/1760391 "
        }
      }
    }
  },
  {
    "score" : 15.932307 ,
    "show" : {
      "id" : 34388 ,
      "url" : " http://www.tvmaze.com/shows/34388/greys-anatomy-b-team " ,
      "name" : " Grey's Anatomy: B-Team " ,
      "type" : " Scripted " ,
      "language" : " English " ,
      "genres" : [
        " Drama " ,
        " Romance " ,
        " Medical "
      ],
      "status" : " Ended " ,
      "runtime" : 3 ,
      "premiered" : " 2018-01-11 " ,
      "officialSite" : " http://abc.go.com/shows/greys-anatomy-b-team " ,
      "schedule" : {
        "time" : " " ,
        "days" : [
          " Thursday "
        ]
      },
      "rating" : {
        "average" : null
      },
      "weight" : 80 ,
      "network" : null ,
      "webChannel" : {
        "id" : 95 ,
        "name" : " ABC.com " ,
        "country" : {
          "name" : " United States " ,
          "code" : " US " ,
          "timezone" : " America/New_York "
        }
      },
      "externals" : {
        "tvrage" : null ,
        "thetvdb" : null ,
        "imdb" : null
      },
      "image" : {
        "medium" : " http://static.tvmaze.com/uploads/images/medium_portrait/142/355662.jpg " ,
        "original" : " http://static.tvmaze.com/uploads/images/original_untouched/142/355662.jpg "
      },
      "summary" : " <p>A fresh crop of interns face their first day at Grey Sloan Memorial Hospital. Can these new surgeons survive the pressures of high-stakes medicine, intimidating attendings, and cut throat competition?</p> " ,
      "updated" : 1526845476 ,
      "_links" : {
        "self" : {
          "href" : " http://api.tvmaze.com/shows/34388 "
        },
        "previousepisode" : {
          "href" : " http://api.tvmaze.com/episodes/1390266 "
        }
      }
    }
  }
]

JSONエディターをオンラインで使用して、このJSONのコンテンツのフレンドリーなバージョンを表示できます。私はあなたがそれをすべて見ることができるようにSavedを残しました！ここをクリック ;）

JSONエディターでは、オンラインでは、9つのオブジェクトを備えた配列であり、各オブジェクトがシリーズであることがわかります。

プロトタイプとこれまでに実装したものによると：

TextInputで入力されたテキストを撮影することが可能であることがわかっています。
テキストを渡すことができるエンドポイントがあり、その用語の検索の結果に戻ります。

Axiosを使用して、次のセクションでこれを実践しましょう。

7。最初のリクエスト

プロジェクトにAxiosライブラリをインストールする必要があります。これをターミナルで次のコマンドと入力して行います。

$ npm install axios

その後、その内部にサービスフォルダーとAPI.jsファイルを作成しましょう。次のコードをファイルに入れましょう。

 import axios from 'axios' ; // 1

// 2
const api = axios . create ( {
  baseURL : 'http://api.tvmaze.com/' ,
} ) ;

export default api ;

図書館の重要性を示しています。
この方法を使用してAXIOSをインスタンス化してAPI URLを定義します。

app.jsでは、 api.jsファイルをインポートしましょう。

 import api from './service/api' ;

そして、 submitearch function（）をこのように変更しましょう。

  submitSearch = async ( ) => { // 1
    if ( this . state . searchText != '' ) { // 2
      try { // 3
        const response = await api . get ( '/search/shows' , { // 4
          params : { q : this . state . searchText } // 5
        } ) ;
        alert ( JSON . stringify ( response ) ) ;
      } catch ( error ) { 
        alert ( JSON . stringify ( error ) ) ;
      }
    }
  }

この関数を非同期に変換します。
ここでは、テキストフィールドにコンテンツがある場合にのみ検索を行うために確認します。
エラーの場合にフローをよりよく制御できるように、トライ/キャッチを使用しましょう。
私たちは、約束が得られるまで、非同期関数の実行を一時停止するのを待つ式を使用します。
セクション6の始まりを覚えていますか？そこに使用するURLを参照してください。ここでは、 PARAMS属性を渡して、URL上のQと同じ効果を発揮する必要があります。

トライブロック内およびキャッチブロック内のアラートは、リクエストで得られた回答を表示するのに役立ちます。別の時間に、これらの答えを別の方法で使用します:)

ここで非同期機能について詳しく、ここで約束について詳しく見てください。

8。私はリメイクしました、データを手に入れました...今何？

検索結果リストを表示するためにフラットリストの実装を開始しましょう。これのためにインポートを変更しましょう。

 import { Text , View , StyleSheet , TextInput , FlatList } from 'react-native' ;

次に、状態とsubmitearch（）関数を変更して、次のように変更します。

  state = {
    searchText : '' ,
    searchResults : null , // 1
  }

  submitSearch = async ( ) => {
    if ( this . state . searchText != '' ) { 
      try {
        const response = await api . get ( '/search/shows' , {
          params : { q : this . state . searchText } ,
        } ) ;
        this . setState ( { searchResults : response . data } ) ; // 2
      } catch ( error ) { 
        alert ( JSON . stringify ( error ) ) ;
      }
    }
  }

最初はnullとしてSearchResults属性を州に置きます。
リクエストを完了した後、 SearchResults属性に答えを入れました。応答を節約していることに注意してください。返されたオブジェクトのみを取得するデータは、いくつかのショーを持つ配列です。

また、 render（）を変更して、フラットリストを挿入する必要があります。

  render ( ) {
    return (
      < View style = { styles . screen } >
        < View style = { styles . search } >
          < TextInput
          placeholder = { 'Procure uma série' }
          style = { styles . input }
          onChangeText = { ( text ) => this . setState ( { searchText : text } ) }
          onSubmitEditing = { ( ) => this . submitSearch ( ) }
         />
        </ View >
        < View style = { styles . results } >
          < FlatList
            data = { this . state . searchResults }
            renderItem = { ( { item } ) => < Text > { item . show . name } </ Text > }
            keyExtractor = { item => item . show . id }
          />
        </ View >
      </ View >
    ) ;
  }

シリーズの名前のみをテキストコンポーネントでレンダリングしていることに注意してください。ただし、セクション1.3に従って、ここでカードタイプを作成しましょう。

9。コンポーネントの作成

プロジェクトでは、複数のコンポーネントを作成する可能性があります。組織を容易にするために、コンポーネントフォルダーを作成しましょう。作成したすべてのコンポーネントは保存されます。

このフォルダー内で、次のコンテンツを含むcard.jsというファイルを作成します。

 import React , { Component } from 'react' ;
import { Text , View , TouchableOpacity , Image , StyleSheet } from 'react-native' ;

export default class Card extends Component {
  render ( ) {
    return (
      < TouchableOpacity style = { styles . container } >
        < View style = { styles . cardView } >
          < View >
          < Image
            style = { styles . image }
            source = { { uri : this . props . info . image == null ? 'https://i.ibb.co/YfZFr7k/noimg.png' : ( this . props . info . image . original || this . props . info . image . medium ) } }
          />
          </ View >
          < View style = { { flexDirection : 'column' } } >
            < Text style = { styles . name } > { this . props . info . name || 'Sem nome' } </ Text >
            < Text style = { styles . genres } > { this . props . info . genres || 'Sem gênero' } </ Text >
          </ View >
        </ View >
      </ TouchableOpacity >
    ) ;
  }
}

const styles = StyleSheet . create ( {
  container : {
    padding : 10 ,
  } ,
  cardView : {
    alignItems : 'center' ,
    flexDirection : 'row' ,
  } ,
  image : {
    width : 80 ,
    height : 120 ,
    resizeMode : 'contain' ,
  } ,
  name : {
    fontSize : 20 ,
    marginLeft : 10 ,
  } ,
  genres : {
    fontSize : 16 ,
    marginLeft : 10 ,
  } ,
} ) ;

コンポーネントの名前はカードであり、シリーズに有効なURLがない場合は画像をプレースホルダーとして使用したことに注意してください。

次に、新しいコンポーネントをapp.jsファイルにインポートしましょう。

 import Card from './components/card' ;

フラットリストでは、現在のコンテンツを次のように置き換えます。

 < FlatList
  data = { this . state . searchResults }
  renderItem = { ( { item } ) => < Card info = { item . show } /> }
  keyExtractor = { item => item . show . id }
/>

テキストコンポーネントを使用する代わりに、カードを使用しており、ショーオブジェクトを受信する情報属性を介してそれを渡します。

card.jsファイルを参照してください。このファイルは、expression this.props.infoを使用して、コンポーネントを使用したときに渡された値にアクセスします。シリーズの名前を取得するには、たとえばthis.props.info.nameを使用します。

10。すぐに...

拡大する

TutorialReactNative

ネイティブチュートリアルを反応します

1。アプリケーションはどのようになりますか？

1.1。ホーム画面

1.2。シリーズの詳細画面

1.3。シリーズを表示するコンポーネント

2。必要な依存関係をインストールします

3。始めましょう！

4. app.jsを書く

5。プロジェクトの最初の画面に行きましょう！

6。APIの理解

7。最初のリクエスト

8。私はリメイクしました、データを手に入れました...今何？

9。コンポーネントの作成

10。すぐに...

Google Dorks

shepherd

mongo express

hidusbf

Free Algorithms Books

markdownpedia

chat.petals.dev

GPT Prompt Templates

GPTyped

Google Dorks

shepherd

mongo express

Google Dorks

shepherd

mongo express