How to Create a Express/Node + React Project | Node Backend + React Frontend
HTML-код
- Опубликовано: 27 июл 2021
- Hey guys, welcome back! In this video, I will be showing you how to create a project with an Express/Node backend and a React frontend. We will set up a backend API with Express that returns an array of users and in the frontend, we will fetch that backend and display the same users onto the frontend.
If you don't know what Node is, Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices. If you don't know what Express is, Express is a web framework for Node.js. It provides a robust set of features for building web applications, including routing, views, templates, and more.
If you don't know what React is, React is a JavaScript library for building user interfaces. It is maintained by Facebook and Instagram. React's declarative, efficient, and flexible nature make it an ideal choice for building user interfaces.
My Website: arpanneupane.com
My GitHub: github.com/arpanneupane19
Official Express Documentation: expressjs.com/
Official React Documentation: reactjs.org/
My Programming Gear :
Keyboard: amzn.to/42vXkxh
Laptop: amzn.to/3CkAP3W
Laptop Stand: amzn.to/3X116Oi
Desk: amzn.to/43wmIEt
Monitor: amzn.to/42BAaFH
Monitor Arm: amzn.to/3NR0APS
Chair: amzn.to/42vvKAn
Desk Mat/Mousepad: amzn.to/43AhKqj
Microphone: amzn.to/45RuQ43
Headphones: amzn.to/445sf4R
#Express //#Node //#React // #LearnToCode 
Наука
![100 Days - [Minecraft Creative 2]](http://i.ytimg.com/vi/OmogWsk_ZZg/mqdefault.jpg)
Absolute legend, explained it way faster and clearer than other tutorials. Thanks a million.
Thank YOU for your support!
Yes bro...superv explaination.. short and sweet
25 years a dev, here. This was just the right amount of detail. Quick, clean, and concise.
Subbed!
I'm in a coding bootcamp and your explanation was simpler and easier to understand. I learned more in your 12 minute video than in the 12 videos on this subject in my bootcamp. Thanks!
Awesome!
I have been looking for just a dead simple explanation for how to get a project like this started for a while and I just found this. Dude it’s awesome. Thanks for such a trimmed down streamlined explanation!
I love this simple, straight forward description to display all these kind of powerful tools' functions and how it could be.
thanks so much for this - I learned about web development through a bootcamp and they were so focused on just getting us up and running that we didn't get a lot of explanation to the specifics of what express was doing and how the client was getting data from the backend. This definitely cleared things up
Wow!! Teaching what seems to be difficult to many in a very relatable and brief way such as this is not something that is common in the world. I must add that this tutorial of yours is priceless. Keep it up
This is crazy clear. I literally never comment on youtube videos, but I was working on something exactly like this and this was absolutely perfect! It's like you knew what I was thinking!
An absolute expert, they explained the information in a much quicker and more concise manner than other tutorials. Thank you so much.
Great tutorial. I spent days trying to figure out how to connect BE and FE, and this video finally explained it clearly.
This is still relevant even after 2 years (node has had many changes and so has React) for anyone wondering :)
Thanks man
Thank you so much for a very clear and concise video. I have been learning a lot of these tools in isolation. It's good to see how they all fit together. Great work!
That was great short and to the point video on how full stack looks like on a simple level. Very helpful
could have watched an 8 hour code camp but i got exactly what i wanted to know from right here, cheers man
Way clearer then any tutorial so far, thanks man. I was breaking my head over this…
Legend bhai saw a ton of tutorials for hosting my api but yours was way too clean. Thanks a ton
Fast, clean and on the point. Only tutorial you need.
Nice! I think most videos out there get bogged down and try to over explain or add content etc. This is so clean and literally all you need to get started.
THIS IS THE VIDEO I HAVE SPENT WEEKS LOOKING FOR!! Thank you so much.
This is the best I've seen this explained and it clicked so well (and quickly) watching your video. Thanks so much!!
Absolutely what I was looking for. Thank you for the lesson.
Up-to-date video as today 29th september 2022, super helpful, I finally figured out how to connect a React client with an Express server. Big up!
The most concise video I've came across of connecting front-end to back-end, earned a subscriber!
Thank you!!!
@@ArpanNeupaneProductions This video is the best. This is how development should work. Most developers don't know shit, they just like to flex their muscles and do simple things in a complicated way for ego purposes. Would like to see how you implement Cordova Frontend and Express NodeJs Backend. Sure it would be similar. Nice video again
@@jamesorior
Thank you very much for your support. I haven’t used Cordova Frontend at all, however, you can use the same methodology described in the video. You can try finding a configuration file that can link with the Node backend via the API URL, then set up the backend the same way it’s set up in the video, and finally find a way to call the API in Cordova to display the data on the screen. Again, thank you for the support :)
Efficient + Clear ! You are a great teacher !
Thats a huge and a great explanation. Coming from the Data Engineering world Finally i understand Node, React and so on. God Bless you.
Amazing , going to watch more of your vids very smooth and clean explanation and not overly fast bravo
Great video ! Short, concise and clear. Love it.
Great stuff, spent a long while trying to figure this out by myself - thanks!!
the fact that you are 15 is super impressive bro. keep up the great work.. learned a lot from you.. you will have a very bright future young g!
Exactly what I needed in less than 13 minutes. Amazing tutorial, tnx
Literally fixed my lack of knowledge in 12 minutes! Thank you dude!
Of course dude!
Real helpful! Thought setting up an API was much harder but you made it look very easy!
FANTASTIC! Great video! Very easy to follow. Keep pushing more videos.
Thank you so much! Your video is so clear that I was finaly able to understand how to setup my project.
Thank you for making this as simple as possible.
Legend! super simple, concise and straight to the point. It would be nice to have tutorials about MERN from you :-)
Awesome dude thank you. This made it way easier to get a start
Very helpful when you are just starting to work with Node.js, thank you!
This is the best video to get started with fullstack projects imo❤
This was perfect for what I wanted to learn, pitched to my level.
The actual GOAT. I was wondering what the heck I was doing well since i started an ambitious early project but you gave me my confidence back
Thank you!
Best explaination! Been struggling to understand this concept. Now I got it!
thanks a lot man, I was trying to connect my front with my back and I had no idea, this tutorial is very clear and concise, thanks for what you did
You’re welcome!
Awsome ... Tks ! Clear, fast and it works !!! Added and sharing ....
Eloquently explained. No wasting of time. Just fun to watch.
Thank you!
thanks
amazing
love this quick
I have been working as backend engineer for few months now
thahanks
This is exactly what I needed! Thanks a lot!
This is an amazing and effective lesson!
Also it is a simple.
Thank you!
I am watching from Japan.
The explanation was very easy to understand.
Thank you so much for creating useful videos.
Perfect Explanation, this guy knows what we are looking for in a video
Thank you!
thank you so much man its really to the point absolute legend
Damn that was so informative! I have been looking up for quite some time , and this veedio shown up, most importantly it was exactly what I need, amazing!
So concise! This clears a lot of things, Thank you!
Subscribed! The way you explain and demonstrate is really really nice. I love it ❤!
Great way of teaching in less time ,am so satisfied. If you know basics then it will really help to how to setup and link the client and server
This was a great lesson. You are the man!!!!
I watched a couple of tutorials and this was the best one. Thanks!
Glad I could help!
Just subbed! excelent explenation, and in depth commenting on what you were doing!
This video was so good and straight forward !! Thanks
This video is coherent. Thank you for uploading
Thank you for the clear explanation, you got a new subscriber.
Absolutely loved it. Thanks a lot🎉🎉
This video is exactly what i needed! Thanks, and ill be checking out more of your vids!
I appreciate it!! Thank you!
Thanks, this was very simple to understand. Keep it up with the great videos
Thanks for this amazing video.
it helped me understand, how frontend & backend exchange data.
Thank very much
You're welcome!
thank you for the tutorial, this saves me a lot of time! AWiting for your tutorial on how to connect the database to the project
for the mac users， if you have address already in use error，Apple introduced some changes for AirPlay on macOS Monterey. Now, it uses 5000 and 7000 ports. If you are using these ports in your project, you need to disable this feature.
System Preferences > Sharing > untick AirPlay Receiver
thank you so much. This helped me greatly. You explained it so well
I needed these fundamentals and step by step quide .. thank you.
Amazing work man. Currently following along MDN's tutorial for Express and was wondering how the hell that would connect to React. Granted, I still am not finished with it but this is so much more understandable.
Bro, your video is so helpful! Thank you!
Maan I was searching like crazy to find something like ths, this is the first guide / tutorial that actually works!
Thank you!
you sir, you are something different you are a goddamn legend. saved my day!
i learned a lot from this video. thank you so much.
simple & to the point. Cant say thank you enough 🙏🙏🙏🙏🙏🙏 !
By far the best, concise, easy to understand explanation video. Thanks for this.
Thank you so much! It means a lot!
Thank you for discribing this relationship clearly, I was struggling with getting backend data to the frontend, Liked and Subscribed!
Thanks for the sub!
Thank you, this was great!
great video, very useful and straight to the point
woooow best video I have seen so straight to the point
Awesome bro, thanks for the tutorial!!
Great tutorial man, thanks!
Excellent! All the other learning resources I have come across make the assumption that the student already has the same mental picture of the files and folder setup as the teacher has. Your video is clearest to me so far because I see the folders and files in Visual Studio explorer on the left and although I am not 100% sure, I think those folders and files represent the actual folders and files on the hard drive. What must be installed where is more clear to me now.
You're right!
got yourself a subscriber man lots of loveeeee
i came from 0 bg in express and react api's, left with 100% of new information sound and clear
Amazing tutorial, exactly what I was looking for!
👍
thank you soo much bro. its made me a day
Thank you for saving my time ❤
Humanity is prospering all because of contribution of people like you. Thanks
Awesome man got me back up and running fast.
Glad to help!
Thanks u don't know how much u helped me
Excellent simply explained tutorial. Thanks!
straight to the point......thanks a lot sir...
First and best tutorial with Node and React without indian talk, and bullshit talk. Thanks alot mate ! Keep up with this type of great content.
Great video, thank you sou much!
Thanks for the video, uber useful.
Great Video straight on point
Really thank you for this video. This video solve my problem.
Thank you so much that was really helpful
Thank you! I’m new, and I was able to follow along and my little app is working! At first I put the “proxy” in the wrong pkg json but the realized it has to be in the client package.json (duh! Lol)