導入

私は共通のデータを表示するために私の反応アプリで使用する一般的なパターンについて話をしたい:ハードローカルローカルJSONファイルを介して“ローカルAPI”をプロジェクトにコーディング.
私のGIFフィットアプリのすべての演習では、私は私の減速のいずれかにインポートし、ユーザーの入力に基づいて選択したランダムな演習を適用するローカルJSONファイルです.私はダンベルエクササイズのための別のファイルがあります.
私のポートフォリオサイトでも私は2つの異なっている.JSONファイル、私のプロジェクトの1つと私のブログの1つ.
この記事はAPIとは何かを探検し、どのように私のプロジェクトで1つを使用してシミュレートします.

API -何ですか？

APIは、“アプリケーションプログラミングインターフェイス”が不足しています.私は多くの技術的な定義をペーストすることができました、しかし、私はむしろ私自身の語で要約します
APIは、情報がどのように格納され、共有されるかを定義する方法と考えます.いつでもあなたはTwitterやFacebook、任意のつぶやきを送信するか、すべてのつぶやきを読むと、任意の恐ろしいFacebookのポストは、あなたのフィードで終了するあなたの人種差別のおじによって共有されているように、プログラムとの対話は、すべてのプロセスからのデータを受信し、データを送信するAPIのapis.
APIは異なるパターンに従うことができます、そして、いくつかは更新されることができるか、ユーザーによって修正されることができます(新しいつぶやきを送るように、あなたはちょうどTwitterのデータベースへのエントリを加えました)、そして、若干のAPIは消費されることになっていて、ユーザーによって変わっていないだけです.

どのように、これは我々を助けますか？

APIは簡単にデータの類似のセットを格納します.各Twitterのユーザーは、同じプロパティを持っています:ユーザー名、信者、つぶやき、好き、そしてもっと.つのつぶやきオブジェクトを見てみましょう.

! !!それは私にとっても脅迫的です!
アプリケーションのスケールが大きくなるにつれて、どのように複雑なAPIが成長できるかを想像することができます.
さて、我々は徹底的に強調している今、息をし、リラックス.
我々は、ローカルファイル内のAPIを再作成することができますし、我々のアプリのどこにでも呼び出すためにそのデータを使用します.そして、私を信じて、あなたはおそらく、少なくとも自分自身で複雑な何かを作成する必要はありません!そして、もしあなたが、おそらくこの記事を読むのを停止する必要がマトリックスを制御することができます.

ローカルAPIの作り方

最初にやりたいことは、何を表示したいかを理解することです.
私は(非常に工夫された)Codesandbox 私は強力な人々と呼ばれるこのdevのポストのために作成した.
それぞれの“強力な人”のために、私はイメージ、彼らの完全な名前、彼らの職業と彼らの趣味を示したかったです.次に、ローカルデータ用のファイルを作成しました.インマイsrc フォルダを作成しましたdata そのフォルダの中でpersonData.json .

src
└───data
│   │   personData.json

JSONとはそれは短いです"JavaScript Object Notation" .

JSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others. These properties make JSON an ideal data-interchange language.

JSON is built on two structures:

A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array.
An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.

ときに作成する.json ファイルは、オブジェクトの配列です.我々が輸入するときpersonData.json コンポーネントには、オブジェクトの配列をマップし、それぞれを個別に表示します.私は、私が上で表示したいと述べたという特性で各々のオブジェクトを定義します.
私の“personオブジェクト”の構造を見てください.

[
  {
    "id": 1,
    "url": "",
    "name": "",
    "role": "",
    "hobbies": [

    ]
  }
]

カップルメモ

各オブジェクトは“id”プロパティを持つ必要があります.私が複数あるとき.json ファイルは別の“100”から始まる各配列を開始します.これは、“ゼロ”100(001、002)と異なる.json ファイルは201 , 202 , 203から始まりました.
など)これは良い練習だと思います.

それは非常に良いアイデアを別の.json 迅速かつ簡単にコピーし、配列に新しいエントリを貼り付けるための空のオブジェクトを持つファイル.私の呼び出しstructure.json .

