- 140
- 476 018
Dev Drawer
United States
เข้าร่วมเมื่อ 25 ก.พ. 2020
Join me for insightful coding techniques to help you become a better programmer.
⭐Live Streams: streamlabs.com/devdrawer/home
⭐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 me as I create tutorials for website and computer #programming in a way that can help you get started as a new #developer or can help you brush up on old skills.
Let's learn frameworks, content management systems, programming, and website development together.Subscribe to DevDrawer for programming and website development tutorials.
#php #phptutorial #development #code #programming #webdesign #wordpresstutorial #linuxserver #vs
Channel Tags: WordPress, PHP, Python, Coding, Tutorials, Website Design, Development, Full Stack Developer, Best Practices, VB, Visual Studio
⭐Live Streams: streamlabs.com/devdrawer/home
⭐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 me as I create tutorials for website and computer #programming in a way that can help you get started as a new #developer or can help you brush up on old skills.
Let's learn frameworks, content management systems, programming, and website development together.Subscribe to DevDrawer for programming and website development tutorials.
#php #phptutorial #development #code #programming #webdesign #wordpresstutorial #linuxserver #vs
Channel Tags: WordPress, PHP, Python, Coding, Tutorials, Website Design, Development, Full Stack Developer, Best Practices, VB, Visual Studio
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
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
Vanilla JS Single Page Application Routes | # or URL - #88
มุมมอง 43K2 ปีที่แล้ว
Vanilla JS Single Page Application Routes | # or URL - #88
Bro is back after a loooong time.🎉🎉🎉 Wish you a very happy, sweet and healthy new year. ❤❤❤❤❤
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.
Can this be done without a computer
Great tutorial thanks.
Glad I could help
Waiting for next video. Drop it ASAP ❤🎉
Sorry for the delay. Thanksgiving travel derailed anything last week. Trying to get it finished asap.
@@DevDrawer Drop it before new year 😢😢😢
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 ❤❤❤
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.
@DevDrawer Thankyou. I'm waiting ❤️🔥👀💯
Excellent. Helped me fixed a "cors" issue I was struggling with endlessly👍
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.
That is awesome to hear. Glad I could help.
Thank you, it helped me a lot. Cheers from Brazil
That is great to hear. I hope you get help from my other videos too. Good to know I got viewers in other countries.
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.
What php server are you using?
Ubuntu with Apache
hey do you have discord server?
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
@@DevDrawer thanks man.
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.
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
How would you handle dynamic styling and global styling ?
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.
What do you need help with specifically? Maybe I can point you in the right direction.
@@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.
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.
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.
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.
Great stuff! Thanks mate 👍
Glad you liked it
we use yii3, it seems a mistake😂
Finally I fond the dinamically pdf generator, Thanks Sir
That is great. It comes in handy very often.
❤
Thanks
Its looks nice, but what will happend on SEO with this technique? Can we make SSR with Vanilla JS also?
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.
thanks brother
No problem
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
dude, this is the best video that i saw about simple js SPA.
That is awesome to hear. Thank you.
Thank you sir I have been looking for that❤
Awesome. Glad I could help. Thanks for watching.
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
Great tutorial. Help me a lot with a project.
Hey thanks. Glad to hear it.
algorithum hack
I'm sorry but I don't understand what you mean.
Thanks for the video!
Thanks for watching
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?
What is that symbol at 14:34?
It is two pipes || (commonly used for OR). Sorry apparently my mouse hovered over it while I was talking.
Great work. Keep it up...
Thanks.
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)
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.
vanilla js is painful to watch, is it better with typescript and frameworks or it's same mess there too?
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.
Thank you very much man, very clear and to the point
Thanks. Glad you liked the video.
damn, this video is fully packed with info
That is awesome to hear. Glad I could help.
what extension are you using to run the .htaccess file? cant seem to get them to run on my vscode
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
@@DevDrawer thank you for the help!
No problem. Glad I could help
Excel master class about the htaccess file.
Thank you for watching. I am glad it made an impact.
great content !!
Thanks. Glad you enjoyed it.
Welcome back buddy, it's been a while
Yes it has. I have been working a lot. Feels good to be back.
TIL that the .htaccess file is actually your firewall! Informative. Thanks!
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.
I got this error : Uncaught ReferenceError: grecaptcha is not defined at HTMLFormElement.<anonymous> (init.js:26:13)
Did you add the element to the html code? The message is stating that the element is missing.
great video
Great to hear. Glad you liked it
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?
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.
It's probably no big deal, as long as you don't have other global JS that could cause naming collisions
Codeigniter period.
So, do you use yarn build at this point? How do implement this on a current site?
those little syntax things is where copilot shines. i rememeber spending hours once looking for a , or something
I agree, copilot has become part of my daily work. Great addon to help you remember things.
where can i find design for this app , maybe you can share figma?
Unfortunately, this was of the cuff so no design. Just me fleshing it out as I worked.