NumbersAPI에서 React 및 Axios를 사용하여 Numbers에 대한 사실을 가져 오는 웹앱 만들기.

야!!! 제 이름은 Nandit Shah입니다. 저는 학생입니다. 우리가 작성한 숫자에 대한 사실을 알려주는 react 를 사용하여 웹 앱을 만드는 방법에 대한 첫 번째 블로그를 작성하고 있습니다. 반응에서 기본을 깔끔하게 정리하는 것은 작고 구조화 된 프로젝트입니다.

웹 앱 미리보기

참고 :이 프로젝트의 CSS 부분은 다루지 않겠습니다. 내 git-hub 링크에서 다운로드 할 수 있습니다.

내 프로젝트의 모든 파일을 다운로드 하려면 여기 를 클릭 하십시오 .

이 프로젝트에서 우리는 Numbers API 를 사용할 것 입니다. 숫자, 날짜, 연도 등에 대한 사실을 제공하는 API입니다.

실습용 프로젝트를 만드는 데 매우 재미있는 API입니다.

axios에 대해 자세히 알아 보려면 여기를 클릭하십시오.

먼저 반응 앱을 만들어야합니다. 이를 위해 npx create-react-app fact-web-app 명령 프롬프트 나 git bash 또는 사용하는 터미널에서 명령 을 실행 해야합니다.

설치하는 데 약간의 시간이 걸립니다. 그리고 설치 후 Axios command 라는 패키지를 설치해야합니다 . Axios는 백엔드의 도움없이 프론트 엔드에서 GET 또는 POST와 같은 요청을하는 데 사용됩니다. npm install axios

// for creating and installing react app in your pc
npx create-react-app <app-name>
// For installing axios 
npm install axios
// For Running the on the server 
npm start

이제 설치 후 프로젝트에 오늘 필요하지 않은 일부 파일을 삭제해야합니다.

이것은 우리가 삭제할 파일입니다.

  1. App.test.js
  2. logo.svg
  3. serviceWorker.js
  4. setUpTest.js

이제 먼저 프로젝트를 위해 빌드 할 구성 요소에 중점을 둘 것입니다. 만들려는 구성 요소는 두 개뿐입니다. 둘 다 하나의 카드가 임의의 숫자 (사소한 또는 수학)에 대한 사실을 제공하고 두 번째는 텍스트 상자에 제공된 숫자에 대한 사실을 사용하는 카드입니다.

주어진 입력 번호 (FactCard)에 대한 사실을 알려주는 구성 요소 —

  1. 먼저 구성 요소 폴더 FactCard.jsFactCard.css 에 두 개의 파일을 만듭니다 .
  2. import React from "react";
    import "./FactCard.css";
    function FactCard({ name, handleChange, onclick, fact }) {
    return (
    <div className="area">
    <h1>{name.toUpperCase()} Facts</h1>
    <input
    name={name}
    placeholder="Enter Any Number"
    className="inputNumber"
    type="number"
    onChange={handleChange}
    />
    <button className="getFactButton" onClick={onclick}>
    Get Fact
    </button>
    <p className="factText">{fact}</p>
    </div>
    );
    }
    export default FactCard;
    

여기에 4 개의 소품이 전달되었습니다.

{ name, handleChange, onclick, fact }

  1. fact (API에서 가져온 사실).
  2. onclick (버튼 클릭을 처리하기위한 소품으로 전달되는 메서드입니다)
  3. handleChange (입력 필드의 변경을 처리하기위한 prop으로 전달되는 메소드입니다.)
  1. 먼저 구성 요소 폴더 RandomFactCard.jsRandomFactCard.css 에 두 개의 파일을 만듭니다 .
  2. import React, { useState } from "react";
    import "./RandomFactCard.css";
    function RandomFactCard({ onclick, fact }) {
    const [type, setType] = useState("Math");
    const [styleMath, setStyleMath] = useState({
    margin: "10px",
    color: "blue",
    backgroundColor: "yellow",
    border: "3px solid red",
    borderRadius: "10px",
    });
    const [styleTrivia, setStyleTrivia] = useState({
    margin: "10px",
    color: "red",
    });
    // Foe handeling click in random card
    function handleClick(event) {
    if (event.target.name == "math") {
    setType("Math");
    setStyleMath({
    margin: "10px",
    color: "blue",
    backgroundColor: "yellow",
    border: "3px solid red",
    borderRadius: "10px",
    });
    setStyleTrivia({
    margin: "10px",
    color: "red",
    });
    }
    if (event.target.name == "trivia") {
    setType("Trivia");
    setStyleTrivia({
    margin: "10px",
    color: "blue",
    backgroundColor: "yellow",
    border: "3px solid red",
    borderRadius: "10px",
    });
    setStyleMath({
    margin: "10px",
    color: "red",
    });
    }
    }
    return (
    <div className="randomFact">
    <h1>Random</h1>
    <ul>
    <li onClick={handleClick} style={styleMath}>
    <a name="math">Math</a>
    </li>
    <li onClick={handleClick} style={styleTrivia}>
    <a name="trivia">Trivia</a>
    </li>
    </ul>
    <h2 className="type">Random {type} Fact</h2>
    <button className="getFact" name={"R" + type} onClick={onclick}>
    Get Fact
    </button>
    <p className="factText">{fact}</p>
    </div>
    );
    }
    export default RandomFactCard;
    