src
└───data
│   │   personData.json
│   │   structure.json

チェックアウトマイpersonData.json ファイルが記入されたカップルのエントリ.あまりにも悪い、いけない!各オブジェクトはユニークな“id”を取得し、ちょうどあなたが欲しいものを記入します.これは、私たちは画面上の情報を表示するには、後で触れることになる数々の利点があります!

[
  {
    "id": 1,
    "url": "https://cdn.vox-cdn.com/thumbor/w4zoPhL-LTUszPWHAUOeCmyS07w=/366x80:1263x685/1200x800/filters:focal(634x212:896x474)/cdn.vox-cdn.com/uploads/chorus_image/image/67233661/Ef4Do0cWkAEyy1i.0.jpeg",
    "name": "Bruce Wayne",
    "role": "Batman",
    "hobbies": [
      "spelunking",
      "stalking",
      "beating up bad guys"
    ]
  },
  {
    "id": 2,
    "url": "https://images2.minutemediacdn.com/image/fetch/w_736,h_485,c_fill,g_auto,f_auto/https%3A%2F%2Fwinteriscoming.net%2Ffiles%2F2018%2F11%2FGaladriel.jpg",
    "name": "Lady Galadriel",
    "role": "Ring Bearer",
    "hobbies": [
      "giving gifts",
      "star gazing",
      "slaying orcs"
    ]
  }
]

そして、データは何かをすることができますまたはそれが必要!チェックアウト.json 他の反応プロジェクトからの例
ポートフォリオサイトブログ

[
    {
        "id": 201,
        "logo": "devto.png",
        "name": "React Hooks Series: useState",
        "image": "useState screenshot.jpg",
        "summary": "Part one in my React Hooks Series. I examine the useState hook in a basic timer app with examples from Codesandbox.",
        "url": "https://dev.to/jamesncox/react-hooks-series-usestate-12ne"
    },
    {
        "id": 202,
        "logo": "devto.png",
        "name": "React Hooks Series: useEffect",
        "image": "useEffect screenshot.jpg",
        "summary": "Part two in my React Hooks Series takes a look at the useEffect hook and how I implememnt in a small timer app I created in Codesandbox.",
        "url": "https://dev.to/jamesncox/react-hook-series-useeffect-in2"
    }
]

ポートフォリオサイトプロジェクト

[
    {
        "id": 1,
        "name": "GIF FIT",
        "image": "gif fit resized collage.jpg",
        "github": "https://github.com/jamesncox/gif-fit",
        "url": "https://gif-fit.netlify.app/",
        "summary": "Home workouts made easy!",
        "description": "Gif Fit builds randomized workouts for you that you can do without any equipment in your home. Select how many exercises you want to perform, how long each one lasts, the rest period in between and total number of rounds. Gif Fit will keep track of each move for you and let you know when to rest and prepare for the next exercise. Features a React front-end, Redux to manage state, and Material UI for styling. Gifs are sourced from Giphy.com (special thanks and credit to 8fit for uploading so many awesome exercises). Made with love to genuinely help others during these stressful and challenging times.",
        "technologies": [
            "React",
            "JavaScript",
            "Redux",
            "Material UI"
        ]
    },
    {
        "id": 2,
        "name": "DO DID DONE",
        "image": "do did done collage.jpg",
        "github": "https://github.com/jamesncox/do-did-done-react",
        "url": "https://do-did-done.netlify.app/",
        "summary": "Keep track of your todos by category",
        "description": "Do Did Done allows a user to create an account and select several categories to manage their tasks. Do Did Done is made with a React frontend and a Rails API backend. The React frontend features Material UI components, React router, Redux and local state management, functional components and React hooks and a thoughtful design for improved UI and UX. The frontend consumes the Rails API with full CRUD functionality. The Rails API backend is hosted on Heroku and features a PostgreSQL database. It handles sessions, cookies, CRUD functionality, separation of concerns and MVC structure.",
        "technologies": [
            "React",
            "Rails",
            "JavaScript",
            "Redux"
        ]
    }
]

