Тёмный

Build Full Stack Web Apps in Pure Python with Reflex - No Javascript Required 

CodingEntrepreneurs
Подписаться 348 тыс.
Просмотров 46 тыс.
50% 1

Web apps built in pure Python? No JavaScript? Yup, that's what Reflex does.
💻 Code 👉 github.com/codingforentrepren...
⭐️ Reflex Docs 👉 reflex.dev/docs
▶️ Subscribe 👉 cfe.sh/youtube
⚙️ Guide to Install Python 3 on Mac/Linux: cfe.sh/guides/install-python-...
⚙️ Guide to Install Python 3 on Windows: cfe.sh/guides/install-python-...
Chapters
0:00:00 Welcome
0:02:53 Demo
0:12:34 Getting Started with Full Stack Python
0:20:05 Dynamic Content and on_click Events
0:25:17 HTML Inputs for Dynamic Content Changes
0:31:08 Building a Custom Reflex Component
0:39:25 Using the Navbar Recipe
0:43:47 Better Code Management
0:46:37 Identifying Rendered Components in the Browser
0:53:16 Full Width Navbar and Content
1:04:13 Pages and URL Routes
1:08:03 Using Link-based Navigation
1:13:43 Click Events and Reflex Redirect
1:17:21 URL Route Path Constants
1:21:43 Navigation State
1:28:07 Contact Form
1:33:53 Making the Form Responsive
1:40:40 Conditional Rendering in Reflex
1:47:43 Refresh State with Python Asyncio Timeouts
1:49:32 Counting with Asyncio and Reflex
1:53:55 Your First Database Model
2:02:51 Storing Data with Models and Forms
2:09:44 Model Field Changes and Migrations
2:12:15 Adding a DateTime Field
2:17:05 Decouple the Contact Page, State & Model
2:26:49 Listing Stored Database Entries
2:36:49 New Data Model
2:43:24 State for Listing Blog Post Data
2:46:29 List View Route for Blog Posts
2:53:37 Dynamic URL Routing for Detail Pages
3:01:27 Form, State, and Page for New Blog Posts
3:11:41 Editing Pre-Filled Form Input Basics
3:18:47 Edit and Save Database Data
3:31:15 Edit Link & Detail Page Updates
3:35:30 Blog Post Redirect and Urls
3:42:26 Publish Date Toggle
3:51:36 Publish Date Field
4:01:45 Narrow Results with Database Queries
4:07:03 Users with Reflex Local Auth
4:12:30 Customize Login and Register Pages
4:18:22 Extending the Reflex Local Auth User Model
4:22:07 Customize User Registration for Related Model
4:27:15 User SessionState Object
4:34:13 Fixing Registration Bug with Extended Model Data
4:37:20 Creating the Dashboard & Sidebar Layouts
4:47:22 Sidebar Toggle Button and Color Mode Condition
4:54:05 User Dashboard & Logout User
5:05:40 Display Logged-in User Info
5:16:26 Multiple Ways to Associate Users to Data Models
5:28:32 Rendering Related Data
5:38:36 Foreign Key Relationships & The Models Module
5:49:57 Saving UserInfo ID to Related Models
5:58:22 Loading Related data with sqlalchemy `joinloaded`
6:05:24 Managing My Blog Posts
6:13:20 Require Login Decorator
6:14:50 Public Articles Display
6:28:41 Limited Data Results on Dashboard and Landing Page
6:45:22 Theme and Color
6:55:26 Thank you and next steps

Опубликовано:

 

