Your custom React component

Your custom React component, available at Free, has an average rating of 4.15, with 32 lectures, based on 209 reviews, and has 13766 subscribers.

You will learn about 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 This course is ideal for individuals who are This course is for professional front-end or full-stack developers It is particularly useful for This course is for professional front-end or full-stack developers.

Enroll now: Your custom React component

Summary

Title: Your custom React component

Price: Free

Average Rating: 4.15

Number of Lectures: 32

Number of Published Lectures: 32

Number of Curriculum Items: 32

Number of Published Curriculum Objects: 32

Original Price: Free

Quality Status: approved

Status: Live

What You Will 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

Who Should Attend

This course is for professional front-end or full-stack developers

Target Audiences

This course is for professional front-end or full-stack developers

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!

Course Curriculum

Chapter 1: Introduction

Lecture 1: What you can learn in this course

Chapter 2: Preparation

Lecture 1: Tools

Lecture 2: Register to npmjs.com

Lecture 3: Check nodejs and npm versions

Lecture 4: Create git repository

Chapter 3: Custom button component

Lecture 1: Init project = package.json

Lecture 2: Install dependencies

Lecture 3: Add readme.md

Lecture 4: Component configuration = Webpack

Lecture 5: Demo site configuration = Storybook

Lecture 6: Activate JSX Storybook addon

Lecture 7: Create custom button component

Lecture 8: Very first demo case

Lecture 9: Start demo site development build

Lecture 10: Ignore files from the Git repository = .gitignore

Lecture 11: Save our work – git commit

Lecture 12: Make demo site production build

Lecture 13: Commit demo site production build

Lecture 14: Activate GitHub page

Lecture 15: Ignore files from the npm package = .npmignore

Lecture 16: Component production build

Lecture 17: Publish component as a package

Lecture 18: Add sass to define component style

Lecture 19: Enable SASS loading in demo site configuration

Lecture 20: Commit SASS support

Lecture 21: Update component as a package

Lecture 22: Add npm version badge to the repository home

Lecture 23: Commit npm badge

Lecture 24: Use component in a project

Lecture 25: Update demo site

Lecture 26: Add demo site badge next to the npm badge

Chapter 4: Thank you

Lecture 1: A special thank you

Instructors

Dávid Csejtei
Senior Software Developer

Rating Distribution

1 stars: 6 votes
2 stars: 10 votes
3 stars: 33 votes
4 stars: 73 votes
5 stars: 87 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!

Menu