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.
Result
Now, if we look at the "React App" page, we will have the following 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)
Hi ariana, I have two repositories in my Github:
In development yet: github.com/mariorodeghiero/react-p...
github.com/mariorodeghiero/react-g...
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
onnode < 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
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?
You just need to open another console window and run both commands at the same time. One for 3000 and one for 3001 :)
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.
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 ✌🏼
Really nice article 👏 Do you think that the tool Restapify could be a nice way to mock Rest API like json-server do? 😄
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.
it dose not work for me the error says "Cross-origin request blocked"
ii using mockoon for mockup api server
Some comments may only be visible to logged-in visitors. Sign in to view all comments.