Тёмный

Building a React Component Library: A Senior Developer's Guide 

Imran Codes
Подписаться 896
Просмотров 1,1 тыс.
50% 1

Join us on a comprehensive journey as a seasoned developer walks you through the process of creating a React component library. In this tutorial series, you'll learn everything from setting up TypeScript in your project to configuring Circle CI automations. Here's what you can expect:
Introduction to the project
Installing TypeScript and setting up the environment
Creating essential page components
Setting up Rollup for building the component library
Implementing Jest and React Testing Library for testing
Integrating Babel and passing unit tests
Incorporating Styled Components and testing styling
Installing Storybook for visual component inspection
Implementing Husky for pre-commit checks
Configuring ESLint for code quality
Understanding conventional commits and best practices
Automating CI with Circle CI
Whether you're a beginner or an experienced developer, this series will equip you with the skills needed to create robust React component libraries efficiently. Don't miss out on this insightful journey into the world of component development!
Don't forget to like, subscribe, and share this video for more tutorials like this.
Check Out My Links ⬇️
www.imrancodes.com/contact
Download 3 FREE Ebooks 🔗
www.imrancodes.com/ebooks#new...
Repository
github.com/imran-codes/react-...
00:00:00 1. Intro
00:01:17 2. Install Typescript in the project
00:08:54 3. Creating our page component
00:14:16 4. Rollup setup and build the component library
00:27:24 5. Install jest and react testing library and run our first test
00:32:42 6. Installed babel and passed unit tests
00:34:13 7. Installed styled components and added unit tests to test the styling
00:38:07 8. Install storybook to visually see your components
00:41:53 9. Installed husky and added pre commit checks
00:50:20 10. Configuring eslint
00:57:36 11. Conventional commits and best practices
01:03:57 12. Circle CI Automations

Опубликовано:

 

28 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 10   
@gary7135
@gary7135 11 дней назад
Please make a turbo repo version with all those libraries tutorial~~
@imrancodes
@imrancodes 8 дней назад
I will have a look at this
@gary7135
@gary7135 8 дней назад
@@imrancodes Thanks!!!
@jenn9233
@jenn9233 2 месяца назад
The eslint that I installed doesn't have a JSON config format option, and by default it creates a config file with MJS format, how about that?
@imrancodes
@imrancodes 2 месяца назад
This should be fine just follow along the steps. You can always change your eslint config file when it’s created
@maresal4271
@maresal4271 2 месяца назад
amazing
@imrancodes
@imrancodes 2 месяца назад
Thanks
@sameerfaridi2
@sameerfaridi2 Месяц назад
hii imran sir i need your help kindly tell me what is : LOCAL_VERSION GH_TOKEN CURRENT_VERSION and how can i implement them
@imrancodes
@imrancodes Месяц назад
These are environment variables that you can save in the circle ci project I recommend doing the release and publish to npm jobs manually
@kathybrooke5443
@kathybrooke5443 2 месяца назад
Promo'SM
Далее
Refactoring a React component - Design Patterns
15:19
Barry Policeman And His Son Vs Prisoners
00:26
Просмотров 691 тыс.
Learn By Building: Language Server Protocol
1:59:54
Просмотров 63 тыс.
This UI component library is mind-blowing
8:23
Просмотров 601 тыс.
React UI Library Structure, Storybook and Tests
22:50
NixOS Setup Guide - Configuration / Home-Manager / Flakes
3:01:39
Next.js with React Testing Library, Jest, TypeScript
25:04
🚀  TDD, Where Did It All Go Wrong (Ian Cooper)
1:03:55
Просмотров 551 тыс.