- Create your custom, reusable React component with Webpack and Storybook.
- Free tutorial
- Rating: 3.9 out of 53.9 (201 ratings)
- 13,334 students
- 50min of on-demand video
- Created by Dávid Csejtei
- English
What you’ll learn
- Configure webpack to build reusable React component
- Publish React component as an npm package
- Create live demo page with storybook
- Use badges on your git repository home page
- Include SASS to make the component default style
- Publish demo on GitHub pages
- Use package in any projects
Requirements
- React basics
- Basic programming skills and mindset
Description
Hello I am David!
The thing is that you and your team can save many times with making your own UI kit from separated React components. It can reduce the number of the bugs or the improvement time. The first step towards a UI kit is the ability of creating a custom React component.
I made this course to show you how to make your own React component. In this course you can learn build your component with Webpack, the Npm package publishing process, the demo site creation and some additional tricks.
So let the fun begin!
Who this course is for:
- This course is for professional front-end or full-stack developers
Show less
Course content
4 sections • 32 lectures • 49m total lengthCollapse all sections
Introduction1 lecture • 1min
- What you can learn in this course00:37
Preparation4 lectures • 4min
- Tools01:06
- Register to npmjs.com00:30
- Check nodejs and npm versions00:46
- Create git repository01:18
Custom button component26 lectures • 45min
- Init project = package.json04:06
- Install dependencies02:08
- Add readme.md00:44
- Component configuration = Webpack05:16
- Demo site configuration = Storybook01:08
- Activate JSX Storybook addon01:45
- Create custom button component01:21
- Very first demo case02:00
- Start demo site development build00:50
- Ignore files from the Git repository = .gitignore00:58
- Save our work – git commit01:12
- Make demo site production build01:35
- Commit demo site production build00:54
- Activate GitHub page01:15
- Ignore files from the npm package = .npmignore00:43
- Component production build00:42
- Publish component as a package03:42
- Add sass to define component style02:07
- Enable SASS loading in demo site configuration03:24
- Commit SASS support00:48
- Update component as a package01:11
- Add npm version badge to the repository home01:28
- Commit npm badge00:36
- Use component in a project02:43
- Update demo site01:05
- Add demo site badge next to the npm badge01:37
Thank you1 lecture • 1min
- A special thank you00:00
