Kchai Programming
Kchai Programming
  • Видео 9
  • Просмотров 33 454
How to use React Router? Router Hooks - Part 4
How to use react router and router hooks? In this video, we will complete building Rick and Morty application using React Router hooks.
Chapters:
00:00 Building Location Page
02:50 Building Location Component
05:30 Building Location details Page - 1
06:20 useHistory hook
06:50 useRouteMatch hook
07:00 Building Location details Page - 2
11:00 Fetching residents details
14:20 Connecting characters and locations
15:40 Connecting locations and characters
16:40: Wubba lubba dub dub
React Powerhouse
React powerhouse is a series that shows you how you can create powerful web applications using React. This series is for moderate to advanced React users.
🎞 React Router Playlist - ruclips.net/p/PLXMmuWDkkRq9sdxT...
Просмотров: 508

Видео

How to use React Router? Router Hooks - Part 3
Просмотров 1,1 тыс.4 года назад
How to use react router and router hooks? In this video, we will start building Rick and Morty application using React Router hooks. Chapters: 00:00 Refactoring Components and Pages 03:11 Building Characters Page 05:40 Building Characters Component 08:20 useHistory hook 09:50 useRouteMatch hook 10:55 Building Character Details Page 12:30 useParams hook 13:00 Building Character Details Page Reac...
How to use react router? Primary Components - Part 2
Просмотров 5394 года назад
How to use react router? In this video, we will discuss primary components in react router library. React Powerhouse React powerhouse is a series that shows you how you can create powerful web applications using React. This series is for moderate to advanced React users. Chapters: 00:00 Introduction 00:20 Creating Components 01:28 Primary Component - Route 02:25 Primary Component - Route Matche...
How to create routes using hooks? - React Router - Part 1
Просмотров 7594 года назад
How to create routes using hooks? In this video, we will discuss how routing works in single page applications. We will be going through an overview of the project that we will be building through this course. React Powerhouse React powerhouse is a series that shows you how you can create powerful web applications using React. This series is for moderate to advanced React users. Chapters: 0:00 ...
How to create Reusable React Forms? JSON Hooks forms - Part 5
Просмотров 22 тыс.4 года назад
How to create Reusable React Forms? In this video, we will use React hook form to create Form component that renders form using JSON. This short series explains everything you need to know to manage forms in React for any use-case. React Powerhouse React powerhouse is a series that shows you how you can create powerful web applications using React. This series is for moderate to advanced React ...
Best library to create forms in React? - Formik, React-hook-form - React Forms - Part 4
Просмотров 4 тыс.4 года назад
What is the best library to create forms in React? In this video, we will explore Formik and React-hook-form. This short series explains everything you need to know to create forms in React for any use-case. React Powerhouse React powerhouse is a series that shows you how you can create powerful web applications using React. This series is for moderate to advanced React users. 📄 Check out the c...
How to create dynamic forms with controlled components - React Forms - Part 3
Просмотров 1,1 тыс.4 года назад
How to create dynamic forms in React? In this video, we will explore how you can create dynamic forms using controlled components. This short series explains everything you need to know to create forms in React for any use-case. React Powerhouse React powerhouse is a series that shows you how you can create powerful web applications using React. This series is for moderate to advanced React use...
How to create dynamic forms with uncontrolled components - React Forms - Part 2
Просмотров 1,4 тыс.4 года назад
How to create dynamic forms in React? This short series explains everything you need to know to create forms in React for any use-case. In this video, we will explore how you can create dynamic forms using uncontrolled components. React Powerhouse React powerhouse is a series that shows you how you can create powerful web applications using React. This series is for moderate to advanced React u...
How to create forms in React - Part 1
Просмотров 2,3 тыс.4 года назад
How to create forms in React? This short series explains everything you need to know to create forms in React for any use-case. In this video, we will explore Uncontrolled and Controlled components. React Powerhouse React powerhouse is a series that shows you how you can create powerful web applications using React. This series is for moderate to advanced React users. 📄 Check out the complete p...

