Sharing Is Caring:

Your custom React component

  • 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


  • React basics
  • Basic programming skills and mindset


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
Read Also -->   Web Development By Doing: HTML / CSS From Scratch

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

๐Ÿ‘‡๐Ÿ‘‡๐Ÿ‘‡๐Ÿ‘‡ Click Below to Enroll in Free Udemy Course ๐Ÿ‘‡๐Ÿ‘‡๐Ÿ‘‡๐Ÿ‘‡

Go to Course

๐Ÿ‘‡๐Ÿ‘‡ See Also ๐Ÿ‘‡๐Ÿ‘‡

Join Us Join Us Join Us
Sharing Is Caring:

Leave a Comment

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

Powered By
100% Free SEO Tools - Tool Kits PRO