Creating Your Own UI Library with React and TypeScript

Поділитися
Вставка
  • Опубліковано 27 вер 2024

КОМЕНТАРІ • 34

  • @andrewiglinski148
    @andrewiglinski148 6 місяців тому +1

    Dude this is the best video on this topic on the youtube. It's been a long time since I had to watch a tutorial on something related to React, and people just f-3king go on, and on, and on... like dude.... we don't need to know what typescript is... just show us where you found the configs and what worked for you lol. Either way, I appreciate the help.

  • @SnehilCodes
    @SnehilCodes 2 роки тому +7

    Loved your video format. Short, informative and fun!

  • @Kwuasimoto
    @Kwuasimoto Рік тому +1

    Bayan I just wanted to say I appreciate the effort you put in to make your video's enjoyable and educational. You provide great content sir

  • @tszhong0411
    @tszhong0411 Рік тому +1

    Thank you! This is the video I wanted to watch. I am trying to create my own UI library and started referring to other repositories. However, I have no idea what they do. You have saved me time. ❤

  • @mohammadanaskhan5294
    @mohammadanaskhan5294 3 місяці тому +3

    I normally don't comment under videos unless I have genuinely liked it.
    will just say - this is how tutorials must be!

  • @sandeepsirohi8434
    @sandeepsirohi8434 Рік тому +1

    Thanks man.
    Its really so easy!! 😃

  • @alfredasare5870
    @alfredasare5870 3 роки тому +2

    Niiiiice. Love your explanation.

  • @jairoo4716
    @jairoo4716 Рік тому +1

    really good content, keep it up

  • @Cowglow
    @Cowglow 22 дні тому

    👏👏👏

  • @jaisonj3056
    @jaisonj3056 11 місяців тому

    Nice video.
    I have a small doubt, what if we want to add more components such as input, dropdown, etc, in a single library. How to approach this situation.

  •  2 роки тому +1

    Thanks for video, it possible with tailwind? can you make a video?

    • @BayanBennett
      @BayanBennett  2 роки тому +1

      Definitely possible with tailwind, but I'll leave the video to someone else ;)
      There seem to be some UI libraries that are using tailwind, those would be a good place to start

  • @iamstrom518
    @iamstrom518 6 місяців тому

    Have you ever tried using useRef() or useMemo() on your own ui library? Then when you import your component, you got this error: `Uncaught TypeError: Cannot read properties of null (reading 'useRef')`

  • @sagemik69
    @sagemik69 Рік тому

    I have error Cannot find module '@Coradion/ui' or its corresponding type declarations. It is ok to import like this import {Button} from '@Coradion/ui' when there is src folder.

    • @BayanBennett
      @BayanBennett  Рік тому +1

      Here's a the place where I used the library: github.com/coradion/www/blob/main/src/components/icon-button.tsx
      It's not a great example of using a UI library component right now, but at least the project setup is different.

  • @kaydenhardcastle
    @kaydenhardcastle 2 роки тому +1

    Love this, thank you!
    what about using a scss file instead of styled components? I seem to have an issue importing/using external scss documents in an NPM package

    • @BayanBennett
      @BayanBennett  2 роки тому +1

      Depending on how your project is set up, you will most likely need to add something to transpile SCSS down to CSS. If you're using webpack, `sass-loader`(webpack.js.org/loaders/sass-loader/), or for create react app `sass` (create-react-app.dev/docs/adding-a-sass-stylesheet/). For my project, I'm not bundling anything, so I would just package the SCSS files and let the project that is using my UI library deal with the transpilation of SCSS ➡ CSS.

    • @kaydenhardcastle
      @kaydenhardcastle 2 роки тому +1

      @@BayanBennett I will look into it, thanks! I’m not too familiar with webpack currently

  • @codingman8056
    @codingman8056 Рік тому

    video sucks , stop overacting , explain the topic properly

    • @BayanBennett
      @BayanBennett  Рік тому +1

      There are plenty of other channels for that

    • @saiverx
      @saiverx Рік тому

      I actually found it super easy to follow and it gave me just enough information to get me started. Sucks to suck 🤷‍♂🤷‍♂

    • @syedhamza6779
      @syedhamza6779 3 місяці тому

      Video's Great, no overacting, topic explained easily

  • @imagine_9620
    @imagine_9620 2 роки тому +2

    Lol ,remembering this video and rewatching it actually saved me a lot of time. Thx a lot, a 100% like and subscribe scenario :).

  • @alexodan
    @alexodan Рік тому +1

    cool tutorial bro, it would be nice if u show how to export types, u know the .d.ts file and styles cheers (halp me pls im struggling)

    • @BayanBennett
      @BayanBennett  Рік тому

      Are you making the .d.ts files manually or generated by enabling declarations in tsconfig (www.typescriptlang.org/tsconfig#declaration)?

  • @nicolasomar
    @nicolasomar Рік тому +2

    Nice way to introduce how to create a library. You go to the simplest way without publishing or link it to a repo.
    Also I liked the humor,.

  • @dennyrachmadi1391
    @dennyrachmadi1391 Рік тому +1

    I'm excited just by watching the title. kudo's added to my watch later

  • @JawsoneJason
    @JawsoneJason 9 місяців тому

    Wow, this was amazingly simple!
    One question: Can we also include storybook in this same repo? I feel like that might complicate this a bit, though?

  • @StrawbrryFrap
    @StrawbrryFrap 3 роки тому +2

    Neat! :3

  • @aleksamitic6655
    @aleksamitic6655 10 місяців тому

    Great video mate! Keep it up

  • @YourMom-rg5jk
    @YourMom-rg5jk 2 роки тому +2

    subbed