PART 18 - To-Do App - ['Symfony 5', 'React', Material UI'] - AppBar & Drawer
HTML-код
- Опубликовано: 12 сен 2024
- VIDEO BRANCH: drawer
GITHUB: github.com/San...
In this video series I'll be going over how to make a basic to-do app using React, Symfony and Material UI.
In this episode I will show you how to implement the AppBar and Drawer components. We will give it a link to the home page, login button and hamburger menu using a drawer. I will also show how to account for the AppBar taking up space above your already existing content.
If you want to follow along with this series from start to finish I recommend using the playlist for this series: • To-Do App - ['Symfony ...
Information▼
Box Component: material-ui.co...
Box Style Functions: material-ui.co...
AppBar: material-ui.co...
Drawer: material-ui.co...
Toolbar: material-ui.co...
Lists: material-ui.co...
Icons: material-ui.co...
Styling 1 will show you how to PROPERLY implement withStyles(styles)(HOC). It is done differently from what I showed with createStyles().
Pastebins▼
DefaultThemeProvider.js: pastebin.com/8...
IMPORTANT!
It is not mentioned in the video but for the updated AppSnackbar.js you will need 4 new packages.
Run: yarn add clsx react-is @material-ui/lab @material-ui/utils
AppSnackbar.js: pastebin.com/n...
package.json: pastebin.com/Q...
TodoTable.js: pastebin.com/3...
app.js: pastebin.com/N...
Plugins▼
plugins.jetbra...
Video Links▼
composer: getcomposer.or...
Symfony: symfony.com/do...
PHP: www.php.net/do...
GIT:git-scm.com/do...
SQL Workbench: dev.mysql.com/...
JETBRAINS Student Program: www.jetbrains....
Yarn: yarnpkg.com/en...
Instagram: / sandercokart
@SanderCokart
Twitter: / sandercokart
@SanderCokart
Join the Discord Community?
/ discord
AND tell me me what you think of the video PERSONALLY!
(If you want)
FAQ▼
1drv.ms/b/s!Al...
#Symfony #React #Tutorial
![19 To-Do App - ['Symfony 5.1', 'React', Material UI'] - React Router + Symfony Route & Symfony 5.1](http://i.ytimg.com/vi/RYMP4iqKM8k/mqdefault.jpg)
![19 To-Do App - ['Symfony 5.1', 'React', Material UI'] - React Router + Symfony Route & Symfony 5.1](/img/tr.png)
![PART 17 - To-Do App - ['Symfony 5', 'React', Material UI'] - Theming + Styling](http://i.ytimg.com/vi/aPsCgcx0BIw/mqdefault.jpg)
![PART 16 - To-Do App - ['Symfony 5', 'React', Material UI'] - Custom Symfony Forms](http://i.ytimg.com/vi/qIwnGkpsXQA/mqdefault.jpg)
![PART 12 - To-Do App - ['Symfony 5', 'React', Material UI'] - Material UI Snackbar](/img/1.gif)
nicely done
Thank you!
The hardest part of programming is getting stuck, debugging is basically the core. It's interesting to watch you debug while writing codes. This video was very useful thanks
This whole series is absolutely amazing! I would love to see some way to test that whole thing with unit/end to end tests.
Still gotta figure out good tests myself.
Completely coded along :D
also an acl based rolemanagement (give individual users or roles individual rights like write, delete, update, publish on tuesdays and so on) for specific todos
I have no idea how to deal with users yet. While symfony has a login form....making it in react is a pain in the ass. I have no idea what data is wants in what format. There is no documentation.
Long videos!
Well...do you want the full explainations or half assed explainations?
@@SanderCokart full explanations, its better, if someone want half-assed explanations always can skip :D
Thank for your videos ! How can we put an on the ? tried to put a divider on the table const but it doesn't work.
Between listitems
material-ui.com/components/dividers/