ReactJS가 있는 JSON 서버

JSON Server는 REST API를 간단하고 빠르게 설정할 수 있도록 도와줍니다. Github 리포지토리에 보고되므로 30초 이내에 생성할 수 있습니다. 이 기사에서는 JSON 파일을 설치하고 사용 가능하게 만드는 방법을 살펴봅니다.

프로젝트 시작

1 - created-react-app을 사용하여 프로젝트를 생성했습니다.
$ npx create-react-app my-app
$ cd my-app

2 - JSON-Server를 설치했습니다.
$ npm install -g json-server


JSON 파일 생성

my-app 폴더 내에서 다음 데이터를 사용하여 "db.json"이라는 파일을 생성합니다.

{
  "posts": [
    {
      "title": "CopyRight Automatico",
      "tags": "[JS]"
    },
    {
      "title": "HtmlWebpackPlugin Multiples HTML files",
      "tags": "[JS, webpack]"
    }
  ]
}

그런 다음 아래 명령을 실행하여 "json-server"및 "react-app"을 실행합니다.
$ json-server --watch db.json --port 3001

$ npm run start


App.js 파일 구성

이제 "localhost:3001/posts"에서 실행되는 "json-server"가 있으므로 상담을 할 수 있습니다. 따라서 App.js 파일에 아래 코드를 삽입합니다. 여기에서 반응에 구성 요소를 마운트할 때 "가져오기"를 사용하여 쿼리를 수행하고 순서대로 "맵"을 사용하여 각 항목을 반환합니다.

결과

이제 "React App"페이지를 보면 다음과 같은 결과가 나타납니다.

결론

이 문서의 단계를 따르면 애플리케이션을 위한 ReactJS 및 jSON SERVER를 사용하여 뛰어난 개발 환경을 만들 수 있습니다.
코드에 사용된 테마는 "Vue.js"에서 영감을 받아 만들었으며 "Vue Theme"을 검색하여 "VS_Code"에 설치할 수 있습니다.

감사!!!