Display the JSX of a React Storybook Story with the JSX Addon

In case anyone's wondering, addWithJSX is exported from storybook-addon-jsx.

Why would you add storybook-addon-jsx as a dev dependency, and not a regular dependency, how would people view the JSX when using the storybook without it?

It seems like a lot of the packages that you've installed thus far in the course have been put in dev dependencies, but they are packages that provide code that is executed in production. I don't understand why you would do this. As far as I understand this would make the application error out immediately if you try to run it as a person who only installs the production assets.

Why would you add storybook-addon-jsx as a dev dependency, and not a regular dependency, how would people view the JSX when using the storybook without it? It seems like a lot of the packages that you've installed thus far in the course have been put in dev dependencies, but they are packages that provide code that is executed in production. I don't understand why you would do this. As far as I understand this would make the application error out immediately if you try to run it as a person who only installs the production assets.

Can someone answer above question please

@BrightPixels

My guess here is that, since storybook is meant to be used alongside a project to develop UI components in isolation, it is something meant for the developer to use in tandem with a project when developing it. When the components are created, they would be used in the actual application that they are being developed for. Since the production app wouldn't run or require the storybook, it makes sense to keep all storybook related packages as a development dependency.

Of course this all goes out the window if you're doing something like creating a storybook UI library for the sake of displaying the UI library itself (which is what is being done here), in that case everything should be a production dependency since the end user is interacting with the storybook to view the UI. Any of the projects displayed here would be examples of this: https://storybook.js.org/docs/basics/live-examples/

This is what makes most sense to me.

You've probably noticed that this course has a lot of out of date information. I'd suggest using the "feedback" button in the toolbar of the site to voice your complaints (if you have any) like I did. Nobody seems to be answering comments here at all.

@aryyya Thanks for the quick reply. All makes sense. My use case is the latter, I am working on a UI library which need to be published.

Anyone else having issues with the JSX addon? For me it doesn't display what I am expecting, i.e. the JSX with props used. But it's showing me the implenetation of the component. Please see screenshots. I am getting the same isseus when using the decorator and addwithjsx.

Screenshot of JSX addon panel: https://imgur.com/YogkOYa

Screenshot of the story: https://imgur.com/lYZishm

Screenshot of the component implenetation: https://imgur.com/4SLazwo

Screenshot of the config file: https://imgur.com/hXcigHa

hey friends! sorry i am just seeing this feedback now. I am rerecording all the lessons so that you have up to date information. for @BrightPixels in particular, yes this was meant for local dev but of course promote to a full dependency as you needed (in fact i will do that upon rerecording).

as for your JSX issue, i can replicate it if i use a default export of an anonymous component as you have. in my video (and as best practice in general) i used a named export for Button so the component has a name.

Another question Shawn (or anyone else who can help)

For one of my components, The JSX Addon is showing a prop that I didn't add but it looks like, it got it from the defaultProps which feels wrong to me, as I expect the JSX addon to show exactly how I used the component:

Screenshot of the Story which show how am using the component (without any props): https://imgur.com/WMF6S4p

Screenshot of how JSX Addon panel (which is showing a prop that I haven't used): https://imgur.com/bSrKOaf

Screenshot of the component's propTypes and defaultProps settings which is where I think JSX Addon has got the props from: https://imgur.com/sQMNo7f

The withInfo panel shows what I am expecting. Anyway to make the JSX Addon show the expected output?

Any can help with above question please?

@brightpixels I'm not sure, I can't quite reproduce what you're reporting. In any case I will fully rerecord this course this week. If you'd like to share a small repro i can investigate further, and you can contact me on twitter @swyx or on email swyx@netlify.com.

@Shawn I have emailed you and DM'd you but so far go no replies. Not sure if my messages are getting through.