Dev Drawer
Dev Drawer
  • 140
  • 476 018
Become A Full Stack Developer In 7 Lessons - Building React #116
#reactjs #fullstackdeveloper #course #vite
Become a Full Stack Developer-Episode 3: In this episode, we’ll dive deep into integrating React with a PHP backend. Watch as we bridge the gap between frontend and backend using axios, async/await, and the Slim Framework for PHP. By the end of this tutorial, you'll have a fully functional connection where React can fetch data from your PHP API. In future episodes, I will show you how to create CRUD operations and secure your backend.
🔗 Timestamps:
00:00 - Intro
01:38 - Install React Using Vite
03:56 - Clean Up and Components
06:25 - Setting Up Routes and Nav Menu
15:37 - API Connection
17:26 - Display Items from API
23:05 - CORS and Your API
31:31 - TypeScript Clean Up
33:31 - Set Loading State
⭐ Programmer Merch: store.thedevdrawer.com/#!/
⭐ Join the Discord: discord.gg/4nRPmBFSDj
⭐ If you would like to buy me a coffee because I created something that helped you, it would be much appreciated! : www.buymeacoffee.com/devdrawer
⭐ Join this channel to get access to perks:
th-cam.com/channels/cr8eSk5xCfn3AbYy8WOWzg.htmljoin
⭐ Become a Patreon to show support and get exclusive access to content: www.patreon.com/devdrawer
`````````````````````````````````````````````````````````````````````````````````````````````````````````````````````
Subscribe: bit.ly/2Wbsnj9
`````````````````````````````````````````````````````````````````````````````````````````````````````````````````````
Join us on our blog for video recaps and other tutorials: thedevdrawer.com
Become a fan on Twitter: thedevdrawer
View Project on GitHub: github.com/thedevdrawer
มุมมอง: 543

วีดีโอ