여기에서는 세 가지 상태 변수를 사용했습니다.

  1. type (어떤 유형의 사실을 선택했는지 표시하고 옵션 중 하나를 선택하여 상태를 변경합니다.)
  2. styleMath (이 상태 변수는 Math 옵션에 대한 내부 CSS를 보유하며 Math 옵션 또는 Trivia 옵션을 선택할 때마다 상태가 변경되므로 기본 Math 옵션을 선택한 시점에 어떤 옵션이 선택되었는지 알 수 있습니다 . 우리 프로젝트에서 수학 옵션을 선택하면 글꼴 색상, 배경색 및 테두리가 변경되고 퀴즈 옵션을 선택하면 수학 옵션의 모든 스타일 속성이 이전과 동일하게되고 퀴즈의 스타일 속성이 변경됩니다 ) .
  3. styleTrivia (이 상태 변수는 Trivia 옵션에 대한 내부 CSS를 보유하며 Math 옵션 또는 Trivia 옵션을 선택할 때마다 상태가 변경되므로 기본 Math 옵션을 선택한 시점에 어떤 옵션이 선택되었는지 알 수 있습니다.)
  1. onclick (첫 번째 구성 요소 세부 사항에서 사용한 것과 동일하며 아래 App.js 부분 에서 설명 합니다).
  2. 사실 (첫 번째 구성 요소에서 사용한 것과 동일합니다).

function handleClick(event) {
if (event.target.name == "math") {
setType("Math");
setStyleMath({
margin: "10px",
color: "blue",
backgroundColor: "yellow",
border: "3px solid red",
borderRadius: "10px",
});
setStyleTrivia({
margin: "10px",
color: "red",
});
}
if (event.target.name == "trivia") {
setType("Trivia");
setStyleTrivia({
margin: "10px",
color: "blue",
backgroundColor: "yellow",
border: "3px solid red",
borderRadius: "10px",
});
setStyleMath({
margin: "10px",
color: "red",
});
}
}

그래서 이것은 우리가 만든 구성 요소 부분에 관한 것입니다. 이제 우리는 App.js 파일 에서 이러한 모든 구성 요소를 가져온 다음 axios 를 사용하여 API에서 데이터를 가져와야합니다.

앱 생성을위한 모든 구성 요소 및 방법 결합-

import axios from "axios";
import React from "react";
import "./App.css";
import FactCard from "./Components/FactCard";
import RandomFactCard from "./Components/RandomFactCard";
class App extends React.Component {
state = {
mathFact: "",
triviaFact: "",
randomFact: "",
inputName: "",
url: "",
};
//Method for creating URL according to the input
createUrl = (event) => {
this.setState({ inputName: event.target.name });
this.setState({
url: `http://numbersapi.com/${event.target.value}/${event.target.name}`,
});
};
// Method for fetching fact using axios
fetchFact = (event) => {
console.log(event.target.name);
if (event.target.name == "RMath") {
axios
.get("http://numbersapi.com/random/math")
.then((response) => {
this.setState({ randomFact: response.data });
})
.catch((error) => {
console.log(error);
});
} else if (event.target.name == "RTrivia") {
axios
.get("http://numbersapi.com/random/trivia")
.then((response) => {
this.setState({ randomFact: response.data });
})
.catch((error) => {
console.log(error);
});
} else {
axios
.get(this.state.url)
.then((response) => {
if (this.state.inputName == "math") {
const fact = response.data;
console.log(response.data);
this.setState({ mathFact: fact });
} else if (this.state.inputName == "trivia") {
const fact = response.data;
console.log(response.data);
this.setState({ triviaFact: fact });
}
})
.catch((error) => {
console.log(error);
});
}
};
render() {
const { mathFact, triviaFact, randomFact } = this.state;
return (
<>
<div className="App">
<RandomFactCard onclick={this.fetchFact} fact={randomFact} />
<FactCard
name="math"
handleChange={this.createUrl}
onclick={this.fetchFact}
fact={mathFact}
/>
<FactCard
name="trivia"
handleChange={this.createUrl}
onclick={this.fetchFact}
fact={triviaFact}
/>
</div>
<footer>
<p>
Here I have used
<a href="http://numbersapi.com/#42" target="_blank">
Numbers_API
</a>
for facts
</p>
Made With ❤️ By Nandit Shah
</footer>
</>
);
}
}
export default App;

