Тёмный
No video :(

React simple CRUD application | React Hooks | Typescript 

Coding Partner
Подписаться 702
Просмотров 44 тыс.
50% 1

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

 

5 сен 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 39   
@techsavy5669
@techsavy5669 13 дней назад
A 'quality' content on our RU-vid Academy📺. Keep it up.
@codingpartner-english
@codingpartner-english 12 дней назад
Thank you ❤️
@SunnyKumar-yt2xd
@SunnyKumar-yt2xd Год назад
i just found the solution. which i needed. thanks for the video Please make complete typescript + react series
@techsavy5669
@techsavy5669 12 дней назад
Can you make a sequel of this project with advanced knowledge/techniques using Redux, etc. Thanks.
@codingpartner-english
@codingpartner-english 12 дней назад
You can watch series 1. React CRUD Application with Redux, JSON Server, router, axios - CRUD Demo ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-9QQ3ntJzpa4.html
@angular_academy
@angular_academy 2 года назад
Nice explaination
@alanfernandes3477
@alanfernandes3477 Год назад
thank you very much! you save me! liked and subscribed.
@codingpartner-english
@codingpartner-english Год назад
Glad to hear from you, Alan.
@rizkyadhahardiman4585
@rizkyadhahardiman4585 Год назад
It's worth the time to do everything, thank you sir.
@rizkyadhahardiman4585
@rizkyadhahardiman4585 Год назад
BTW, how to make view, edit, and delete button stay on the middle, thank you
@codingpartner-english
@codingpartner-english Год назад
@@rizkyadhahardiman4585 Thanks for asking. You can add styles in container div for these button. It will make these buttons in center, you can try changing justifyContent value.
@codingpartner-english
@codingpartner-english Год назад
Hey @Rizky, Thank you for this lovely comments. I am glad that you like and understand the video.
@ThePapibaquigrafo
@ThePapibaquigrafo 7 месяцев назад
What if we have a form with 20 or more values to be set, is there an easier way to set/change the state of the variables in the form?
@cristianvaldez-eo5ru
@cristianvaldez-eo5ru Год назад
Thanks for this video
@codingpartner-english
@codingpartner-english Год назад
Glad you like it
@MuhammadAdnan2.0
@MuhammadAdnan2.0 Год назад
Great for beginners 👍
@codingpartner-english
@codingpartner-english Год назад
Thanks for reply Muhammad, Glad you like it. Be connected by subscribing, I will upload videos which can make you begineer to expert. Videos on topic which I explored in live major projects.
@mostlyrob3469
@mostlyrob3469 Год назад
typescript not for beginner bro
@Sagar_1percentclub
@Sagar_1percentclub Год назад
@@mostlyrob3469 Hey bro, Typescript is easy, we dont need to learn anything new, just need to follow similar things. And its always better to do with typescript even from starting days. Dont limit with pure react, go with typescript even if you dont know.
@codelyslearning
@codelyslearning Год назад
nice tutorial sir
@codingpartner-english
@codingpartner-english Год назад
Glad you like it. Keep watching
@akashbarod376
@akashbarod376 8 месяцев назад
Hi Sagar , can you please share the source code of this full application.
@NIKETSHUKLA
@NIKETSHUKLA Год назад
Hi Sagar, This is a really good project to learn React with Typescript. I had a question for you. Can you explain how we can use an enum to navigate between pages? As I don't see any connection between the enum and addEmployee page and still it navigates to it.
@codingpartner-english
@codingpartner-english Год назад
Hi Niket, Glad you like the video. Answer to your question: 1. If you keep enum aside for now, just understand, we have one state property in Home.tsx i,e shownPage. Whatever value you save to it, like Add, Edit or List, it shows that page, because in return block in same file, we have used the condition. According to shownPage state, we are showing the component. 2. Now, shownPage state value is changed on each button click, like if user click on add employee button, its click handler method is changing the showPage state to "add", thats how its working for other buttons as well. 3. SO instead of hardcoded value like "add", "edit" and "list", I have used enum, so no spelling mistake should happen, and to it make it strongly type. I hope I explained you properly, if you still didnt understand, please reply again.
@NIKETSHUKLA
@NIKETSHUKLA Год назад
@@codingpartner-english Thank you for replying back to me. I understand that we have a state ie. shownPage which is changing onClick and so different pages are loading. The concept I am trying to understand is how come just a change of work is routing and showing a different page. As we haven't even used React Router to specify the path to the page it's just a change of word and that state isn't connected with any of the other two pages like the list page and add employee page. That's really confusing for me.
@codingpartner-english
@codingpartner-english Год назад
@@NIKETSHUKLA Ok I got you. I think you are not much familiar with basic concepts of React. Here we are saying, shownPage is State, it means, whenever is the state value changed, then that component rerender again (Home component). After rerender, it has new value, so in return statement we have conditions, according to that value, component renders. You can check useState for more details.
@NIKETSHUKLA
@NIKETSHUKLA Год назад
@@codingpartner-english Oh yes, I just literally forgot that the page will rerender and according to the condition, the page will be displayed. I was just concentrating on enums and hows this happening. Thank you for clarifying you are too good...
@codingpartner-english
@codingpartner-english Год назад
@@NIKETSHUKLA Great. Keep it up
@ashwinikumar13
@ashwinikumar13 Год назад
Hi Sagar, This is good example of CRUD operation but try to create single onChange event for every textbox😊
@codingpartner-english
@codingpartner-english Год назад
Hi Ashwini, Thank you for suggestion. In this video, my purpose was to keep it simple, that's why I didn't focus much on code reusability, application performance, as I don't want to confus the newbie. If you are looking for reusable onChange function, I will recommend you to go with custom hook i.e useInput, which will save lot of efforts of rewriting same code with good performance. You can watch here ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE--EzgrkpBIm8.html
@Gabweb95
@Gabweb95 5 месяцев назад
should have used react router
@codingpartner-english
@codingpartner-english 5 месяцев назад
Yes. Here not used as to keep it simple
@aarushisharma6681
@aarushisharma6681 4 месяца назад
Could you pls share the entire code, pls.
@codingpartner-english
@codingpartner-english 4 месяца назад
Hi, You can fill the form, so we can will send code. forms.gle/rhHddaGZrmi5QTk57
@user-ne3ds2ov9g
@user-ne3ds2ov9g 11 месяцев назад
source code please
@harmansingh7167
@harmansingh7167 11 месяцев назад
not explain why we use any component any variable declare why we use
@codingpartner-english
@codingpartner-english 11 месяцев назад
Hi Harman, Thanks for comment. This video is for person who have some idea about react and javascript. It means we already consider they have gone through variables and components, the basic things required. variable name and components name are self declarative in this video. Just read it twice you will understand what variable and component should do. If you still didn’t get any idea about specific, please drop a message, will try to help.
@OneTapKing-ku6oh
@OneTapKing-ku6oh Год назад
please use hinglish language
@codingpartner-english
@codingpartner-english 11 месяцев назад
Currently Cannt do due to time issue
Далее
ПРОСТИ МЕНЯ, АСХАБ ТАМАЕВ
32:44
Просмотров 1,6 млн
Fetching Data in React - Complete Tutorial
29:10
Просмотров 117 тыс.
Node.js and TypeScript: Build a CRUD API
20:10
Просмотров 4,7 тыс.
ПРОСТИ МЕНЯ, АСХАБ ТАМАЕВ
32:44
Просмотров 1,6 млн