DEV Community

Mario Rodeghiero
Mario Rodeghiero

Posted on

jSON Server with ReactJS

jSON Server with ReactJS

JSON Server helps you to set up a REST API simply and quickly. As they report in the Github repository, you can create in less than 30 seconds. In this article, we will see how to install and make available a jSON file.

Starting the project

1 - We created the project using created-react-app

$ npx create-react-app my-app
$ cd my-app

2 - We installed jSON-Server

$ npm install -g json-server

Creating the JSON File

Within my-app folder we will create a file named "db.json" with the following data:



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


Enter fullscreen mode Exit fullscreen mode

Then let's run "json-server" and "react-app" by running the command below:

$ json-server --watch db.json --port 3001


$ npm run start

Configuring the App.js file

Now that we have our "json-server" running under "localhost:3001/posts" we can do our consultation. So in the App.js file insert the following code below, where when mounting the component in the react, we perform a query with "fetch" and in a sequence we use the "map" to return each item.

code

Result

Now, if we look at the "React App" page, we will have the following result.

Result

Conclusion

By following the steps in this article, you can create an excellent development environment with ReactJS and jSON SERVER for your applications.
The theme used in the code, I created inspired by "Vue.js" and you can install in "VS_Code", searching for "Vue Theme".

Thanks!!!

Top comments (16)

Collapse
 
mariorodeghiero profile image
Mario Rodeghiero

Hi ariana, I have two repositories in my Github:

In development yet: github.com/mariorodeghiero/react-p...

github.com/mariorodeghiero/react-g...

 
mariorodeghiero profile image
Mario Rodeghiero

JSON-server is ideal for a development environment, but you can still make a GET and POST.
If you want to use a real-time data server, it would be better to use the firebase. and to perform GET and POST you can use the Https://github.com/axios/axios.

This link has a repository using firebase and axios: github.com/mariorodeghiero/reactjs...

Collapse
 
ashifmohammad profile image
Ashif Zafar • Edited

is it still possible to run json-server on node < 10 version?

Collapse
 
mariorodeghiero profile image
Mario Rodeghiero

I think it works yet, I didn't find any note about it, but you can check more details here: github.com/typicode/json-server
thanks

Collapse
 
stefanvrecic profile image
StefanVrecic

If your client is on 3000 and your API is on 3001, do you not get a 403 error? I'm doing a little job takehome test and I've been provided with the server/API which I'm not allowed to edit, it's using JSON-server.

Whenever I run my client and API, one of them goes on 3002 (or I could specify a different port) - they can't run on the same port, and also trying to access localhost:3002/api returns a 403 error, which I'm assuming is because cors is not enabled. How does yours work?

Collapse
 
q118 profile image
Shelby Anne

You just need to open another console window and run both commands at the same time. One for 3000 and one for 3001 :)

Collapse
 
vlatdina profile image
vlatdina • Edited

Thank you for this article.

Can you plz tell me why Im getting this error constantly? :( :(

Unhandled Rejection(TypeError): data.map is not a function

Collapse
 
mariorodeghiero profile image
Mario Rodeghiero • Edited

Thanks !
Probably because your "data" isn't an array.
If you agree, share your repository link and I can try to help you.

Collapse
 
rapidtables1 profile image
rapidtables

Thank you Mario for this article, I have been looking similar to that, along the way found nice JSON tool, jsonformatter.org which helped me to formate and validate json data.

Collapse
 
mariorodeghiero profile image
Mario Rodeghiero

Thank you for liking this article. interesting this link you reported, thanks for sharing ✌🏼

Collapse
 
johannchopin profile image
johannchopin

Really nice article 👏 Do you think that the tool Restapify could be a nice way to mock Rest API like json-server do? 😄

Collapse
 
andreshkurko profile image
AndreSkurko

Hey. Tell me how to configure json-server on firebase so that it is always active?

Collapse
 
mariorodeghiero profile image
Mario Rodeghiero

Hi CodingDevHub,
You can use only firebase.
In this repository github.com/mariorodeghiero/reactjs..., I have an example with React and firebase.

Collapse
 
rashidbik7 profile image
RashidBik7

it dose not work for me the error says "Cross-origin request blocked"

Collapse
 
changtraisitinh profile image
Hiep Nguyen

ii using mockoon for mockup api server

Some comments may only be visible to logged-in visitors. Sign in to view all comments.