|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/implement-a-design-system-with-reactjs-storybook-tailwind/
课程评论：没有评论
课程名称：将 Figma 设计转换为 ReactJS 组件（使用 Storybook） 课程概述：在本课程中，您将学习如何将复杂且大规模的设计系统转换为完全功能的 ReactJS 组件。您将了解专业科技公司如何实施他们的设计系统，并学习如何复制这种方法。课程遵循最佳实践，使用 Storybook 将 Figma 中的设计系统转换为独立的组件。课程结束时，您将创建一个完全响应式的 ReactJS 应用程序，配备自己构建的组件库。您将能够根据设计系统的具体指南，将任何设计系统转化为可访问和功能齐全的组件。通过实践学习的方法，您将体验实际软件工程师的工作，逐步完成从简单任务到更复杂有用组件的挑战，进而更自如地应对实际工作中的各种障碍。 课程内容包括：3小时以上的视频讲座、10个作业和1个项目作业。 技术栈：ReactJS、TypeScript、Storybook、TailwindCSS。 设计系统中将实现的组件包括：排版、按钮组、分页、徽章按钮、选择框、文本输入、导航栏（包含子导航）、移动导航栏和租赁卡。每个组件都有暗黑模式选项，并包含多种状态，如悬停、聚焦和禁用状态。通过使用 TailwindCSS，您可以快速构建 UI 组件，而无需离开 ReactJS 组件。设计系统中还提供了一组额外的附加组件供您实现，如复选框、切换、单选按钮和工具提示。所有组件在创建过程中都考虑了可重用性、健壮性和可扩展性等质量特征。 TypeScript：完全类型化组件 所有组件将进行完全类型化，以防止库的使用者违反设计系统的指南。课程将教授 TypeScript 中最相关的特性，如基本类型、自定义类型、接口、泛型和 Record。 构建与消费：准备上线 组件库将针对生产进行优化。所有组件的总大小将压缩至 360KB，因此在示例项目中使用这些组件时，页面加载速度将非常快。 未来更新内容 将来会有更多内容可用。我可能会重新制作一些视频以提升质量，学习材料未来也可能会更改。所有未来的更新都包含在内。
In this course, you will learn exactly how complex and large scale design systems can be converted to fully functioning ReactJS components. Throughout the course, you will learn how professional tech companies implement their design systems and how you can do the same. Following best practices, a design system will be converted from Figma to isolated components using Storybook. At the end of the course, you will create a fully responsive ReactJS app with your self-built component library. You will be able to convert any design system into accessible and functional components adhering to the exact guidelines of the design system.The learning by doing approach in this course puts you in place of an actual software engineer. Starting at relatively simple assignments you will work your way up to more complex and useful components. In doing so, you will automatically become more comfortable in overcoming obstacles as you would also have working in the field.Content of this course: 3+ hours of video lectures, 10 assignments and 1 project assignment.Tech stack: ReactJS, TypeScript, Storybook, TailwindCSS.The following components are available in our design system and will be implemented during the video lessons:TypographyButton GroupPaginateBadgeButtonSelectTextInputNavbar (contains sub-navigation)MobileNavbarRentalCardEach component has a dark mode variant and can have multiple states such as hover, focused and disabled. TailwindCSS will be used to rapidly build out the UI components without having to leave our ReactJS components. An additional set of bonus components are available in the design system for you to implement such as Checkbox, Toggle, Radio and Tooltip. All components are created by keeping the quality characteristics such as reusability, robustness and extendability in mind.TypeScript: fully typed componentsAll components will be fully typed to prevent consumers of the library in violating the guidelines of the design system. TypeScript's most relevant features will be taught like basic types, custom types, interfaces, generics and Record.Build & consume: going to productionThe component library will be optimised for production. All of the components will be minimised to 360kb in total size, so when you are using the components in the sample project the page will load incredibly fast.Future updates includedMore content will become available in the future. I might redo some videos to improve on the quality. Learning materials can be changed in the future as well. All future updates are included.