Комментарии

  • @syedsohailahmed6810
    @syedsohailahmed6810 11 месяцев назад

    very informative

  • @priyatam17
    @priyatam17 Год назад

    Thanx

  • @HarshPatel-dv3hm
    @HarshPatel-dv3hm Год назад

    wonderful ❤

  • @43445fgfgd
    @43445fgfgd Год назад

    awesome lessons, thanks a lot)))

  • @siyaramrauniyar6929
    @siyaramrauniyar6929 2 года назад

    Not usable with react hook form 7.

  • @nick4bizz42
    @nick4bizz42 2 года назад

    react hook form update: From: <input type='text' name='name' id="my_text" ref={register} /> To: <input type='text' id="my_text" {...register("name")} />

  • @ayda6646
    @ayda6646 2 года назад

    Thank you this was so helpful 💜

  • @ronblasser17
    @ronblasser17 2 года назад

    You are awesome! Explain stuff in a straight forward manner. There are a LOT of people like me that are very grateful for the hard work you put into teaching and sharing your knowledge. Hit important details without diving into the minutia of how "everything works under the abstraction". Thank you and please keep it going. It won't happen quickly, but this will come back to you 100 fold in success and happiness.

  • @alanfljesus
    @alanfljesus 2 года назад

    How can I do this for a password confirmation when both have the case 'password'?

  • @pankajmenaria3230
    @pankajmenaria3230 2 года назад

    Thank you for sharing

  • @adriablake
    @adriablake 2 года назад

    doesn't work

  • @viniciusm.m.7822
    @viniciusm.m.7822 2 года назад

    Thanks!

  • @viniciusm.m.7822
    @viniciusm.m.7822 2 года назад

    Excellent video, dude! Congrats!

    • @viniciusm.m.7822
      @viniciusm.m.7822 2 года назад

      The editing and your explanation are great, keep it up! Abraço do Brasil! God bless you!

  • @dineshkarnhakim
    @dineshkarnhakim 2 года назад

    Great video. How can I use multiselect and select component with backend api to call?

    • @kchaiprogramming6179
      @kchaiprogramming6179 2 года назад

      For select and multiselect, you can have two additional fields, options and selectedOptions.. options would be an array, you can loop through them and render options, selectedOptions would be an array of strings or a string based on multiselect or select

  • @jrmsrs
    @jrmsrs 2 года назад

    In a Django Rest Framework API when you use OPTIONS method you'll get a response like: { "name": "Table", "description": "", "renders": [ "application/json", "text/html" ], "parses": [ "application/json", "application/x-www-form-urlencoded", "multipart/form-data" ], "actions": { "POST": { "id": { "type": "integer", "required": false, "read_only": true, "label": "ID" }, "name": { "type": "string", "required": true, "read_only": false, "label": "Name", "max_length": 50 }, } } } } Would I be able to do something similar to get the fields of objects in "actions. POST" in this more dynamic way? Since it's not an array I think i can't do table.map() for example

    • @kchaiprogramming6179
      @kchaiprogramming6179 2 года назад

      The keys of object POST seems off, but still, you can use Object.keys to loop through keys and access elements using actons.POST[key] or you can just loop thourgh values using Object.values

  • @louis-0412
    @louis-0412 2 года назад

    Version 6.X.X: <input ref={register({ required: true })} name="test" /> Version 7.0.X: <input {...register('test', { required: true })} />

  • @Pareshbpatel
    @Pareshbpatel 2 года назад

    {2022-03-11}

  • @Pareshbpatel
    @Pareshbpatel 2 года назад

    A very informative tutorial on creating re-usable React Forms using React-Hook-Form Library. Thanks very much. {2022-03-11}

  • @Pareshbpatel
    @Pareshbpatel 2 года назад

    {2022-03-11}

  • @Pareshbpatel
    @Pareshbpatel 2 года назад

    {2022-03-11}

  • @Pareshbpatel
    @Pareshbpatel 2 года назад

    {2022-03-11}

  • @Pareshbpatel
    @Pareshbpatel 2 года назад

    {2022-03-11}

  • @Pareshbpatel
    @Pareshbpatel 2 года назад

    Great Tutorial introducing Forms in React. Thanks {2022-03-10}

  • @ievabroberg5312
    @ievabroberg5312 2 года назад

    I think there had been some changes for ref since the video and now validationProps don't work, having problems rendering errors, anybody has a solution?

    • @kchaiprogramming6179
      @kchaiprogramming6179 2 года назад

      Looks like v7 of react-hook-form migrated from using refs.. you can just spread properties on register. You can see this here - react-hook-form.com/migrate-v6-to-v7/

    • @onlyamaras
      @onlyamaras 2 года назад

      @@kchaiprogramming6179 can you please provide the updated code for validationProps, I tried all the way but not able to get the right output.

  • @sounakroy9284
    @sounakroy9284 2 года назад

    Great 👍

  • @craigcampbell4712
    @craigcampbell4712 2 года назад

    This was really great and helpful, thanks so much!

  • @easyfinanceexplained
    @easyfinanceexplained 2 года назад

    Thank you for this amazing explanation

  • @tatyanadubrova2959
    @tatyanadubrova2959 2 года назад

    Thank you :)

  • @juj1988
    @juj1988 3 года назад

    Thanks...its very helpful

  • @MrCuteguylol
    @MrCuteguylol 3 года назад

    Hi! This was a wonderful video, however is it possible if you also show us how to integrate the select tag in it? Thanks in advance!

  • @aravindm6124
    @aravindm6124 3 года назад

    fantastic , please upload more videos

  • @baluchandran5670
    @baluchandran5670 3 года назад

    My friend, I am a senior IT kind of person. Spent more than three decades in IT. The reason I am saying this, to establish the importance of what I am going to say. First - Wonderful and precise content - Thinking abstract out of the box are very few. After a long time I found one - it is you. I really enjoyed this journey of watching your video. But I was not happy to see the subscribers you got? Probably there is a mistake on your side as well. Then content in this video are really good but can be appreciated only by experienced people quickly. This means, you have to make contents for newbies running basics Piece by piece. We all know Koushik of Javabrains. Trust me, I enjoyed your video as if I am watching him on the show. Try to prepare some basic contents but don't miss to release dense contents like this - otherwise we may fly away :). You have good time ahead. make it natural and keep going.

    • @prasadreddy1131
      @prasadreddy1131 7 месяцев назад

      I really appreciate him. As you said it's for experienced people level of explanation. To get more subscribers and view, You have to explain little more detail but not too lengthy like UDEMY however i really loved it.

  • @Traffylaw233
    @Traffylaw233 3 года назад

    Hi Kchai! thank's for the video :-) for the CSS part, did you use a library like Bootstrap ?

    • @kchaiprogramming6179
      @kchaiprogramming6179 3 года назад

      Yup.. I used Materialize - materializecss.com/

    • @Traffylaw233
      @Traffylaw233 3 года назад

      @@kchaiprogramming6179 ok great ^^ thank you 👍

  • @jaggyjut
    @jaggyjut 3 года назад

    Cool. Could you show CRUD operations in the form and save it in a table grid within a page and backed as google firestore. Thanks

  • @jaggyjut
    @jaggyjut 3 года назад

    Could you please create a tutorial on multi-stage forms, with logic

  • @jaggyjut
    @jaggyjut 3 года назад

    Awesome. Could share how we can use css to align two or three fields in the same row?

  • @cristhianjhlcom
    @cristhianjhlcom 3 года назад

    Nice video, congratulations for the great content. I have a question I hope you can help me, I have a invoice form that need a detailed list but I build this detail from another component external to this form how can o validate that details have data and send the array of data with the submit form? Thanks 🤓

    • @kchaiprogramming6179
      @kchaiprogramming6179 3 года назад

      You can make these checks at onSubmit function of your form.. alternatively.. you can send array of validations as a prop to your component, whenever onSubmit is fired, you can perform these validations

  • @mithushanjalangan5132
    @mithushanjalangan5132 3 года назад

    Thanks for this video!

  • @fasttocode
    @fasttocode 3 года назад

    Thank you.

  • @fasttocode
    @fasttocode 3 года назад

    Good explanation, Thank you.

  • @javascriptEager
    @javascriptEager 3 года назад

    Its amazing seriously yr I share this channel and all video link to my whole company and also biggners

  • @raulrothschild
    @raulrothschild 3 года назад

    Maybe you would create a <Input /> and pass all props to them. Another thing u didn't think about is textarea, select, and the data within radio and checked buttons, useState has a strange behavior when you check and uncheck them. What about all other html inputs attr? Data Picker, file, button? I think creating a switch case for each one is kind bad, idk. Just my opinion, maybe adding custom hooks for validation would be easier.

    • @kchaiprogramming6179
      @kchaiprogramming6179 3 года назад

      The example I showed above relies on react-hook-form which is used to create uncontrolled components. So, there is no need to rely on hooks or react state. You need to create similar case statements for all the other elements and for props you can create "props" filed in JSON and can spread it on element , but, this is just a one time activity. This approach is really useful when you have to dynamically control everything using only JSON. This JSON can be dynamically generated from the server and you can manipulate the form fields. If you don't have such use-case then this definitely is an overkill.

  • @funkygrassreviewsstuff3378
    @funkygrassreviewsstuff3378 3 года назад

    thanks for the resource..Very very good!!

  • @MrXperx
    @MrXperx 3 года назад

    Good stuff

  • @shalsteven
    @shalsteven 4 года назад

    Thank you for your straight forward explanation. But when will I have to use uncontrolled form instead of controlled form?

    • @kchaiprogramming6179
      @kchaiprogramming6179 4 года назад

      There are cases where you might deal with huge forms. Forms with around 50+ fields. In such cases, uncontrolled forms perform better

  • @nancyhan8535
    @nancyhan8535 4 года назад

    Thanks for the video. I love it.

  • @lakshansampath368
    @lakshansampath368 4 года назад

    keep it up.

  • @mohammedsufiyan8389
    @mohammedsufiyan8389 4 года назад

    Hey, can you please tell which framework is best for mobile applns react native or flutter if flutter can you make videos on flutter? Love your work♥️♥️

    • @kchaiprogramming6179
      @kchaiprogramming6179 4 года назад

      I think both are amazing. I am biased towards React Native coz of JavaScript. But, I am definitely interested in flutter and will make videos on it.

  • @shohagkhan3677
    @shohagkhan3677 4 года назад

    Thanks for this nice and very important tutorial.

  • @kchaiprogramming6179
    @kchaiprogramming6179 4 года назад

    Here's the link for the source code - github.com/ChaitanyaKaranam/react-powerhouse