Create your own design system! with Storybook React and TypeScript | Storybook 6 Crash Course

แชร์
ฝัง
  • เผยแพร่เมื่อ 28 ก.ย. 2024

ความคิดเห็น • 168

  • @mariusespejo
    @mariusespejo  ปีที่แล้ว +5

    Hello! I recently made an updated Storybook 7 crash course here 👉 th-cam.com/video/CuGZgYo6-XY/w-d-xo.html

  • @stevesmith0624
    @stevesmith0624 2 หลายเดือนก่อน

    I was looking for resources on creating a design system with React, this was the perfect video for it. Thanks alot!

  • @hw7416
    @hw7416 ปีที่แล้ว +1

    You are a blessing! Thank you!

  • @iamchiragarora
    @iamchiragarora ปีที่แล้ว +2

    As of 24th May 2023, after installing react+storybook template with tsdx, storybook is not a part of dependencies. So I faced multiple errors like "start-storybook" is not recognized. I had to add it as a dependency and then run npx storybook@next automigrate to fix the issue.

    • @mariusespejo
      @mariusespejo  ปีที่แล้ว

      Thanks for the note. It seems tsdx is not much maintained anymore unfortunately.

  • @AlEgorova
    @AlEgorova ปีที่แล้ว

    Thanks for video! Github's repo would be helpful )))

  • @devendrasaroj8919
    @devendrasaroj8919 2 ปีที่แล้ว

    Got mdx running through this tsdx, otherwise with standard setup I was getting errors for mdx files. Thanks for tutorial.

    • @muxammad2777
      @muxammad2777 2 ปีที่แล้ว

      How did you run it, I have done exactly like him added mdx efter |, and maked i file under stories and called the file Button.histories.mdx .. when I'm writing something in the file i see there are something wrong. since the color is the same for (import ) and the other text.

  • @anhnguyenduy1077
    @anhnguyenduy1077 3 ปีที่แล้ว

    Awesome tutorial. Thank you very much

  • @magdasokolovic
    @magdasokolovic 2 ปีที่แล้ว

    great video! Thanks, Marius :)

  • @skoizumi291101
    @skoizumi291101 2 ปีที่แล้ว

    Thanks for detail video on storybook and react. When starting new application with the new style do we develop two react applications? One works with storybook and the other for real application?

    • @mariusespejo
      @mariusespejo  2 ปีที่แล้ว

      You can think of storybook as simply a alternative development environment which also acts as documentation for your components, so it has nothing to do with the number of applications that you would have. Whatever component you develop in storybook should be reusable in your actual applications

  • @texhio
    @texhio ปีที่แล้ว

    why i'm getting 'start-storybook' is not recognized as an internal or external command, error

    • @mariusespejo
      @mariusespejo  ปีที่แล้ว

      Storybook recently came out with a new major version, and also tsdx seems like it’s not as maintained as before. Might be a good idea to just setup storybook yourself from scratch. I recently made a storybook 7 setup video if you’re interested

  • @OttoAgne
    @OttoAgne 3 ปีที่แล้ว

    Great tutorial! Thanks!
    Is a different to VUE 3 app? Do you have any VUE 3, VITE crash courses?

    • @mariusespejo
      @mariusespejo  3 ปีที่แล้ว

      I know that storybook is fairly agnostic and can work with vue, however the specifics of that I’m not very aware of.. I have not had a chance to try vue so I also don’t have any content on it. Perhaps in the future

  • @thalibmuhammad9519
    @thalibmuhammad9519 2 ปีที่แล้ว

    which one is better? docosaurus or storybook?

    • @mariusespejo
      @mariusespejo  2 ปีที่แล้ว +1

      Both are good for different purposes. Storybook is sort of a component development environment that also happens to document component usage. Docusaurus works as a general purpose docs site for… anything!

  • @erickllerenas6751
    @erickllerenas6751 2 ปีที่แล้ว

    How to decide which files to export and which to exclude based on good practices? (Im talking about the index.js file where you export all your components)

    • @mariusespejo
      @mariusespejo  2 ปีที่แล้ว

      Well basically whatever you want exposed to consumers, and even better things that you’ve actually documented usage for

    • @erickllerenas6751
      @erickllerenas6751 2 ปีที่แล้ว

      @@mariusespejo But there should be a script that generates the index for this file, what do you think?

    • @mariusespejo
      @mariusespejo  2 ปีที่แล้ว

      I mean that’s up to you, depends on how complex it is for you to just write the index file

  • @shfunky
    @shfunky 3 ปีที่แล้ว

    Learned a lot, thank you so much! Somewhat unrelated question but how did you manage to have JSX + Markdown syntax highlighting for .mdx files in Vscode?

    • @mariusespejo
      @mariusespejo  3 ปีที่แล้ว +1

      ah if you search for mdx in vs code extensions it should pop up as an option!

    • @shfunky
      @shfunky 2 ปีที่แล้ว

      @@mariusespejo sorry, completely missed the notification for this message :D thank you so much!

    • @mariusespejo
      @mariusespejo  2 ปีที่แล้ว

      No problem!

  • @islamis_powerful
    @islamis_powerful ปีที่แล้ว

    Hi there,
    How are you?
    I have issue that I have mentioned below. I'm using storybook v7. Facing this issue in your tutorial.
    'start-storybook' is not recognized as an internal or external command,
    operable program or batch file.
    Thanks
    Regards: Muhammad Fizan Iqbal

    • @mariusespejo
      @mariusespejo  ปีที่แล้ว

      V7 is a major update that just came out, please check official docs for how to migrate

    • @islamis_powerful
      @islamis_powerful ปีที่แล้ว

      @@mariusespejo I'm still on same issue.I have saw about migration but didn't work.

    • @mariusespejo
      @mariusespejo  ปีที่แล้ว

      It would be best for you to follow the official docs on how to create a new storybook with your project. You can use this video to give you some ideas but but be aware that it’s not going to map to v7 one to one.

    • @islamis_powerful
      @islamis_powerful ปีที่แล้ว

      @@mariusespejo Yup I know. Thanks for letting me know man.
      I'll try it own my own.
      Thanks a lot for your positive response.

  • @AN-qw7ye
    @AN-qw7ye ปีที่แล้ว

    the updated version storybook v7 cannot use npm run storybook anymore 😓

    • @mariusespejo
      @mariusespejo  ปีที่แล้ว +1

      Storybook has a really good migration tool. You can follow this video using v6 and run the auto migration to upgrade to v7. But I do plan to make a v7 tutorial soon!

    • @AN-qw7ye
      @AN-qw7ye ปีที่แล้ว

      @@mariusespejo As I just install storybook it will automatically installed v7 for me. Hence, I cant run storybook as it will cause error. What I've to do is doing one more step which is ```npx storybook@latest upgrade``` then the storybook can be run again :) Awesome!! looking forward to your v7 tutorial! Cheers

    • @mariusespejo
      @mariusespejo  ปีที่แล้ว

      Just posted! th-cam.com/video/CuGZgYo6-XY/w-d-xo.html

  • @ConnorM468
    @ConnorM468 3 ปีที่แล้ว

    Awesome tutorial! For whatever reason when I want to add a description to my component with the comments I have to terminate my storybook connection and restart it to get it to show. Any fixes? Thanks!

    • @mariusespejo
      @mariusespejo  3 ปีที่แล้ว

      That has happened to me before actually, I was actually surprised it didn’t happen when I was recording. I’m not entirely sure what prevents it from being picked up, sorry

    • @ConnorM468
      @ConnorM468 3 ปีที่แล้ว

      @@mariusespejo Not a big deal. Do you happen to know how to use css files with rollup? Can't seem to figure out how to build with it.

    • @mariusespejo
      @mariusespejo  3 ปีที่แล้ว

      There is a plug-in for css. Or you can use any css-in-js solution and it should just work

  • @oguzhanbayrak8046
    @oguzhanbayrak8046 ปีที่แล้ว +1

    If you are watching this video after storybook published newest version(^7.0.*) of storybook, you will encounter problem that's your storybook server couldn't be initialize. because of cound't found "start-storybook". Because of storybook changed "start-storybook" to "storybook dev". You can run this command for autofix your storybook config. "npx storybook@next automigrate".
    and thanks for video :)

    • @mariusespejo
      @mariusespejo  ปีที่แล้ว

      Thank you for the tip! I actually am planning to create an updated v7 video covering some of the new features, stay tuned!

  • @AwakeningofAI
    @AwakeningofAI 3 ปีที่แล้ว +13

    this was precisely what I was looking for. great tutorial mate. neat and clean concepts.

  • @amitavroydev
    @amitavroydev 2 ปีที่แล้ว +1

    I am not sure if it's an isolated event, but when I run the tsdx create command.. it fails and hence I am not able to install the stuff and even get started.

    • @mariusespejo
      @mariusespejo  2 ปีที่แล้ว +1

      I assume it tells you in the install logs why it failed?

    • @amitavroydev
      @amitavroydev 2 ปีที่แล้ว +1

      @@mariusespejo Might sound so silly but I tried to install it on a different folder and it just worked which really doesn't make sense but yeah it happened. So, for now I guess I am able to work. However, I am for sure going to look at what just happened.
      Because I had even tried using different node versions using NVM to check... :)
      Anyways, thanks for the reply

    • @jihyunlee1340
      @jihyunlee1340 2 ปีที่แล้ว +1

      same here. I got the same problem and stucked at the beginning

    • @amitavroydev
      @amitavroydev 2 ปีที่แล้ว +1

      @Jihyun Lee now have you solved the problem

    • @jihyunlee1340
      @jihyunlee1340 2 ปีที่แล้ว

      @@amitavroydev Yup! I tried it again on another computer installed node v14 it works perfectly. I feel like I struggled for nothing...🤣

  • @OliverKelso
    @OliverKelso 2 ปีที่แล้ว +5

    This is great man, thank you. I've recently been thrown into React and Storybook, coming from Vue. I was having a lot of trouble understanding what the real benefit of Storybook was, but this really cleared up a lot of questions I has having! Thanks!

    • @mariusespejo
      @mariusespejo  2 ปีที่แล้ว +4

      One big benefit, which I don’t remember if I mentioned in the video: is that it promotes this idea of developing “component first”. Rather than the usual first you make a page then, you add layout, then you add components within. With storybook you can decide to go bottom up, from component to page. Which in my opinion encourages really thinking about having good component boundaries and ultimately having a really good component API.
      Also this video is already a bit old and the newest storybook 6.5 has some really cool features such as various testing tools that you can use for unit testing

    • @OliverKelso
      @OliverKelso 2 ปีที่แล้ว

      @@mariusespejo Absolutely, and it was when you said "A bottom up approach" is when the light bulb went off in my head. Again thank you!

  • @AdityaBrahmin
    @AdityaBrahmin 4 หลายเดือนก่อน

    Thank, but apart from that try to explore about real usage cases like not explaining storybook just apply it in any react application.

  • @gavdev12
    @gavdev12 2 ปีที่แล้ว +4

    Perfect video for someone who knows react but has never made a package before. Love it

  • @ya2138
    @ya2138 2 ปีที่แล้ว +4

    After searching for a while of this topic, you may be the only one who explain the doc section even with tsdx. Damn awesome, thank you dude.

  • @andybliss5965
    @andybliss5965 3 ปีที่แล้ว +1

    Thanks for this nice video. I need this for my work. What's quite funny is you suddenly sound British like my when you pronounce 'Button'

  • @haribabumanoharan5366
    @haribabumanoharan5366 ปีที่แล้ว

    1. 'tsdx' is not recognized as an internal or external command,
    operable program or batch file.
    2. $ yarn start
    bash: yarn: command not found
    How to solve this errors ?

    • @mariusespejo
      @mariusespejo  ปีที่แล้ว

      Did you install both globally?

  • @glancecx
    @glancecx ปีที่แล้ว

    I've tried to get this running and open a browser in port 6006 but the new version of Storybook 7.0 runs and error with yarn storybook. I believe its because storybook no longer uses start-storybook and build-storybook. Anyone figure out how to get this working?

    • @mariusespejo
      @mariusespejo  ปีที่แล้ว +1

      To follow this tutorial I suggest installing at v6, then take a look at the v7 upgrade guide, they have a tool to automatically upgrade your code to v7.
      Will try to make a new v7 video soon

  • @sergeykahnwald6640
    @sergeykahnwald6640 2 ปีที่แล้ว +1

    Storybook is a cool package) But there are some cases when we don’t need all the power of storybook, but just a simple “test page” with all our components where we can play with its props. There is one package that works just fine for this, called storybox-react

  • @parthasarathimondal7190
    @parthasarathimondal7190 ปีที่แล้ว

    Hey when I am creating a secondary button, I am getting no stories up there for secondary button but the default button is showing up.

    • @mariusespejo
      @mariusespejo  ปีที่แล้ว

      Did you create the secondary story itself?

  • @jaammmiiii
    @jaammmiiii 3 ปีที่แล้ว +2

    Great tutorial! Thanks! Can you share your extension/settings for VSCode so it auto-formats (Prettier) on save? I've installed the MDX extension and while it does provide syntax highlighting, it doesn't help with formatting.

    • @mariusespejo
      @mariusespejo  3 ปีที่แล้ว +1

      I don’t have auto format on save, I find it sometimes tries to format too early that way (while I’m still typing). I don’t use anything for formatting other than just prettier, it also works for markdown. Sometimes I edit out me doing right click and selecting format so it might seem like I’m formatting automatically when I’m not. I believe I’ve also used Markdown All In One extension which is really nice and can also do formatting I think

  • @ap86
    @ap86 2 ปีที่แล้ว +2

    Thanks for the walkthrough 👍Have you managed to get mdx to be type safe when using typescript? Editor doesn't complain about errors, and build doesn't break when I pass an invalid value to a prop. This makes it pretty fragile. But I love the idea of using mdx

    • @mariusespejo
      @mariusespejo  2 ปีที่แล้ว +1

      Hmm that’s a good point, I haven’t looked into that yet. It looks like folks have opened a ticket on it but it doesn’t sound like there is any traction: github.com/microsoft/TypeScript/issues/36440

    • @ap86
      @ap86 2 ปีที่แล้ว

      @@mariusespejo yeah it seems so. Have to go with tsx for now and follow the progress on types in mdx files. Thanks for replying 👍😊

  • @MaxViews24
    @MaxViews24 4 หลายเดือนก่อน

    how to deploy storybook in static site at the same time library to npm?

    • @mariusespejo
      @mariusespejo  4 หลายเดือนก่อน

      Depends on what your deployment pipeline looks like, do you have it automated? A storybook deployment in general just means run storybook build and have some server to host it, github pages might be easiest, assuming your library is open source anyways

  • @mariusespejo
    @mariusespejo  3 ปีที่แล้ว +3

    Interested in adding dark mode to your React app? Take a look! th-cam.com/video/FVG0NCwjSq8/w-d-xo.html

    • @Play-Date-Care
      @Play-Date-Care ปีที่แล้ว

      Thank you so much for the video, sending you lots of respect for the wonderful explanation!

  • @luisalonsoramirezcamareno2223
    @luisalonsoramirezcamareno2223 2 ปีที่แล้ว

    great video but i'm stuck cause of this err: Unexpected default export without title: {"includeStories":[],"parameters":{"docs":{}}} . Help! It happened when i was trying to create the Button.stories.mdx file

  • @shuaib-hasan-akib
    @shuaib-hasan-akib 3 ปีที่แล้ว +1

    Hello Marius, great video. Please, make a project with React, TS, and Redux.

  • @samueldusek70
    @samueldusek70 3 ปีที่แล้ว +1

    Hi Marius, thanks for this video. It was exactly what I was looking for. Keep the good work. :)

  • @regilearn2138
    @regilearn2138 3 ปีที่แล้ว +1

    It would be grate if you can do a video adding material ui to this setup

    • @mariusespejo
      @mariusespejo  3 ปีที่แล้ว +2

      I mean you can do that if you’re maybe using storybook as docs for your components in an app, but really the intent of this video was if imagine you were making your own version of material-ui, your own component library. In that case it wouldn’t be something I’d add to this setup, but instead my own styling strategy like styled-components or something similar

  • @none0n
    @none0n ปีที่แล้ว

    What if I want to publish each component into individual packages? Could you check out Turbo and how us how to set it up? Thanks.

    • @mariusespejo
      @mariusespejo  ปีที่แล้ว +1

      All you need are separate builds and individual publishing.. yes you can also do a monorepo with turborepo

    • @none0n
      @none0n ปีที่แล้ว

      @@mariusespejo I finally got this sorted out

    • @none0n
      @none0n ปีที่แล้ว

      @@mariusespejo thank you

  • @thalibmuhammad9519
    @thalibmuhammad9519 2 ปีที่แล้ว

    whats the difference between tsdx and npx? why its exist?

    • @mariusespejo
      @mariusespejo  2 ปีที่แล้ว +1

      Totally different tools. Npx is usually a command used to initialize projects using npm. Tsdx is sort of a build tool for typescript projects that are meant to be libraries (e.g. to be packed up for npm distribution). I suggest reading documentation about both.

  • @mybird7272
    @mybird7272 ปีที่แล้ว

    how to run react?

  • @storm-bl5br
    @storm-bl5br 2 ปีที่แล้ว

    teachers,the code repository could share with us ,thanks for
    you

  • @starlite7249
    @starlite7249 3 ปีที่แล้ว

    YYYYEESSSS!!!! just what i wanted Storybook React with Typescript. But Marius no discord still .... BigSad

  • @yo921124
    @yo921124 2 ปีที่แล้ว

    Great video, but im having an issue, as soon as i add the button component into the storybook and try to open it, the app crashes, and the ram consumption goes all the way to 100%, do you know what could it be? i actually have 16gb ram, and i read some error reports in github, but there is nothing too concret

    • @mariusespejo
      @mariusespejo  2 ปีที่แล้ว

      Honestly likely a problem with storybook which doesn’t seem to follow semver very well, lots of big changes happen even on minor version updates

  • @muxammad2777
    @muxammad2777 2 ปีที่แล้ว

    Hello Marius Again
    The two Buttons don't shown in the strorybook, but the two names is shown. what im doing wrong her
    const Template: Story = (args) => ;
    export const Default = () => Template.bind({});
    export const Secondary = () => Template.bind({});
    Secondary.args = {
    variant: 'secondary',
    children: 'I am secondary bro',
    };
    Button is her
    import React, { HtmlHTMLAttributes, ReactNode } from 'react';
    export interface Props extends HtmlHTMLAttributes {
    children: ReactNode;
    variant: 'primary' | 'secondary';
    }
    export const Button = ({ children, variant = 'primary', ...props }: Props) => {
    return (
    {children}
    );
    };
    thank you 🙏

    • @muxammad2777
      @muxammad2777 2 ปีที่แล้ว

      my mistake and stupid mistake. 🙊🙊
      export const Default = Template.bind({});
      export const Secondary = Template.bind({});

    • @mariusespejo
      @mariusespejo  2 ปีที่แล้ว

      I don’t see any obvious issues with your code. Maybe just try restarting the storybook server?

  • @muxammad2777
    @muxammad2777 2 ปีที่แล้ว

    by the way 'subscribed: 'done'

  • @ashish2010ful
    @ashish2010ful 2 ปีที่แล้ว

    How to host different versions of Storybook using local server and not npm or chromatic ?

    • @mariusespejo
      @mariusespejo  2 ปีที่แล้ว

      When you build storybook it just ends up being basically a static SPA that you can use whatever to serve it up

  • @rickvian
    @rickvian 2 ปีที่แล้ว

    if i want to setup storybook for existing next typescript project, do i follow the same process?

    • @mariusespejo
      @mariusespejo  2 ปีที่แล้ว

      Not exactly, this is more for when you want a standalone project/library. For existing projects you likely will want to use storybooks’s “sb init” command, might want to check the docs. If you google “storybook init nextjs” the first article will probably give you some ideas

  • @LithiumFireX
    @LithiumFireX 2 ปีที่แล้ว

    How do you apply conditional styles to more than two variants? Ternary operators only support two variants.

    • @mariusespejo
      @mariusespejo  2 ปีที่แล้ว +1

      You technically can chain ternaries but that would be ugly lol. What I would suggest is creating maps for things that vary, e.g.
      const paddingByVariant = { sm: 10, md: 20, lg: 30 };
      Then in your code you just do a lookup like: paddingByVariant[props.variant]

  • @mr.random8447
    @mr.random8447 2 ปีที่แล้ว

    What typescript react snippets you using? My snippets default with a type instead of an interface

    • @mariusespejo
      @mariusespejo  2 ปีที่แล้ว

      If you search “react snippets” in extensions it’s the one that starts with ES7. Honestly though using type is fine unless you really want users to extend an interface

  • @natikranz4407
    @natikranz4407 3 ปีที่แล้ว

    Hello, great tutorial! Is there a way that I can use styled-components on project? I've searched many erros on build with it

    • @mariusespejo
      @mariusespejo  3 ปีที่แล้ว +1

      yes absolutely! you can use any CSS-in-JS solution including styled-components, emotion, etc. it's actually simpler to use those in my opinion because then you don't have to worry about css processors and such

  • @LeslieDuan
    @LeslieDuan ปีที่แล้ว

    great content, very informative

  • @saisudheerreddy2657
    @saisudheerreddy2657 2 ปีที่แล้ว

    Hello Marius,
    Your video makes me better understanding the storybook. but I have one confusion is the storybook end-user UI builder or it's just for the developer documentation?

    • @mariusespejo
      @mariusespejo  2 ปีที่แล้ว

      It can serve both purposes! You can use it to develop components in isolation and once you’re happy with your component API you can integrate it with your actual app

    • @saisudheerreddy2657
      @saisudheerreddy2657 2 ปีที่แล้ว

      @@mariusespejo Thanks a lot

  • @diegoscastanho
    @diegoscastanho ปีที่แล้ว

    Amazing, thank you!

  • @jacqueskorb879
    @jacqueskorb879 2 ปีที่แล้ว

    Thank you. All good so far!

  • @jihyunlee1340
    @jihyunlee1340 2 ปีที่แล้ว

    Anyone has a problem with tsdx installation, change your node version.
    In my case...
    node v17.8.0 / npm v7.0.0 (x)
    node v14.17.0 / npm v 6.14.13 (o)

    • @mariusespejo
      @mariusespejo  2 ปีที่แล้ว +1

      Npm v7+ installs in a slightly different way, e.g. it usually tries to automatically install peer dependencies. You can opt out of that usually by doing npm install -legacy-peer-deps

    • @jihyunlee1340
      @jihyunlee1340 2 ปีที่แล้ว

      @@mariusespejo Thank you so much! Best channel I've ever watched! I'm happy to study with your tutorials.

    • @mariusespejo
      @mariusespejo  2 ปีที่แล้ว

      Thank you, glad you like the content 🙂

  • @jihyunlee1340
    @jihyunlee1340 2 ปีที่แล้ว

    After npx tsdx create file-name, it says Failed to install dependencies
    Error: Command failed with exit code 1: npm install @babel/core @size-limit/preset-small-lib @storybook/addon-essentials @storybook/addon-info @storybook/addon-links @storybook/addons @storybook/react @types/react @types/react-dom babel-loader husky react react-dom react-is size-limit tsdx tslib typescript --save-dev
    I did install one by one and I work found out I can't install from react to typescript part. so sad...

    • @mariusespejo
      @mariusespejo  2 ปีที่แล้ว +1

      Might want to create an issue on the tsdx repo, likely just a problem with the current version, I’m sure it’ll be fixed

    • @jihyunlee1340
      @jihyunlee1340 2 ปีที่แล้ว

      @@mariusespejo I changed node, npm version and worked well!

  • @emanuelameh5722
    @emanuelameh5722 3 ปีที่แล้ว

    Stories not displaying in my browser. Any idea why?

    • @mariusespejo
      @mariusespejo  3 ปีที่แล้ว

      Perhaps you didn’t add .stories to the file name? If all else fails try restarting your storybook

  • @icutshapes8164
    @icutshapes8164 2 ปีที่แล้ว

    Exactly what I was looking for. Thanks for introducing me to TSDX.

    • @mariusespejo
      @mariusespejo  2 ปีที่แล้ว

      Tsdx is great! Glad to help 🙌

  • @thongtech1984
    @thongtech1984 2 ปีที่แล้ว

    Can you do a similar videos with Angular?

    • @mariusespejo
      @mariusespejo  2 ปีที่แล้ว +2

      Sorry I haven’t really used much of angular, it’s all the same fundamentals though basically you use angular components instead of react… most of the core topics I covered here will be the same

  • @codefork94
    @codefork94 2 ปีที่แล้ว

    phenomenal walkthrough 🔥🔥🔥

  • @muxammad2777
    @muxammad2777 2 ปีที่แล้ว

    thank you for the video.
    what is the meta been used for ? I dont understand there where you export Meta what is that ? thank you brother

    • @mariusespejo
      @mariusespejo  2 ปีที่แล้ว

      Meta is basically metadata for the storybook view, e.g. the title you provide there determines the title for that component’s set of stories on the storybook ui

    • @muxammad2777
      @muxammad2777 2 ปีที่แล้ว

      @@mariusespejo ooh okay I understand now thank you very much.

  • @sergeykahnwald6640
    @sergeykahnwald6640 2 ปีที่แล้ว

    great!

  • @johnddonnet5151
    @johnddonnet5151 2 ปีที่แล้ว

    Finally learnt how to correctly create a button :D

    • @mariusespejo
      @mariusespejo  2 ปีที่แล้ว

      Gotta start somewhere 😄

  • @yourfavoritefounder7203
    @yourfavoritefounder7203 2 ปีที่แล้ว

    Nice job!

  •  2 ปีที่แล้ว

    Thanks man, very informative video

  • @kurniawanhendra2683
    @kurniawanhendra2683 3 ปีที่แล้ว

    thanks man,

  • @vladimirmryscuk8409
    @vladimirmryscuk8409 3 ปีที่แล้ว

    hi, great video! what's this vscode theme?

    • @mariusespejo
      @mariusespejo  3 ปีที่แล้ว

      Either github dark or nightowl I usually used in videos

  • @Fatima-ie5kj
    @Fatima-ie5kj 3 ปีที่แล้ว

    sir one little request can u make a short project with react & typescript using reducer & context?

    • @mariusespejo
      @mariusespejo  3 ปีที่แล้ว +1

      I actually have a vid in my channel on react + typescript and it covers reducers

    • @Fatima-ie5kj
      @Fatima-ie5kj 3 ปีที่แล้ว

      @@mariusespejo thnx

  • @carljkempe
    @carljkempe 3 ปีที่แล้ว

    What extension are you using for snippets?

    • @mariusespejo
      @mariusespejo  3 ปีที่แล้ว

      Don’t remember the specific name but they’re honestly all mostly the same, just search for “react snippets” and pick one you like

  • @Gusfaria11
    @Gusfaria11 3 ปีที่แล้ว

    This is great. Thank you. Any ideas on how to structure the css? Is this on top of webpack?

    • @mariusespejo
      @mariusespejo  3 ปีที่แล้ว

      really up to you, but I personally like css-in-js solutions for React stuff. I mention towards the end of the video storybook is built with webpack while the code/package itself is compiled with rollup. So if you decide to add a specific css loader, you just have to work with both configurations

  • @shahmirjadoon3587
    @shahmirjadoon3587 2 ปีที่แล้ว

    Very good video. Helped alot

  • @shoaibsayyed3358
    @shoaibsayyed3358 2 ปีที่แล้ว

    How to add scss support for the react components and for storybook?

    • @mariusespejo
      @mariusespejo  2 ปีที่แล้ว +1

      Storybook has a webpack config that you can customize

    • @shoaibsayyed3358
      @shoaibsayyed3358 2 ปีที่แล้ว

      @@mariusespejo What I did is, I have created a tsdx.config.js and post CSS rollup plugin to handle scss to CSS compilation, and also added @storybook/preset-scss for storybook in main.js, And it is working.

    • @mariusespejo
      @mariusespejo  2 ปีที่แล้ว +1

      Great! Glad you figured it out, thanks for sharing

  • @mk9834
    @mk9834 3 ปีที่แล้ว

    interesting video as always!

    • @mariusespejo
      @mariusespejo  3 ปีที่แล้ว

      glad you think so! thanks!

  • @oscar_cornejo
    @oscar_cornejo 2 ปีที่แล้ว

    how use lerna with this?

    • @mariusespejo
      @mariusespejo  2 ปีที่แล้ว

      Sorry not familiar with lerna

  • @martinui4892
    @martinui4892 2 ปีที่แล้ว

    Storybook es Free ?

  • @shivanshpatel4072
    @shivanshpatel4072 2 ปีที่แล้ว

    Awesome video 🤩

  • @MrIgorii
    @MrIgorii 3 ปีที่แล้ว

    Noice man, so clear and well structured

  • @av03
    @av03 3 ปีที่แล้ว

    subscribed!

  • @fabbyptc
    @fabbyptc 2 ปีที่แล้ว +1

    Man, I have no words enought to thank you! You've saved me! I had to create a library for work and failed with all the tutorials I've tried. Your tutorial was the one that resolved my problem. Thanks a lot!

    • @mariusespejo
      @mariusespejo  2 ปีที่แล้ว +1

      No problem! Happy to have helped 🙂

  • @yaktd5704
    @yaktd5704 3 ปีที่แล้ว +1

    As a Nestjs Developer, I thought you would use Angular!

    • @mariusespejo
      @mariusespejo  3 ปีที่แล้ว

      It’s all about picking the right tool for the job