1 авг 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 112   
@CodingEntrepreneurs
@CodingEntrepreneurs Месяц назад
Thanks for watching! The code is here: github.com/codingforentrepreneurs/full-stack-python The chapters are: 0:00:00 Welcome 0:02:53 Demo 0:12:34 Getting Started with Full Stack Python 0:20:05 Dynamic Content and on_click Events 0:25:17 HTML Inputs for Dynamic Content Changes 0:31:08 Building a Custom Reflex Component 0:39:25 Using the Navbar Recipe 0:43:47 Better Code Management 0:46:37 Identifying Rendered Components in the Browser 0:53:16 Full Width Navbar and Content 1:04:13 Pages and URL Routes 1:08:03 Using Link-based Navigation 1:13:43 Click Events and Reflex Redirect 1:17:21 URL Route Path Constants 1:21:43 Navigation State 1:28:07 Contact Form 1:33:53 Making the Form Responsive 1:40:40 Conditional Rendering in Reflex 1:47:43 Refresh State with Python Asyncio Timeouts 1:49:32 Counting with Asyncio and Reflex 1:53:55 Your First Database Model 2:02:51 Storing Data with Models and Forms 2:09:44 Model Field Changes and Migrations 2:12:15 Adding a DateTime Field 2:17:05 Decouple the Contact Page, State & Model 2:26:49 Listing Stored Database Entries 2:36:49 New Data Model 2:43:24 State for Listing Blog Post Data 2:46:29 List View Route for Blog Posts 2:53:37 Dynamic URL Routing for Detail Pages 3:01:27 Form, State, and Page for New Blog Posts 3:11:41 Editing Pre-Filled Form Input Basics 3:18:47 Edit and Save Database Data 3:31:15 Edit Link & Detail Page Updates 3:35:30 Blog Post Redirect and Urls 3:42:26 Publish Date Toggle 3:51:36 Publish Date Field 4:01:45 Narrow Results with Database Queries 4:07:03 Users with Reflex Local Auth 4:12:30 Customize Login and Register Pages 4:18:22 Extending the Reflex Local Auth User Model 4:22:07 Customize User Registration for Related Model 4:27:15 User SessionState Object 4:34:13 Fixing Registration Bug with Extended Model Data 4:37:20 Creating the Dashboard & Sidebar Layouts 4:47:22 Sidebar Toggle Button and Color Mode Condition 4:54:05 User Dashboard & Logout User 5:05:40 Display Logged-in User Info 5:16:26 Multiple Ways to Associate Users to Data Models 5:28:32 Rendering Related Data 5:38:36 Foreign Key Relationships & The Models Module 5:49:57 Saving UserInfo ID to Related Models 5:58:22 Loading Related data with sqlalchemy `joinloaded` 6:05:24 Managing My Blog Posts 6:13:20 Require Login Decorator 6:14:50 Public Articles Display 6:28:41 Limited Data Results on Dashboard and Landing Page 6:45:22 Theme and Color 6:55:26 Thank you and next steps
@danieldesenna7611
@danieldesenna7611 8 дней назад
I think something went missing between chapters: 2:46:29 List View Route for Blog Posts and 2:53:37 Dynamic URL Routing for Detail Pages. The files blog/add.py and blog/forms.py just appear without you showing their development.
@danieldesenna7611
@danieldesenna7611 8 дней назад
It seems the correct order of the chapters would be: [...] 2:46:29 List View Route for Blog Posts 3:01:27 Form, State, and Page for New Blog Posts 2:53:37 Dynamic URL Routing for Detail Pages 3:11:41 Editing Pre-Filled Form Input Basics [...] @CodingEntrepreneurs can you check this and maybe add an observation to the video description? It was really confusing watching these chapters as they were, it seems, not in the correct order. Thanks!
@chyngyzmonokbaev7548
@chyngyzmonokbaev7548 Месяц назад
My career started with your videos like 7 years ago. Thank you for the best python tutorials.
@CodingEntrepreneurs
@CodingEntrepreneurs Месяц назад
Amazing! Thank you for sharing
@conan7647
@conan7647 Месяц назад
I was waiting for someone to make a tutorial on reflex Thanks🎉
@judevector
@judevector Месяц назад
I am still in your Django video and I came in today to see this , I shouted 😮 WTF . Thank you so much for doing this
@CodingEntrepreneurs
@CodingEntrepreneurs Месяц назад
Yeah!! Nice
@CodingEntrepreneurs
@CodingEntrepreneurs Месяц назад
I’ve got a lot of good stuff in the pipeline
@shubham3937
@shubham3937 Месяц назад
​@@CodingEntrepreneursroll it down already xD. Btw you got a new subscriber 🔥
@senlee325
@senlee325 Месяц назад
This will be my next project to try out. Thank you!
@CodingEntrepreneurs
@CodingEntrepreneurs Месяц назад
Amazing!
@hazed69
@hazed69 Месяц назад
Great stuff man, love you ❤
@wrt3778
@wrt3778 14 дней назад
Duuude! Love the energy and the content. Great job.
@CodingEntrepreneurs
@CodingEntrepreneurs 14 дней назад
Thank you!!
@sadiulhakim7814
@sadiulhakim7814 25 дней назад
You are doing some good stuff for python community. Thanks
@jaymartinez311
@jaymartinez311 Месяц назад
Talk about a full video 😂. Better than a 10 minute video voicing your opinion. Great job 💪🏾 and much appreciated. Very swiftui like 👍🏾 ok ok reflex is cooking as i’m looking through the docs. Using runtime types and everything. Ok ✅. From the docs: In Reflex only the frontend compiles to Javascript and runs on the user's browser, while all the state and logic stays in Python and is run on the server. I like that the backend stays in python.
@CodingEntrepreneurs
@CodingEntrepreneurs Месяц назад
Reflex is cooking ✅
@bacharsaleh6984
@bacharsaleh6984 Месяц назад
Python is incredibly powerful. It would be fantastic to see a project where Next.js and Python work together in an advanced architecture.
@smotbutterman1127
@smotbutterman1127 Месяц назад
This framework already does that. Unless you want to have a nextjs frontend and a python backend.
@CodingEntrepreneurs
@CodingEntrepreneurs Месяц назад
A tutorial on Django + Next.js is in the works.
@spotnuru83
@spotnuru83 26 дней назад
Just amazing, finished it now, I see that this helps a lot for those who doesnt want to worry much about front end dev in java script and yet get the react js based output. Hoping to see more examples on authorization , building good looking apps, how does reflex maintain along with the ReactJS Updates
@thinkingcitizen
@thinkingcitizen Месяц назад
saving this to my watch list !
@CodingEntrepreneurs
@CodingEntrepreneurs Месяц назад
🎉
@txfalkon2882
@txfalkon2882 Месяц назад
awesome man
@andrewlu8432
@andrewlu8432 Месяц назад
Very nice!
@johnmahugu
@johnmahugu Месяц назад
Brilliant!!!
@kumargupta7149
@kumargupta7149 Месяц назад
Thank you ❤❤❤❤❤❤❤❤
@krittaprottangkittikun4190
@krittaprottangkittikun4190 25 дней назад
Hello, I am such a fan, thank you for doing this! Btw, any chance you will publish a video on how to deployed the application made with Reflex?
@nadetdevfullstack7041
@nadetdevfullstack7041 Месяц назад
Excellent
@chrihan
@chrihan Месяц назад
Excellent stuff. Great job. It can lower the barrier not only for the beginners but for MVPs as well. How much muture the framework is right now is the question to find out....
@CodingEntrepreneurs
@CodingEntrepreneurs Месяц назад
Definitely. There has been significant work on the framework and it continues to improve. Give it a try
@chrihan
@chrihan Месяц назад
@@CodingEntrepreneurs indeed
@conan7647
@conan7647 Месяц назад
How are you so good in this!!!!
@AntonioOliveiraFM
@AntonioOliveiraFM 25 дней назад
thank you
@Stephan106
@Stephan106 Месяц назад
This might just solve a lot of my JavaScript problems
@CodingEntrepreneurs
@CodingEntrepreneurs Месяц назад
Reflex is very impressive. Let me know what you think
@Asmrprogrammingfull
@Asmrprogrammingfull Месяц назад
Thank 🎉🎉
@CodingEntrepreneurs
@CodingEntrepreneurs Месяц назад
Welcome 🎉🎉
@wafiqhosain5713
@wafiqhosain5713 Месяц назад
"No JavaScript is required" :- it hurts.
@CodingEntrepreneurs
@CodingEntrepreneurs Месяц назад
Unless you don’t know JavaScript…
@paolo-e-basta
@paolo-e-basta Месяц назад
it's not required but you can wrap your react components if you want
@Anonymous-dy2te
@Anonymous-dy2te Месяц назад
no javascript 😍
@anthonyoforiakotey8000
@anthonyoforiakotey8000 Месяц назад
@CodingEntrepreneurs Good work done 👍👍... But you speaking very fast.... We the beginner....😊😊😊 But you have done a great job...
@CodingEntrepreneurs
@CodingEntrepreneurs Месяц назад
Thank you!
@_vk03
@_vk03 Месяц назад
Just one really really i.portant question. What about benchmarks? Can I use it to replace react or next js? I mean in terms of speed is this similar to next js or react for frontend interactions?
@TalhaKhan-ne1dk
@TalhaKhan-ne1dk 26 дней назад
Amazing tutorial. That's what I was looking for. Thanks 😊 By the way, Is there any way to deploy the app using ngnix on an Ubuntu server?
@maxpower6730
@maxpower6730 Месяц назад
Hello, this is the first video i watch from your channel and i just started an ibm course about software developer, but i have a lot of experience in python should i keep with this video or do both? Thank you
@CodingEntrepreneurs
@CodingEntrepreneurs Месяц назад
If you have a lot of experience with Python, this should be right up your alley. If you’re new to Python, you should probably know how to do classes and functions and variables at minimum
@maxpower6730
@maxpower6730 Месяц назад
@@CodingEntrepreneurs i have experience in data science but i want to also learn development, i will learn reflex, thank you so much :)
@vakhtang_vakhtangishvili
@vakhtang_vakhtangishvili Месяц назад
How does Reflex compare to frameworks like django? Not in a sense that you can make the frontend in python as well but more like how django is reliable and scalable and often a go to option for various sized platforms. What are the tradeoffs?
@CodingEntrepreneurs
@CodingEntrepreneurs Месяц назад
These are good questions. I think Django is much further along in development (given its age and community support) so it’s not exactly an apples-to-apples comparison. Reflex does the UI unlike anything I’ve seen including a lot of JavaScript libraries. How Reflex handles state that affects the front end and backend is pretty great. Django’s built-in auth, admin, models, form validation, all the third party packages, hosting provider support, give it the edge from my view. The thing is, you can actually use both since Reflex can call any API.
@CodingEntrepreneurs
@CodingEntrepreneurs Месяц назад
The Reflex team is actively learning from other frameworks and seeing how it can fit in with theirs. The other part that’s interesting is you can turn react components into Python with reflex. That’s pretty great if you ask me.
@RONALDOCR-fs2dv
@RONALDOCR-fs2dv Месяц назад
bro can you make a video on sockets and how to use it backend for building a live application or games
@shivamkumar-qp1jm
@shivamkumar-qp1jm Месяц назад
Is it SEO friendly
@sytekd00d
@sytekd00d Месяц назад
What are your thoughts on Reflex vs HTMX/Alpine.js?
@BinZhang-y2y
@BinZhang-y2y Месяц назад
Good tutorial of reflex. thanks. Just one suggest, could you create different branch for each chapter that developer easy understand how a project is completed?
@CodingEntrepreneurs
@CodingEntrepreneurs Месяц назад
Thanks! Should be a different commit for each chapter
@CodingEntrepreneurs
@CodingEntrepreneurs Месяц назад
git log git checkout
@degs182
@degs182 29 дней назад
Before i watch and learn this, is this for beginners? Is ot explained enough where i can follow? Ive basic python but now want to get into web dev Thanks in advance
@python-c2x
@python-c2x 4 дня назад
is not
@yayusuwardi8934
@yayusuwardi8934 Месяц назад
Great tutorial, I have question, how to connect to multiple database in reflex?
@CodingEntrepreneurs
@CodingEntrepreneurs Месяц назад
Like SQL databases? For what purpose?
@yayusuwardi8934
@yayusuwardi8934 Месяц назад
@@CodingEntrepreneurs yes SQL databases, for example Employee information [store: employee info such as department, addressess, handling project info, etc] stored on database 'A' and Production information [store: spare part item, supplier, retailer info etc] stored on database 'B'. while databases A and B are on different servers
@ytsinaunen
@ytsinaunen Месяц назад
Is that better than Django and PyScript? The data rendering looks so fast, is that for real, bro?
@alisinasultani
@alisinasultani Месяц назад
"Your project is truly inspiring! The creativity and effort you've put into it are commendable. Thank you for sharing such valuable content with us." Sir which Font are you using in your terminal and vscode?
@CodingEntrepreneurs
@CodingEntrepreneurs Месяц назад
Thank you! I’m not sure what font actually. I’ll try to remember to look soon.
@armant11
@armant11 Месяц назад
So the browser can read and run straight python code? We dont need JavaScript anymore?
@xsova113
@xsova113 Месяц назад
I’m guessing the library transpire / bundle up those python code into html/css/javascript.
@zeroinfinity3610
@zeroinfinity3610 Месяц назад
please please please, we need more reflex project realted to AI, & LLMS. using open source llm s from hugging face & with deployemnt. How to integrate vector database also..
@SolidBuildersInc
@SolidBuildersInc Месяц назад
Oh Yes, Thanks for sharing... Streamlit Mesop Anvil But this might be a Game Changer. How is it Deployed? 😊
@CodingEntrepreneurs
@CodingEntrepreneurs Месяц назад
Good question! Reflex has a built-in option but perhaps I need to make another video covering deployment.
@danieldesenna7611
@danieldesenna7611 23 дня назад
@@CodingEntrepreneurs yes, please!! 😁
@AngeloValentimMerlo
@AngeloValentimMerlo Месяц назад
Oh my God!!! Finally I got rid of javascript, thanks!
@CodingEntrepreneurs
@CodingEntrepreneurs Месяц назад
😂
@abhisheksanjaygawade1479
@abhisheksanjaygawade1479 Месяц назад
1st Comment !
@CodingEntrepreneurs
@CodingEntrepreneurs Месяц назад
Did you beat me?! Nice one
@imranahmed5524
@imranahmed5524 Месяц назад
Built with REFLEX . its still there . is there any way to remove this watermark ?
@CodingEntrepreneurs
@CodingEntrepreneurs Месяц назад
At the bottom? Yes, rx.logo() just remove that
@EricDeng-q2f
@EricDeng-q2f 2 дня назад
I want to connect to MySQL, but I don't know how to write the db_url
@CodingEntrepreneurs
@CodingEntrepreneurs 2 дня назад
Look up MySQL connection string, I think that’s how
@lightofor8206
@lightofor8206 Месяц назад
Thanks, I just want to focus on my python, css drives me nuts
@monde7563
@monde7563 Месяц назад
If only Reflex was for Desktop applications
@kayodeadechinan5928
@kayodeadechinan5928 Месяц назад
You can wrap your reflex app into something like "electron" by giving it the "url", and then generate a desktop build.
@vibhukarnwal4926
@vibhukarnwal4926 Месяц назад
Now next video on next hs full stack olease
@CodingEntrepreneurs
@CodingEntrepreneurs Месяц назад
You want Next.js full stack?
@vibhukarnwal4926
@vibhukarnwal4926 Месяц назад
@@CodingEntrepreneurs yes sir
@derrickk45
@derrickk45 Месяц назад
How can u host
@CodingEntrepreneurs
@CodingEntrepreneurs Месяц назад
That is something we need to cover for Reflex! Anyone else agree?
@RealLexable
@RealLexable Месяц назад
​@@CodingEntrepreneurs Fully agree
@gohjennyang
@gohjennyang Месяц назад
Yes please!
@danieldesenna7611
@danieldesenna7611 23 дня назад
@@CodingEntrepreneurs yes, please!!
@python-c2x
@python-c2x 4 дня назад
love it but you were going fast
@giftcp82
@giftcp82 Месяц назад
will reflex replace Django. It seems it is covering most of the things that Django can do
@paolo-e-basta
@paolo-e-basta Месяц назад
except Reflex is a new product compared to Django which is battle-tested. The sad reality is that I had hoped Django would move towards frontend integration over all these years, without us having to move to a new framework like Reflex (which, by the way, looks very cool). But Django has always refused to make any progress on this side and has remained focused solely on the backend. I'm not happy at all with that.
@matiasbg8747
@matiasbg8747 Месяц назад
THIS IS PYTHON (SPARTA)!!!!!!
@giftcp82
@giftcp82 Месяц назад
Now am confused, Reflex, Django, or Pynecone
@CodingEntrepreneurs
@CodingEntrepreneurs Месяц назад
Pynecone is now Reflex. Reflex is a new framework with a heavy emphasis on ease of UI. Django is a mature framework that doesn’t have opinions about UI. In fact you could integrate Reflex with Django if Django was just the Rest API. I really like Reflex and where it’s headed but I still love Django.
@giftcp82
@giftcp82 Месяц назад
When you are able please share a video on reflex django integration
@sandangmakmur4475
@sandangmakmur4475 Месяц назад
Can you make python flet
@TheBlackManMythLegend
@TheBlackManMythLegend Месяц назад
nah stay with dart the tooling everything is already done and backed by Google. nah. don't waste your time on python flet my friend.
@abdulrahmangbenga7347
@abdulrahmangbenga7347 Месяц назад
​@@TheBlackManMythLegendWhy
@Eternam
@Eternam Месяц назад
this is like flet porting flutter for python.
@-CSE-ArnabSannigrahi
@-CSE-ArnabSannigrahi 19 дней назад
The loading time of reflex is too bad
@nikhilsathe5956
@nikhilsathe5956 Месяц назад
It's good but it's alot slow...
@koreanpubg1708
@koreanpubg1708 11 дней назад
lol.. python on webapps is just forceful.! i am fullstack web developer and have been using node, next/react, for 2 years and recently changed company where they use django for backend.. and it is just sooo not required.. express is so enough for any kind of webapps.. just apps where data is huge pandas and other libraries from python is useful, other than that server functionality wise node is enough for anything..
@marcelo.victor
@marcelo.victor Месяц назад
Well, every programming language will die one day, but no Javascript! 😂
@ChukwuemekaAmblessedchinenye
@ChukwuemekaAmblessedchinenye Месяц назад
hello sir you jump into the code without explaining the basic concept. no nice explanation for beginner it huge me. you known what redo the video and explain for beginners .
@paolo-e-basta
@paolo-e-basta Месяц назад
afaik, Justin already did other videos for basic concepts. Maybe have a look at those first? I wonder what kind of "nice explanation for beginners" you would need. It seems to me this video about Reflex is very beginner-friendly.
@engineer0111
@engineer0111 Месяц назад
Get a job as a Delivery driver.
Далее
Best exercises to lose weight ! 😱
00:19
Просмотров 12 млн
Ютуб был хороший...
00:52
Просмотров 246 тыс.
5 Good Python Habits
17:35
Просмотров 462 тыс.
Build AI Agents with Docker, Here’s How
51:59
Просмотров 54 тыс.
Every React Concept Explained in 12 Minutes
11:53
Просмотров 513 тыс.
My Unconventional Coding Story | Self-Taught
27:14
Просмотров 587 тыс.
Writing My Own Database From Scratch
42:00
Просмотров 193 тыс.
5 Design Patterns That Are ACTUALLY Used By Developers
9:27
Why aren't you using Fastify? Or Koa? Or NestJS?
9:58
Best exercises to lose weight ! 😱
00:19
Просмотров 12 млн