はい.オブジェクトの配列を作成し、ハードコードを作成します.でも!とにかくあなたのHTML/JSXでそれをしなければならないでしょう<div> 各エントリ.私を信頼してください、この方法は現在より多くの仕事のようです.

データを使用する時間

我々は楽しい部分に来ている:私たちのローカルAPIを使用して!
これは非常に基本的で工夫された例ですので、私は1つのコンポーネント:appに私のアプリを続けた.jsデータを輸入しましょう.

import PersonData from './data/personData'

そして、我々console.log(PersonData)

[Object, Object, Object, Object, Object, Object, Object]
   0: Object
   id: 1
   url: "https://cdn.vox-cdn.com/thumbor/w4zoPhL-LTUszPWHAUOeCmyS07w=/366x80:1263x685/1200x800/filters:focal(634x21 
   2:896x474)/cdn.vox-cdn.com/uploads/chorus_image/image/67233661/Ef4Do0cWkAEyy1i.0.jpeg"
   name: "Bruce Wayne"
   role: "Batman"
   hobbies: Array[3]
1: Object
2: Object
3: Object
4: Object
5: Object
6: Object

いいね私たちは私たちが作った美しいJSONにアクセスできます.すごい!
時間は、画面上のこれらのオブジェクトを表示します.
私たちの全体のアプリケーションコンポーネント:

import React from "react";
import "./styles.css";
import "./responsive.css"
import PersonData from './data/personData'

export default function App() {
  return (
    <div className="App">
      <h1>Powerful People</h1>
      {PersonData.map(person => {
        return (
            <div className="card" key={person.id}>
              <div className="row">
                <div className="column">
                  <div>
                    <img src={person.url} alt={person.name} />
                  </div>
                </div>
                <div className="column">
                <div className="info">
                  <p>Full name</p>
                  <h4>{person.name}</h4>
                  <p>Profession</p>
                  <h4>{person.role}</h4>
                  <p>Hobbies</p>
                  <ul>
                    {person.hobbies.map((hobby, i) => { 
                      return(     
                        <li key={i}>{hobby}</li>
                      )
                    })}
                  </ul>
                </div>
              </div>
            </div>
            </div>
            )
        })}
    </div>
  )
}

あなたはそれを見ることができます{PersonData.map(person => { それぞれのオブジェクトのプロパティにアクセスします.person.name , person.role , 次に、各オブジェクトの趣味をもう一度マップします.

<ul>
  {person.hobbies.map((hobby, i) => { 
     return(     
        <li key={i}>{hobby}</li>
     )
   })}
</ul>

注意:

リスト内の各オブジェクトは、一意のキーを持っている必要がありますかリンダはあなたに怒って取得します.これは、私たちが私たちのJSON

<div className="card" key={person.id}>

and

<li key={i}>{hobby}</li>

どこi 各趣味のインデックスは、ユニークなキーにするのに十分です.

我々は1つだけを作成しなければならなかった<div className="card"> . 我々が我々のローカルデータを使用していなかったならばpersonData.json , 我々はスクリーン上に表示したい一人一人に別々のdivを作成する必要があります.を得ることができるコントロールのうちどのように想像!そして、あなたが別の人を作成したいならば、あなたはpersonData.json とVoila!これは、画面上にある!

基本的に

ラッピング

私は、我々がローカルの意味論を議論することができると認めます.JSONファイルは本当にAPIです.なぜなら、あなたは本当にそれと通信しないからです.でも気にしない!私はこれは自分自身のAPIの概念を紹介し、どのようにあなたのアプリケーションのJSON構造を利用を開始する優れた方法だと思います.
外部APIと通信する方法を学ぶことは別の日のためのseperate記事です.
しかし、あなた自身のJSONを書くだけでなく、それを通してマッピングして、それの特性を抽出することが快適であるならば、あなたが外部APIとコミュニケートし始めるとき、あなたはスクリーンでそのデータを得るために絶好の場所にいます.
いつものように、私のポストを読んでくれてありがとう.私は、あなたが私の考えと意見に従事するために時間がかかることに感謝します.私はあなたのフィードバックを歓迎し、気分でいる場合は、私の天才の称賛.
ジャスト冗談.
次回まで、ハッピーコーディング!