Become A Full Stack Developer In 7 Lessons - CRUD Endpoints #115
มุมมอง 2742 หลายเดือนก่อน
#reactjs #fullstackdeveloper #course #apidevelopment Become a Full Stack Developer-Episode 2: In this episode, we’ll build a basic RESTful API using the Slim framework. This will include setting up routes for common CRUD operations and making sure our API follows REST principles. Also, we learned don't just copy and paste from other code you created, read through your code to ensure it is corre...
Become A Full Stack Developer In 7 Lessons - Slim Backend API #114
มุมมอง 4012 หลายเดือนก่อน
#reactjs #fullstackdeveloper #course #apidevelopment Become a Full Stack Developer-Episode 1: In this episode, we set up the backend of our full-stack app using the Slim PHP framework. We create a basic Slim project, install the necessary dependencies, and configure routing. We also configure the database connection using PDO and create the initial directory structure for controllers and servic...
How To Send Emails with React.js using Fetch (2024) #113
มุมมอง 7516 หลายเดือนก่อน
Thank you to Mailtrap.io for sponsoring this video. Use the sponsor code DEVDRAWER to receive a free Mailtrap "10k Basic Email Sending" plan for a month. Try Mailtrap for free: l.rw.rw/devdrawer Continuing our previous React JS video, we will add an email send function to the previously created contact form. You can view the crash course on this URL: React JS Crash Course: th-cam.com/video/Ou-R...
React.js 1 Hour Crash Course Preview #coding #programming #code
มุมมอง 828 หลายเดือนก่อน
#shorts #short #react #tutorial Want to learn React.js? Take a look at my 1 hour tutorial on how to use common components and how to setup a React website. ⭐Programmer Merch: store.thedevdrawer.com/#!/ ⭐ Join the Discord: discord.gg/4nRPmBFSDj ⭐ If you would like to buy me a coffee because I created something that helped you, it would be much appreciated! : www.buymeacoffee.com/devdrawer ⭐ Join...
React.js Crash Course, Learn React in 1 Hour #112
มุมมอง 9998 หลายเดือนก่อน
Welcome to our latest TH-cam tutorial! In this comprehensive crash course, we dive into the exciting world of React.js. Whether you're a seasoned developer or just starting out, this video is packed with everything you need to learn React in just one hour. We'll cover the fundamentals of React, including components, JSX syntax, state management, props, hooks, and more. By the end of this tutori...
Create A Tip Calculator Using JavaScript # 111
มุมมอง 540ปีที่แล้ว
#javascript #tutorial #tipping #calculator In this video, I will show you how to create a simple restaurant bill and tip calculator using vanilla JavaScript, HTML, and SASS. You can use this tutorial to build your own and help you figure out the total bill amount per person and even what each person will need to tip based on selectable percentages. This is a quick and easy project that anyone l...
How to Collect Data from an External API using Node and Axios #110
มุมมอง 1.6Kปีที่แล้ว
#Nodejs #Axios #API #Tutorial #DataCollection Welcome to DevDrawer! In this tutorial, we'll show you step-by-step how to collect data from an external API using Node.js and Axios, the popular HTTP client library. Whether you're a beginner looking to learn the basics or an experienced developer seeking a refresher, this video is packed with valuable insights. View the entire series here: Learnin...
NodeJS Demystified: Unlocking Styling and Data Wizardry #109
มุมมอง 209ปีที่แล้ว
NodeJS Demystified: Unlocking Styling and Data Wizardry #109
Learning NodeJS: Routing and Templates #108
มุมมอง 254ปีที่แล้ว
Learning NodeJS: Routing and Templates #108
Learning NodeJS: Setup and Starting Your Server #107
มุมมอง 297ปีที่แล้ว
Learning NodeJS: Setup and Starting Your Server #107
10-Minute Python Tutorial: Build a Random Fortune Generator #106
มุมมอง 714ปีที่แล้ว
10-Minute Python Tutorial: Build a Random Fortune Generator #106
Mastering Mustache and PHP for SPA Development #105
มุมมอง 2.8Kปีที่แล้ว
Mastering Mustache and PHP for SPA Development #105
Unlock The Power of RegEx! JavaScript Tutorial #104
มุมมอง 317ปีที่แล้ว
Unlock The Power of RegEx! JavaScript Tutorial #104
How to Count Words and Characters in JavaScript - #103
มุมมอง 1.7Kปีที่แล้ว
How to Count Words and Characters in JavaScript - #103
Which PHP Framework Should You Use in 2023? - #102
มุมมอง 16K2 ปีที่แล้ว
Which PHP Framework Should You Use in 2023? - #102
[WordPress 6.1 Update] What's New & Changed - #101
มุมมอง 6672 ปีที่แล้ว
[WordPress 6.1 Update] What's New & Changed - #101
DevDrawer's Top Programming and Development Tutorials! - #100
มุมมอง 9622 ปีที่แล้ว
DevDrawer's Top Programming and Development Tutorials! - #100
How to Show and Hide the Password Field in JavaScript - #99
มุมมอง 1.2K2 ปีที่แล้ว
How to Show and Hide the Password Field in JavaScript - #99
Learn How to Make a Digital Clock with an Alarm in JavaScript - #98
มุมมอง 2.6K2 ปีที่แล้ว
Learn How to Make a Digital Clock with an Alarm in JavaScript - #98
Learn how to make a simple countdown timer using JavaScript! - #97
มุมมอง 3.3K2 ปีที่แล้ว
Learn how to make a simple countdown timer using JavaScript! - #97
Learn How To Dynamically Create A PDF Using PHP - #96
มุมมอง 3.5K2 ปีที่แล้ว
Learn How To Dynamically Create A PDF Using PHP - #96
How To Automatically Generate CSS Using Live Sass Compiler - An Easy Set Up! - #95
มุมมอง 13K2 ปีที่แล้ว
How To Automatically Generate CSS Using Live Sass Compiler - An Easy Set Up! - #95
Collapse / Expand Sidebar Menu Using JavaScript, HTML, & CSS - #93
มุมมอง 16K2 ปีที่แล้ว
Collapse / Expand Sidebar Menu Using JavaScript, HTML, & CSS - #93
Geolocation Tutorial - User Location with Vanilla JS - #92
มุมมอง 8852 ปีที่แล้ว
Geolocation Tutorial - User Location with Vanilla JS - #92
Implementing reCAPTCHA v3 - #91
มุมมอง 17K2 ปีที่แล้ว
Implementing reCAPTCHA v3 - #91
AJAX / Fetch API Crash Course - #90
มุมมอง 3.3K2 ปีที่แล้ว
AJAX / Fetch API Crash Course - #90
PHP CLI Development Intro - #89
มุมมอง 1.3K2 ปีที่แล้ว
PHP CLI Development Intro - #89
Vanilla JS Single Page Application Routes | # or URL - #88
มุมมอง 43K2 ปีที่แล้ว
Vanilla JS Single Page Application Routes | # or URL - #88
What's new in PHP 8.1 - #87
มุมมอง 7872 ปีที่แล้ว
What's new in PHP 8.1 - #87

