Использовать API в React

Что такое API?
Прежде чем вы ответите, позвольте мне остановить вас и сказать, хотя это семорднилап для IPA, это не пиво для потребления.

Технически это интерфейс прикладного программирования ... * Tumbleweed *

За последние несколько дней я понял, что недостаточно знаю об этой столь популярной теме. В наши дни в значительной степени правят миром. Все так или иначе выплевывают или потребляют это. Тем не менее, я пошел исследовать, что это могло быть.

В этом посте я кратко расскажу, что такое API, его назначение, а затем быстро расскажу, как использовать его с помощью фреймворка React.

Итак ... я нашел API, который позволяет приложениям общаться друг с другом. Когда компания или кто-то говорит, что у них есть API, это означает, что у них просто есть выделенный URL-адрес, доступный в Интернете, который возвращает простые старые данные в какой-либо форме, например в формате JSON. Но почему бы не создать веб-сайт, который люди могут посещать и просто загружать необходимые данные? Что ж, иногда бывает сложно переварить (раз уж мы говорим о потреблении), и, когда мир работает так быстро, данные могут устареть, как только вы загрузите копию. Компаниям проще и проще просто предоставить интерфейс, в котором вы можете запрашивать у их приложения любые данные, которые вам нужны, или все, что они хотят, чтобы вы имели. Здесь вы потребляете и делаете с этим то, что хотите. Например, интегрируйте в свое приложение и представьте своим пользователям в красивом формате.

Тем не менее, просто быстро съешьте немного Game of Thrones API и извергните на нашем экране (хорошо, я остановлюсь на каламбурах).

Предварительные требования:
- NPM или какой-либо другой установленный менеджер пакетов
- Некоторое знание JavaScript и React Framework

Шаг 1. Создайте шаблон React
. Если вы уже находитесь в папке проекта, вы можете просто заменить got-api на . чтобы указать, что вы хотите создать приложение в текущей папке.

$ npm create-react-app got-api

Шаг 2. Запустите приложение
Запустите сервер, чтобы проверить правильность настройки приложения.

$ npm start

Шаг 3. Удалите код по умолчанию

Удалите сгенерированный код в src / App.js, чтобы он выглядел, как показано ниже:
Кроме того, вы можете удалить файл логотипа и строку, в которую он был импортирован.

import React, {Component} from 'react';
class App extends Component {
  render () {
    return (
      //Stuff will go here later
    );
  }
}
export default App;

Шаг 4. Создайте государство

Мы создадим конструктор с объектом состояния. Этот объект позже будет использоваться для хранения вызова API для нас. Мы назовем этот объект «домами».

import React, {Component} from 'react';
class App extends Component {
  constructor(props){
   super(props);
   this.state = { 
     houses = [];
    }
 }
}
export default App;

Шаг 5. Вызов API

Теперь давайте вызовем наш API, чтобы получить данные. Это позволяет использовать метод componentDidMount. Это выполняется немедленно, как только монтируется наш компонент приложения. Мы помещаем это непосредственно перед методом рендеринга, но после нашего конструктора в нашем компоненте приложения.

...
componentDidMount {
  fetch('https://anapioficeandfire.com/api/houses')
  .then(response => response.json())
  .then((data) => {
    this.setState({ houses: data })
  })
}
...

Мы начали с получения URL-адреса, по которому доступен API, а затем анализируем полученные данные в JSON. Затем мы обновляем наш объект состояния, созданный ранее, чтобы хранить проанализированные данные, полученные от вызова API, и на этом наш вызов API завершен.

Шаг 6. Создание компонента "Дома"

Теперь у нас есть данные нашего API, сохраненные в нашем объекте домов, теперь мы можем создать компонент, который поможет нам отобразить его на экране. Мы продолжим и создадим для этого простой компонент Houses.js. Вы можете размещать файлы в папках, но пока я только что создал все в корневом каталоге.

import React, {Component} from 'react';
const Houses = ({houses}) =>{
  return (
    <div>
      <h1>GOT Houses</h1>
      {houses.map((house)=> (
       <p>Name: {houses.name}</p>
       <p>Region: {houses.region}</p>
       <p>Coat of Arms: {houses.coatOfArms}</p>
       <p>Words: {houses.words}</p>
     ))}
    </div>
   )
};
export default Houses;

Этот простой компонент имеет функцию, которая принимает состояние домов из компонента приложения в качестве аргумента и преобразует их для возврата свойств каждого дома. В этом случае возвращается название, регион, герб и слова для каждого дома. Наконец, мы экспортируем его, чтобы использовать его в следующем разделе при рендеринге.

Вы можете применить className к div и абзацам и создать файл CSS для соответствующего стиля.

Шаг 7. Визуализация домов

Вернувшись в компонент App, мы импортируем созданный выше компонент Houses, а затем визуализируем его в методе return с переданным состоянием домов.

import React, {Component} from 'react';
import Houses from './Houses';
class App extends Component {
  constructor(props){
    super(props);
    this.state = { 
      houses = [];
    }
  }
render(){
  return(
    <Houses houses={this.state.houses} />
  )
 }
};
export default App;

Готово!

Ресурсы

Путь к курсу веб-разработки Codecademy.

Использовать API в React

Ресурсы

Вопросы по теме