이제 먼저 모든 구성 요소와 axios를 가져옵니다.

이제 전체 앱의 상태를 포함 할 상태 변수를 만들어야합니다.

state = {
mathFact: "",
triviaFact: "",
randomFact: "",
inputName: "",
url: "",
};

  1. mathFact (API에서 수학적 사실을 가져올 때 상태가 변경됩니다).
  2. triviaFact (API에서 퀴즈 팩트를 가져올 때 상태가 변경됩니다).
  3. randomFact (API에서 임의의 사실을 가져올 때 상태가 변경됩니다).
  4. inputName (이 입력 이름은 ex에 대한 옵션 선택할 때마다 상태를 변경합니다 . 수학 사실을 선택하면 inputName "수학"이되고 퀴즈 사실을 선택하면 inputName 상태가 "상식"으로 변경됩니다.)
  5. url (이것은 사실을 가져 오는 데 사용할 URL을 보유 할 상태 변수이며 선택한 옵션과 입력 필드에 제공된 값에 따라 변경됩니다).
  1. createUrl —이 메서드는 적절한 URL을 만드는 데 도움이됩니다.
  2. createUrl = (event) => {
    this.setState({ inputName: event.target.name });
    this.setState({
    url: `http://numbersapi.com/${event.target.value}/${event.target.name}`,
    });
    };
    

2. fetchFact —이 메소드는에서 제공 한 URL에서 데이터를 가져와 axios를createUrl 사용하여 JSON 형식의 출력을 제공합니다.

fetchFact = (event) => {
if (event.target.name == "RMath") {
axios
.get("http://numbersapi.com/random/math")
.then((response) => {
this.setState({ randomFact: response.data });
})
.catch((error) => {
console.log(error);
});
} else if (event.target.name == "RTrivia") {
axios
.get("http://numbersapi.com/random/trivia")
.then((response) => {
this.setState({ randomFact: response.data });
})
.catch((error) => {
console.log(error);
});
} else {
axios
.get(this.state.url)
.then((response) => {
if (this.state.inputName == "math") {
const fact = response.data;
this.setState({ mathFact: fact });
} else if (this.state.inputName == "trivia") {
const fact = response.data;
}
})
.catch((error) => {
console.log(error);
});
}
};

이제 주어진 입력에 대해 사실을 가져 오려면이 메소드가 ELSE 블록으로 이동하고 해당 블록에서 axios는 URL 상태가로 설정된 상태 변수 에서 데이터를 가져옵니다 createUrl.

AXIO 이해

axios.get(url).then(function(response){
// Do whatever you want with the response you receive from the API
}).catch(function(err){
//This section will only run if any error found while fetching the //data.
console.log(err.message);
})

이제 거의 완성되었습니다. 우리가 만든 컴포넌트를 사용하기 만하면됩니다.

<RandomFactCard onclick={this.fetchFact} fact={randomFact} />
<FactCard
name="math"
handleChange={this.createUrl}
onclick={this.fetchFact}
fact={mathFact}
/>
<FactCard
name="trivia"
handleChange={this.createUrl}
onclick={this.fetchFact}
fact={triviaFact}
/>

위의 코드에서 모든 것은 자명하므로 아무 것도 반복 할 필요가 없습니다.

여러분이 프로젝트를 읽고 만드는 것을 즐겼기를 바랍니다.

이 블로그를 읽어 주셔서 감사합니다.이 블로그가 마음에 드시거나 어떤 식 으로든 도움이된다면 박수를 치고 다른 사람들과 공유해주세요.

Suggested posts

닷지 종속성이있는 React 앱 인수

닷지 종속성이있는 React 앱 인수

나는 당신이 선택한 React 코드베이스에서 두 가지 일을 할 것을 감히한다. 나는 게임 데이를 위해이 기초적인 악성 코드를 만들었다. 매월 Okra Solar의 개발 팀원 중 한 명이 문제가 발생할 경우 발생하는 상황에 대비하여 나머지 팀원이 준비 할 수 있도록 연습을 진행합니다.

React 및 Socket.io로 실시간 애플리케이션 빌드

React 및 Socket.io로 실시간 애플리케이션 빌드

React 및 Node.js를 사용하여 새로운 애플리케이션을 생성하려면 실제로 최종 솔루션 작업을 시작하기 전에 항상 일정량의 작업이 필요합니다.