ความคิดเห็น

  • @SK_Covers
    @SK_Covers 14 วันที่ผ่านมา

    Bro is back after a loooong time.🎉🎉🎉 Wish you a very happy, sweet and healthy new year. ❤❤❤❤❤

    • @DevDrawer
      @DevDrawer 14 วันที่ผ่านมา

      I have some time off work so I have been trying to get some tutorial time in. I'll be on for the premiere tomorrow so we can chat if you need to. . I hope you enjoy it.

  • @margiegodwin6369
    @margiegodwin6369 28 วันที่ผ่านมา

    Can this be done without a computer

  • @MindThriveApp
    @MindThriveApp หลายเดือนก่อน

    Great tutorial thanks.

    • @DevDrawer
      @DevDrawer หลายเดือนก่อน

      Glad I could help

  • @SK_Covers
    @SK_Covers หลายเดือนก่อน

    Waiting for next video. Drop it ASAP ❤🎉

    • @DevDrawer
      @DevDrawer หลายเดือนก่อน

      Sorry for the delay. Thanksgiving travel derailed anything last week. Trying to get it finished asap.

    • @SK_Covers
      @SK_Covers หลายเดือนก่อน

      ​@@DevDrawer Drop it before new year 😢😢😢

  • @SK_Covers
    @SK_Covers หลายเดือนก่อน

    Awesome explanation.🎉🎉 And please release atleast once in a week. Just completed two of your episode. I'm getting ready for building frontend 🔥👀 Just make it soon ❤❤❤

    • @DevDrawer
      @DevDrawer หลายเดือนก่อน

      I'm trying to get more on a weekly or biweekly release schedule, but my work keeps me pretty busy. I am working on the next 2 videos in this series. I will push something out within the week. Thanks for watching.

    • @SK_Covers
      @SK_Covers หลายเดือนก่อน

      @DevDrawer Thankyou. I'm waiting ❤️🔥👀💯

  • @peterbarraud5254
    @peterbarraud5254 2 หลายเดือนก่อน

    Excellent. Helped me fixed a "cors" issue I was struggling with endlessly👍

  • @paulwdoyle
    @paulwdoyle 2 หลายเดือนก่อน

    I don't use SASS but I have started using native nested css ... this morning I realised that Safari support isn't great so went looking for a solution... This saved my ass, thanks very much.

    • @DevDrawer
      @DevDrawer 2 หลายเดือนก่อน

      That is awesome to hear. Glad I could help.

  • @LucasPerez-s8l
    @LucasPerez-s8l 2 หลายเดือนก่อน

    Thank you, it helped me a lot. Cheers from Brazil

    • @DevDrawer
      @DevDrawer 2 หลายเดือนก่อน

      That is great to hear. I hope you get help from my other videos too. Good to know I got viewers in other countries.

  • @DevDrawer
    @DevDrawer 2 หลายเดือนก่อน

    I'll go first. I learned VB.NET and transitioned to PHP. Then I moved on to React.js + TypeScript + Node.js with the occasional PHP API.

  • @alvinolavarrieta
    @alvinolavarrieta 3 หลายเดือนก่อน

    What php server are you using?

    • @DevDrawer
      @DevDrawer 3 หลายเดือนก่อน

      Ubuntu with Apache

  • @karthickm7776
    @karthickm7776 3 หลายเดือนก่อน

    hey do you have discord server?

    • @DevDrawer
      @DevDrawer 3 หลายเดือนก่อน

      Yes, but honestly, I am not on it too often. There are some other users that browse it, and I like my head there sometimes. discord.gg/VUr9ycRH

    • @karthickm7776
      @karthickm7776 3 หลายเดือนก่อน

      @@DevDrawer thanks man.

  • @mauricioernestomoralesariz1496
    @mauricioernestomoralesariz1496 3 หลายเดือนก่อน

    Another thing I notice is that without the elementor plugin when I try to edit a page or post the title and content appear but if I activate the elementor plugin only the title appears and not the content.

  • @mauricioernestomoralesariz1496
    @mauricioernestomoralesariz1496 3 หลายเดือนก่อน

    Hello, thanks for your video. I followed all your steps. However I have an error because when I want to create a page o post and edit them with elementor appear Updating failed. The response is not a valid JSON response. Could you help me to solve the problem. Thanks

  • @1RRaider
    @1RRaider 3 หลายเดือนก่อน

    How would you handle dynamic styling and global styling ?

  • @sphinixminecraft3328
    @sphinixminecraft3328 3 หลายเดือนก่อน

    Woah, that was overwhelming! I am a beginner, trying to make my own similar project but I see that after 3 weeks of learning, I only got like 50 to 60 percent of what you did. I think that I should give this tutorial a break.

    • @DevDrawer
      @DevDrawer 3 หลายเดือนก่อน

      What do you need help with specifically? Maybe I can point you in the right direction.

    • @sphinixminecraft3328
      @sphinixminecraft3328 3 หลายเดือนก่อน

      @@DevDrawer I was trying to make a dashboard website, as a practice for drawer sidebar. But seems like I need to learn alot more things about html and css rn so I will book mark this one for later. Thank you though.

  • @markhawkins3677
    @markhawkins3677 4 หลายเดือนก่อน

    Thanks for the video, but it would be great if you had a github depository of this with source code. I'm so tired of finding tutorials about doing this with NODE server or its so old it wont work after hours of frustration. And 90% of tutorials are so out-dated. My use case for React is building interactive websites. That's it, no more.

    • @DevDrawer
      @DevDrawer 4 หลายเดือนก่อน

      That is a good point. I usually add the repo but forgot for this one. I will get it up by tomorrow at the latest. Thanks for the reminder.

    • @DevDrawer
      @DevDrawer 4 หลายเดือนก่อน

      I have added this code and the original code that this project was based on from the other video to GitHub. You can see it here: github.com/thedevdrawer/sample-react I will also update the description of the videos so you can easily access them. Thanks again.

  • @JovanNikolic-vw8pk
    @JovanNikolic-vw8pk 4 หลายเดือนก่อน

    Great stuff! Thanks mate 👍

    • @DevDrawer
      @DevDrawer 4 หลายเดือนก่อน

      Glad you liked it

  • @Tianex
    @Tianex 4 หลายเดือนก่อน

    we use yii3, it seems a mistake😂

  • @Bikinin
    @Bikinin 4 หลายเดือนก่อน

    Finally I fond the dinamically pdf generator, Thanks Sir

    • @DevDrawer
      @DevDrawer 4 หลายเดือนก่อน

      That is great. It comes in handy very often.

  • @LaboJaan
    @LaboJaan 5 หลายเดือนก่อน

    • @DevDrawer
      @DevDrawer 4 หลายเดือนก่อน

      Thanks

  • @ilkoto
    @ilkoto 5 หลายเดือนก่อน

    Its looks nice, but what will happend on SEO with this technique? Can we make SSR with Vanilla JS also?

  • @chrisstonalll
    @chrisstonalll 6 หลายเดือนก่อน

    Hey i was getting errors on my own site, then used your example code which i copied it word for word including the php and js. i still get an error when i try submit the form. all my keys are correct. is there something i am doing wrong still? i hosted it and still wont work. Please help.

  • @ananthac6472
    @ananthac6472 6 หลายเดือนก่อน

    thanks brother

    • @DevDrawer
      @DevDrawer 6 หลายเดือนก่อน

      No problem

  • @tim-osflow7628
    @tim-osflow7628 6 หลายเดือนก่อน

    Thx for this nice tutorial, but I get 'event' is deprecated at the const urlRoute function, I can't figure it out....I checked your GitHub Code and copied it, double checked everything

  • @de_castilho
    @de_castilho 6 หลายเดือนก่อน

    dude, this is the best video that i saw about simple js SPA.

    • @DevDrawer
      @DevDrawer 6 หลายเดือนก่อน

      That is awesome to hear. Thank you.

  • @quvomiddinkamalov3292
    @quvomiddinkamalov3292 7 หลายเดือนก่อน

    Thank you sir I have been looking for that❤

    • @DevDrawer
      @DevDrawer 7 หลายเดือนก่อน

      Awesome. Glad I could help. Thanks for watching.

  • @DevDrawer
    @DevDrawer 7 หลายเดือนก่อน

    Thank you to Mailtrap.io for sponsoring this video. Check them out and use my promo code for 1 month free: Try Mailtrap for free: l.rw.rw/devdrawer

  • @eseval
    @eseval 7 หลายเดือนก่อน

    Great tutorial. Help me a lot with a project.

    • @DevDrawer
      @DevDrawer 7 หลายเดือนก่อน

      Hey thanks. Glad to hear it.

  • @danaililiev1404
    @danaililiev1404 7 หลายเดือนก่อน

    algorithum hack

    • @DevDrawer
      @DevDrawer 7 หลายเดือนก่อน

      I'm sorry but I don't understand what you mean.

  • @AdaptorLive
    @AdaptorLive 7 หลายเดือนก่อน

    Thanks for the video!

    • @DevDrawer
      @DevDrawer 7 หลายเดือนก่อน

      Thanks for watching

  • @mal798
    @mal798 7 หลายเดือนก่อน

    I'd really like to see a video with a narrower scope around the best practice implementation of secure basic authentication. I understand the concept of building up to it, but I think many people are landing on your video having already understood UI elements and API calls, but don't understand yet how to authenticate a user and set a cookie or something to persist the session. I feel like these videos miss the point. I have a web app which runs in the browser session, it makes API calls to the backend, and the backend interacts with the DB, that's great. I can add a user ID column to my tables and return values based on current user, that should be ok too, but how do I actually authenticate users in a secure way and take my single user app to multi user?

  • @wutkeks4063
    @wutkeks4063 7 หลายเดือนก่อน

    What is that symbol at 14:34?

    • @DevDrawer
      @DevDrawer 7 หลายเดือนก่อน

      It is two pipes || (commonly used for OR). Sorry apparently my mouse hovered over it while I was talking.

  • @Niqnex
    @Niqnex 7 หลายเดือนก่อน

    Great work. Keep it up...

    • @DevDrawer
      @DevDrawer 7 หลายเดือนก่อน

      Thanks.

  • @michaelnolan8719
    @michaelnolan8719 7 หลายเดือนก่อน

    Been lurking for a while now.. I must say you're incredible and PLEASE keep on sharing your knowledge/skills!!! (I rarely make comments tbh)

    • @DevDrawer
      @DevDrawer 7 หลายเดือนก่อน

      I am glad my videos made you want to comment. That fills me with joy. I rarely comment on videos outside of my channel, so I know how you feel. It means a lot.

  • @TheShmrsh
    @TheShmrsh 7 หลายเดือนก่อน

    vanilla js is painful to watch, is it better with typescript and frameworks or it's same mess there too?

    • @DevDrawer
      @DevDrawer 7 หลายเดือนก่อน

      Pretty much the same, just different flavors. Honestly I like vanilla JS (even as a backend dev). I feel it has a lot of potential. Not the best format but once you get used to the basics and using ES6, it gets much easier to write as a project.

  • @nahuelpiguillem2949
    @nahuelpiguillem2949 7 หลายเดือนก่อน

    Thank you very much man, very clear and to the point

    • @DevDrawer
      @DevDrawer 7 หลายเดือนก่อน

      Thanks. Glad you liked the video.

  • @hornyjesuz
    @hornyjesuz 8 หลายเดือนก่อน

    damn, this video is fully packed with info

    • @DevDrawer
      @DevDrawer 8 หลายเดือนก่อน

      That is awesome to hear. Glad I could help.

  • @scopedreams5931
    @scopedreams5931 8 หลายเดือนก่อน

    what extension are you using to run the .htaccess file? cant seem to get them to run on my vscode

    • @DevDrawer
      @DevDrawer 8 หลายเดือนก่อน

      The .htaccess file is a server directive file so it cannot be run from VS Code. You have to create the file and place it on an Apache server. Here is a link on how you can setup and enable .htaccess on your server: phoenixnap.com/kb/how-to-set-up-enable-htaccess-apache

    • @scopedreams5931
      @scopedreams5931 8 หลายเดือนก่อน

      @@DevDrawer thank you for the help!

    • @DevDrawer
      @DevDrawer 8 หลายเดือนก่อน

      No problem. Glad I could help

  • @xerox2552
    @xerox2552 8 หลายเดือนก่อน

    Excel master class about the htaccess file.

    • @DevDrawer
      @DevDrawer 8 หลายเดือนก่อน

      Thank you for watching. I am glad it made an impact.

  • @user-mrwhoyouknow
    @user-mrwhoyouknow 8 หลายเดือนก่อน

    great content !!

    • @DevDrawer
      @DevDrawer 8 หลายเดือนก่อน

      Thanks. Glad you enjoyed it.

  • @aogunnaike
    @aogunnaike 8 หลายเดือนก่อน

    Welcome back buddy, it's been a while

    • @DevDrawer
      @DevDrawer 8 หลายเดือนก่อน

      Yes it has. I have been working a lot. Feels good to be back.

  • @cacurazi
    @cacurazi 8 หลายเดือนก่อน

    TIL that the .htaccess file is actually your firewall! Informative. Thanks!

    • @DevDrawer
      @DevDrawer 8 หลายเดือนก่อน

      It can be. A lot of server directives can be put there and they are run prior to access to your server so it can be used that way.

  • @Tonydeleons
    @Tonydeleons 9 หลายเดือนก่อน

    I got this error : Uncaught ReferenceError: grecaptcha is not defined at HTMLFormElement.<anonymous> (init.js:26:13)

    • @DevDrawer
      @DevDrawer 9 หลายเดือนก่อน

      Did you add the element to the html code? The message is stating that the element is missing.

  • @andresraso561
    @andresraso561 9 หลายเดือนก่อน

    great video

    • @DevDrawer
      @DevDrawer 9 หลายเดือนก่อน

      Great to hear. Glad you liked it

  • @Sfimedia-web-design
    @Sfimedia-web-design 10 หลายเดือนก่อน

    Love the videos they have helped me a lot to get to know how to use api in relation to e-commerce. I didn't need the user info so missed that video. Which means I couldn't do this video as it included cart process with userid. I need a simple guest no logged in add to cart function which will be processed on the api website. Is there a none logged in add to cart function available in this video I tried finding it but couldn't?

  • @stadtminish3219
    @stadtminish3219 10 หลายเดือนก่อน

    Thanks for your script. I can use this well for my applications. But I'm a little confused. I always read that you should avoid global variables. But it seems to work so much easier. Unfortunately, when I tried to convert my Javascript code into modules, I failed miserably. It would be interesting to see a modular router.

    • @Daniel_WR_Hart
      @Daniel_WR_Hart หลายเดือนก่อน

      It's probably no big deal, as long as you don't have other global JS that could cause naming collisions

  • @johnmigcruz2323
    @johnmigcruz2323 10 หลายเดือนก่อน

    Codeigniter period.

  • @stevevoltmer2964
    @stevevoltmer2964 10 หลายเดือนก่อน

    So, do you use yarn build at this point? How do implement this on a current site?

  • @Sub0x-x40
    @Sub0x-x40 10 หลายเดือนก่อน

    those little syntax things is where copilot shines. i rememeber spending hours once looking for a , or something

    • @DevDrawer
      @DevDrawer 10 หลายเดือนก่อน

      I agree, copilot has become part of my daily work. Great addon to help you remember things.

  • @RazakZhumaev
    @RazakZhumaev 10 หลายเดือนก่อน

    where can i find design for this app , maybe you can share figma?

    • @DevDrawer
      @DevDrawer 10 หลายเดือนก่อน

      Unfortunately, this was of the cuff so no design. Just me fleshing it out as I worked.