Full React Tutorial #16 - Using JSON Server
HTML-код
- Опубликовано: 7 янв 2021
- JSON server tutorial - • Up & Running with JSON...
🐱💻 🐱💻 Course Files:
+ github.com/iamshaunjp/Complet...
🐱👤🐱👤 JOIN THE GANG -
/ @netninja
🐱💻 🐱💻 My Udemy Courses:
+ Modern JavaScript - www.thenetninja.co.uk/udemy/m...
+ Vue JS & Firebase - www.thenetninja.co.uk/udemy/v...
+ D3.js & Firebase - www.thenetninja.co.uk/udemy/d...
🐱💻 🐱💻 Helpful Links:
+ HTML & CSS Course - • HTML & CSS Crash Cours...
+ Modern JavaScript course - • Modern JavaScript Tuto...
+ Get VS Code - code.visualstudio.com/
🐱💻 🐱💻 Social Links:
Facebook - / thenetninjauk
Twitter - / thenetninjauk
Instagram - / thenetninja
Honestly, I really like his react tutorials not only because of his British accent but he also explained them quite remarkably.
true..but I guess he has more an Irish accent than British....
@@Banjer may be
@@Banjer It's definitely English. I'd guess Manchester-ish, perhaps Preston.
@@peekaboosteam I remember he mentioned in the past that he's from Manchester. Or maybe the information was shown on his blog or something similar in one of his tutorial series, idk.
it's a bit noice innit? :P
These bite size tutorials are so much better than slogging through 2+ hour ones.
this
{
"blogs":[
{
"title":"My First Blog",
"body":"Why do we use it?
It is a long established fact that a reader will be distracted ",
"author":"mario",
"id":1
},
{
"title":"Opening Party",
"body":"Why do we use it?
It is a long established fact that a reader will be distracted ",
"author":"yoshi",
"id":2
}
]
}
thank you, it makes my tutorial experience easier.
@@rin0422 data incomplete
Thank you, just specially entered comment section for that
ty
I have learned more in this 3 hours course than in 30+ hours of Udemy courses. You are amazing.
That's awesome to hear, thank you! :)
Same I agree. I learned much better with these videos rather than Udemy's
Shaun is the best teacher period. I've been trying to learn React and spent quite a few $$$ but with this one, it's all making sense. BTW, as of 2/11/2022, I just ran the JSON Server npx command in a new terminal and it worked like a charm.
I second you on this!!! He has a unique teaching style that makes it easy to understand.
Halfway through and I have to say: you are a phenomenal educator. You are doing a great job explaining everything. After every short session I have more confidence in what I just learned. Thank you.
Great job and keep up the good work!
I am an 'older' new to coding just approaching the end of a 3 month bootcamp. I have learnt more from the Full Modern React Tutorial than anything on the bootcamp. Well done Net Ninja, you are a very talented teacher and thanks for putting these out there, and yeah as a Prestonian (living in Manchester) your Manchester accent helps!
Modern Redux should be the next playlist! best teacher on youtube along with traversy media ahha
I've been using json server as part of my workflow since the series you did 2 months ago. thx net ninja
npx json-server --watch data/db.json --port 8000
sudo npm i json-server -g
use without npx :)
@@alcezeri thank you!
@@annisaautami We give free javascript course every weekend on saturday-sunday
Jazak Allah Brother ♥️☝🏻
I am doing a coding bootcamp and I'd be lost without your tutorials! you explain everything so well that it helps me truly understand what is going, I watch them after class to bring everything together - thank you!
Thank you for showing a perfect way of running JSON-server with my existing React app for testing purposes.
This was a wonderful solution, not discussed in tutorial/blogs I had seen soo far.
The Best Ever Instructor on RUclips🙂
If anyone may face this Error in the terminal
""""" Oops, data/db.json doesn't seem to exist.
Creating data/db.json with some default data """".
the solution is to 'Go to the folder where your db.json file resides. then run the command json-server --watch db.json
in terminal and it would work with you.
I got a similar error, but I realized that the folder data was not created in the right spot (directly under the DOJO-BLOG), but rather in the src directory. So my solution was just to drag and drop the folder data at the very bottom of the project explorer area (the left area that displays all sort of project files) and by moving data to the right location, the command shown in the video works.
Thank you so much! ☺️☺️☺️☺️
thx!
Best explanation of React I have seen on youtube.
the net ninja is definitemy the best of ninjas , kudos mate :)
Shaun you are a legend!!
for anyone experiencing an error said "could not install from [your computer name] as it does not contain a package.json file" when run the npx json-server --watch data/db.json --port 8000 command, please run this command first "npm i json-server -g" it works for me.
Thank you!
I know this is old but thank you sm
The Best Teacher on the internet, Thank you Shaun
Thank you very much! Great tutorial! I already know basic react. But from this series, I learned lot of new things.
Glad it was helpful! :) thanks Jayashri
You never disappoint, man.
I appreciate a lot your tutorials. Thanks a lot.
If anyone else was having trouble running json-server try "json-server --watch data/db.json --port 8000" and omit the npx part.
This json server really saves my neck from creating database. Its really a good thing you have taught me to play around with the app. 3:29 I marked the time for future reference. Thank you Shaun!
How have you marked the time?
@@kashmirtechtv2948 Just wrote the time to mark it just like we drop the pin on the map to mark the location.
Si a g
There is NO course well explained form React js but i saw your courses im surprized. You have unique teaching style and explaining little things for understand and combine all theese things. Thanks ❤️
Wow, thanks Batu :) that means a lot
@@NetNinja Can you make Pinia state managment videos for VUE JS if possible?
Great tutorials ...thank you so much
If any one have problem when running npx json-server --watch data/db.json --port 8000 and you are using powershell on terminal. (It didn't run like me)
Try to switch to Command Prompt instead of powershell on terminal.
Hope this will help :"3
Thank Net Nija for this tutorial
It works.Thanks for suggestion
Thanks a lot friend, it works
this tutorial is great because every videos is short and totaly useful tnx :)
Thanks :) that means a lot
Hi I'm having a problem, when trying to start the server with "npx json -server watch data/db.json --port 8000", it returns " json: error : unkown option '-s' ". I'm not sure how to fix that or work around it
Great Tutorial but i think you did not mention that we need to have the json-server thing installed before we can ues the npx json-server command
do npm install -g json-server to install it and then run the command
Thank you
Thank you , I was struggling with this how to use this tutorial command
God bless. you just save my a$$
Really really nice teaching you present. But I wish you would include the DB (SQLite) part since it so common. But Thank you for making sense to React!
Amazing Explanation Thanks, Sir!!!
No probs :) thanks
Thank you for the fantastic tutorial.
Is there any video showing how to connect react with SQLite database?
Since I have a ".db" file, I need to display its contents using react.
Thanks for the great explanations your teaching is on another level.
I have an inquiry, how can I deploy a JSON server file so that data can be accessed globally from anywhere other than from the local server? I will be glad to have your positive feedback
Is there a way to have localhost:8000 show the default homepage? As it is, it would try to render the react public folder, but is there a way to tell it to ignore that?
I'm curious if you can do Solidity or any web3 related content tutorials(you are really a good teacher)
I didn't get about the 2 options you have told about installing Json pakage. Can someone guide?
gracias ! thank nice video
Your teachings are very easy to understand and I want to say very big thank you for that. But I have errors trying to use the json server, it's giving a lot of errors, I would like some help with it, Thank you and I will be waiting
If you are having trouble making json server work, another thing i did that worked was re-run yarn start
do you have videos on how to fetch data from backend api through react then post those on a website, or using wordpress?
Amazing
I have an error when im doing json thing. I put exactly what you code but it gives me error.
npm ERR! code ENOLOCAL
etc etc
you my man. are awesome.
Hi Shaun and everyone here, please how can I make my dbjson file work on other devices apart from my PC
you are awesome
💟
how can this amazing content be free. Hats off to you man!
Thanks
Amazing Explanation!
but can I do this JSON database thing in Next.js?
please help.
Thankyou
thank you, this video help me to create an api fake with json server, i have an error and that was from the terminal, i didn't know that i need open an individual terminal in my vs code
Thank you Mr Net Ninja, please how can I use firebase database instead of local json server.
verygood course....is it possible to make React + Ant Design please
Where do front-end developers hold the data? I know things such mockAPI, Fire Base. But what is the regular one devs actually use? Can i use just json request (localhost) then deploy it?
favorite teacher
Thanks Amjad!
Thanks
Good tutorial. Please I am getting error when installing the Json server. How can I correct it, please.
Just a dumb question. Both GET and DELETE requests use the same endpoint /blogs/{id}, how does the server know which is the action I intended to do?
adamim supersin:)
Good evening everybody. Is there a 'how' of nesting data in this json server data.?
this shows when I try to use command
When I try to run the command this shows
Error: EPERM: operation not permitted, mkdir 'C:\Users'
command not found: json-server
Thank you!
You're welcome Erman!
can we host the json server on the internet using netlify
Awesome!
Thanks!
thanks
Is this also a way of storing data in local storage
npx: installed 1 in 4.974s
json: error: unknown option "--watch"
why is it showing like this?
got the same error. i am on a mac an was using the app "notes" to copy the command to the terminal. turns out the dashes were being converter to a dif character. try typing directly in the terminal :) worked for me
ty.
my terminal has 1:bash instead of node is that alright?
hi, when i tried to run npm i json-server --watch data/db.json etc. etc. on vscode terminal, a small window pops out asking me to connect to github (sth about connecting github and vscode...), not sure why, is this happening to anyone?
How do I host this app in codesandbox? I get the "failed to fetch" error after hosting it. How do I fix this error please
Finally I found a solution for my error here.
I thought I was the first to watch😂
Pls why is that json server can't display imagies.. I'm having issues on that,i need help
hey shaun? do you have any plan for FullStack dev
@@raslanismail9691 yeah but I am struggling to start my MERN scack project...:-)
I am am getting the error, uncaught TypeError: blogs.map is not a function. Does anybody know how to solve this error i have tried to run the code from github but still get he same error. I am using vs code.
What do I do if I want to edit a blog? Can anyone help me regarding this?
im getting an error : enoent : no such file or directory pls help
hello Shaun, can you make a video for Route ??
That will come later in the series :)
I'm getting thin error😞😞
After running 3:18 npx thingy
Error: EPREM: operation not permitted, mkdir 'C\usere\username'
Command not found: json-server
Edit : 😁😁😁😁
It worked, sm1 at stack.o said run cmd w adminstrator
Sooo 🍉✨✨!!
how did it work can you pls explain
@@born_to_matter2140 This error comes when your username has a spaces. For this one you would have to replace the username on the path for npm config that has spaces with the alternative username windows generates which you can get by using the cmd DIR /X if you are in the location. "c:\Users\". After getting the alternative name you have to run this command. npm config set cache "C:\Users\\AppData\Roaming
pm-cache" --global
Request you to make a project series using Nodejs* & React* , very next or later..
SyntaxError: The requested module 'node:util' does not provide an export named 'parseArgs'
🙏
Actually, json-server has an option: --delay ... , so there's little point in using setTimeout.
for my future ref: npx json-server --watch data/db.json --port 8000
Just imagine when u are a kid and ur math techer is him...
I can't get localhost:3000 or localhost:8000 working. Help ;__;
I got pretty lost here, It's my first time ever hearing about json, along with ports, etc. and my first time using the terminal and node.js was at tutorial 1 of this series 😅 Is it normal to be this lost or did anyone else feel the same?
Again, another noob statement, but if anyone can recommend where I can learn more about the terminal and everything, I would really appreciate it. I will watch Net Ninjas tutorial on Json, but I feel the terminal is important to understand first before I look at json, no?
Hey Courage, how are you know with react? The first time I went through React, it was also super confusing. But as you learn more JS and write more react, you get used to it. don't feel bad if it is taking time for you to get everything. For learning about the terminal, are you on windows or mac? this is a good place to start from ruclips.net/video/CV-ven_rxhw/видео.html&ab_channel=WebDevSimplified
Shaun bro. Update the error command for the newbies. Thanks
If anyone wants just a json sample
{
"blogs": [
{
"title": "My first blog!",
"body" : "lorem ipsum",
"author": "mario",
"id": 1
},
{
"title": "My second blog!",
"body" : "lorem ipsum",
"author": "yoshi",
"id": 2
}
]
}
thank you bro
if anyone is having trouble with CORS here is the solution, run the json server like this:
npx json-server --watch data/db.json --port 8000 --no-cors
After npx json-server --watch data/db.json --port 8000 installation, I'm not getting the link under the Resources, but it shows the link under Home. Anyone having the same issue?
Yeah i have the same issue!!
I solved it by restarting the vs code and then tried again and it worked!!
@@rachitmittal1131 I’ll try that. Thanks so much for the response! 🙂
My terminal doesn't show any resources?
go into your terminal and run: npm install -g json-server. after that you can run the npx command
@@timm2233 thanks it works.
@@timm2233 thanks man it worked
the db.json :
{
"blogs": [
{
"title": "My First Blog",
"body": "Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
Where does it come from?
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of \"de Finibus Bonorum et Malorum\" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, \"Lorem ipsum dolor sit amet..\", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from \"de Finibus Bonorum et Malorum\" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
Where can I get some?
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.",
"author": "mario",
"id": 1
},
{
"title": "Opening Party!",
"body": "Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
Where does it come from?
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of \"de Finibus Bonorum et Malorum\" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, \"Lorem ipsum dolor sit amet..\", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from \"de Finibus Bonorum et Malorum\" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
Where can I get some?
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.",
"author": "yoshi",
"id": 2
}
]
}
if u have problem with this method npx ..... solution is npm install -g json-server,
json-server --watch data/db.json --port 8000
3:23
1st
I don't have a Resources showing up only home why is this can anyone help?:)
ensure you've saved the db.json file...
run----- npm install -g json-server,
json-server --watch data/db.json --port 8000
@@calebowatah5775 thankyou for saving my time
Does anyone have troubles with the json server?
After running the command: npx json-server --watch data/db.json --port 8000
I got an error: Error: EEXIST: file already exists, mkdir 'C:\Users\{UserName}'
Tried to run VS code as administrator, tried the same command in cmd and in Git Bash and I have the same error.
you should install json-server globally first
Question, my json fake server wont work unless i turned on my Internet, is that by design? or maybe I've done something wrong
because mr.Shaun's fake json server seems to not be needing a connection to start
I might be wrong but when you do npx json-server you are essentially making connection to json-server package which is hosted on npm LIVE without having to install it locally in your dev environment. So, if you do not have internet turned on, NPX can not fetch the json-server package from npm and so it has no idea how to watch the json file or do any of the json-server stuff.
Hey net ninja....been a great journey up to this point.. anytime I try to run the next Jason.server implementation it pops out an error message. I don't know what I doing wrong..I would appreciate if you could help out.
Thanks
I have gotten it...thanks Net ninja
Bro is it me or does everyone sound so much clearer when they have a british accent? I try to look at indian tutorials and they're great don't get me wrong, its just that their accent is like nails to a fucking chalk board.