Class introduction

This is a Devup UI practical class prepared for those who are wondering what to do after learning React.

Using Devup UI, a next-generation CSS-in-JS solution that aims for zero cost beyond zero runtime,

Next.js is designed so that you can learn everything from building RSC-based apps to developing UI libraries at once.

It is a practical configuration that takes into account collaboration with designers, and introduces a UI development method that captures performance and DX at the same time.

3 reasons this class is special

❶ Modern UI development implemented with Zero Cost CSS-in-JS

CSS-in-JS is an age where runtime costs are shunned, but Devup UI provides a Zero Cost approach that completely solves this. By removing the runtime overhead that React developers felt the most burdensome, performance-oriented UI development becomes possible. In this class, you can learn the core principles of Devup UI step by step to actual project application, and experience firsthand why it is attracting attention as a next-generation UI solution.

❷ Learn the entire practical flow from building Next.js RSC-based apps to theme systems

It not only uses components, but also covers app structure design using RSC (React Server Components), which is the latest Next.js architecture. It also includes how to accurately implement designs by linking Figma and Devup UI, and system designs that reflect the brand theme, providing an experience that can be used directly in practical projects. “How should I structure my React app?” It naturally resolves this problem.

❸ Experience creating your own UI library and using it in other projects

In addition to learning concepts, they build their own actual UI libraries and complete monorepo environments, component development, and storybook documentation. By practicing the process of importing and using the created library in another React app, you will be able to design a UI system that can be reused within a company or team. This is a time to learn “scalable UI structures” which are important for growing as a front-end developer.

Course effect

Improved ability to use Zero Cost CSS-in-JS based on Devup UI
Acquire practical skills to design React apps with the Next.js RSC structure
Provides the experience of developing and deploying hands-on UI libraries yourself
Strengthening UI collaboration capabilities connecting Figma and React

Recommended target

Developers who have learned React but aren't sure about the next step
Those who want to learn how to develop performance-oriented UI
Front-end developers who want to create a UI library for their company/team
Those who want to implement UI without errors in collaboration with designers

Notes before taking the course

This class is designed for people with basic experience using React and Next.js. It's not a basic course for complete beginners, but I've structured it step-by-step so you can follow along if you've used React at least once. Also, since you understand the philosophy and structure of Devup UI with a practical focus, you will also learn the perspective of designing a UI system beyond simple library usage. All you need to prepare is a React development environment, and the hands-on examples and code structure are all detailed in the course.

React apps implemented with CSS-in-JS and Devup UI

React apps implemented with CSS-in-JS and Devup UI