loading...

jSON Server with ReactJS

mariorodeghiero profile image Mario Rodeghiero ・2 min read

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]"
    }
  ]
}

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!!!

Posted on by:

mariorodeghiero profile

Mario Rodeghiero

@mariorodeghiero

Self-taught Front-End Developer. #ReactJS #styeled-components #Javascript #electronjs

Discussion

markdown guide
 

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?

 

Do you have the full CRUD Reactjs with json server plz?

 
 

Could you write the POST and UPDATE fetch to a table with json server? please,
like u did with GET in the above article?

i dont know how to UPDATE and POST data from json server db.json

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...

 

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

 

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

 

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.

 

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

 

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

 

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

 

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

 

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