React에서 QiitaAPI를 두드려 앱 만들기 입문

12388 단어 QiitaAPI초보자React

소개



React 공부를 시작했기 때문에 시작에 API를 두드려 초간단한 앱을 처음부터 만들어 보는 연습을 했습니다.
이번에 사용한 API는 Qiita API v2입니다. 작성한 앱은 GitHub 리포지토리에 있습니다.

어떤 API를 두드릴지 결정할 때 참고로 한 기사
htps : // 이 m / 감귤 3rd / ms / ba 4737023f08-b2 또는 161
앱을 만들 때 참고한 기사
htps : // 코 m/g차규/있어 ms/4d186df2에90c53228951

create-react-app로 프로젝트 만들기



create-react-app를 사용하여 앱의 병아리를 만들 수 있습니다. 이번에는 react-api-study라는 앱 이름으로 만들었습니다.

참고
h tps : // c 어서 - 라 ct - 아 p. 에서 v/
$ create-react-app react-api-study

axios 설치



앱을 만든 후 디렉토리를 이동하여 axios를 설치합니다.
$ cd react-api-study
$ yarn add axios

앱 구현



이번에는 QiitaAPI의 https://qiita.com/api/v2/items 엔드 포인트를 두드려 기사 목록을 가져와 제목과 URL을 표시합니다.

GET/api/v2/items
기사 목록을 작성 날짜와 시간의 내림차순으로 반환합니다.
  • page
  • 페이지 번호 (1에서 100까지)
  • Example: 1
  • Type: string
  • Pattern:/^[0-9]+$/

  • per_page
  • 페이지 당 포함 된 요소 수 (1에서 100까지)
  • Example: 20
  • Type: string
  • Pattern:/^[0-9]+$/

  • query
  • 검색 쿼리
  • Example: "qiita user:yaotti"
  • Type: string

  • src/index.js의 확장자를 변경하여 src/index.jsx를 작성합니다.

    src/index.jsx
    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    
    // 次に記述する src/components/App.jsx をインポートする
    import App from './components/App';
    
    ReactDOM.render(<App />, document.getElementById('root'));
    
    src 디렉터리 아래에 components 디렉터리를 만들고 그 안에 App.jsx 파일을 만들어 다음 소스를 작성합니다.

    src/components/App.jsx
    import React, { Component } from 'react';
    // axiosをインポート
    import axios from 'axios';
    
    class App extends Component {
      constructor(props) {
        super(props);
        this.getQiitaPosts = this.getQiitaPosts.bind(this);
        this.state = {
          // ここを`React`など検索したいワードに変えられる
          query: 'React'
        }
      }
    
      // QiitaAPIを叩く
      getQiitaPosts() {
        //axios.get(APIのエンドポイント,パラメータの引数)
        axios.get('https://qiita.com/api/v2/items', {
            params: {
              "page": "1",
              "per_page": "20",
              "query": this.state.query,
            }
          })
          // response にAPIからのレスポンスが格納される
          .then((response) => {
            // data にレスポンスから帰ってきた1つ目の記事の情報を格納
            const data = response.data[0];
            this.setState({
              title: data.title,
              url: data.url,
            });
            // コンソールから response と title と url を確認
            console.debug(response, "ressponse");
            console.debug(this.state.title, "title")
            console.debug(this.state.url, "url")
          })
          .catch((error) => {
            console.debug(error);
          });
      }
    
      // 表示されるHTMLを記述
      render() {
        return (
          <div className="App">
            <h1 className="app-title">Hello Qiita API</h1>
            <p>タイトル: {this.state.title}</p>
            <p>URL: <a target="__blank" href={this.state.url}>{this.state.url}</a></p>
            <input
              type="button"
              value="検索"
              onClick={() => this.getQiitaPosts()}
            />
          </div>
        )
      }
    }
    
    export default App;
    
    {this.state.title} 등으로 API에서 가져온 값을 포함하여 표시하고 있습니다.<a target="__brank" href={this.state.url}> a 태그의 href 속성에 url을 지정하여 링크를 포함합니다.onClick={() => this.getQiitaPosts()}에서 검색 버튼을 클릭하면 QiitaAPI를 두드리는 함수를 호출합니다.

    완성



    터미널에서 npm start로 부팅하고 localhost:3000를 엽니 다.

    검색 버튼을 누른 후 화면


    결론



    잘못되었거나 개선하는 것이 더 나은 경우 주석에서 부드럽게 말해주세요. mm

    좋은 웹페이지 즐겨찾기