Design Systems & Component Libraries · Ders

Uygulamalarda Bileşenleri Kullanma

Tasarım sisteminizdeki bileşenleri çeşitli uygulama bağlamlarında ve çerçevelerinde etkili biçimde içe aktarmayı ve kullanmayı öğrenin.

Uygulamalarda Bileşenleri Kullanma, CoddyKit'te ücretsiz bir Design Systems & Component Libraries dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Design Systems & Component Libraries öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Design Systems & Component Libraries kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

Welcome to Component Consumption!

So you've got a shiny new design system! But how do you actually use those beautiful, pre-built components in your apps?

This lesson will show you how to integrate and utilize components from a design system, making your development process smoother and your UIs more consistent.

The Power of Reusability

Consuming design system components isn't just about making your app look good; it's about efficiency and consistency.

Speed: Build features faster by using pre-made UI blocks.
Consistency: Ensure a unified look and feel across all your products.
Quality: Components are often tested and accessible by default.
Maintainability: Updates to the design system propagate easily.

How Components Are Delivered

Design system components are typically published as packages, similar to other libraries you might use.

These packages are usually distributed via a package manager like npm (Node Package Manager) or Yarn. This allows developers to easily install and update them.

Think of it like an app store for code!

Getting Your Design System Ready

Before you can use components, you need to install the design system package into your project. This is usually a simple command in your terminal.

For example, if your design system components are published under @my-ds/components, you'd run:

npm install @my-ds/components

This command downloads the component library and makes it available to your application.

Bringing Components into Your Code

Once installed, you can import specific components into your application's files. This makes them available for use in your UI.

Imagine you have a Button and a Card component:

import Button from '@my-ds/button';
import Card from '@my-ds/card';

function main() {
  console.log("Components imported successfully!");
  console.log("Ready to use Button and Card in your UI.");
}

main();

Placing Components on the Screen

After importing, you can use the components directly in your application's UI code (e.g., JSX in React, templates in Vue/Angular).

Components often accept props (properties) to customize their appearance or behavior.

import Button from '@my-ds/button';

function renderApp() {
  // In a real app, this would return UI elements.
  // Here, we simulate rendering a primary button.
  const primaryButton = `<button class="ds-button ds-button--primary">Submit</button>`;
  console.log("Rendered a primary button (conceptually):");
  console.log(primaryButton);

  // And a secondary button
  const secondaryButton = `<button class="ds-button ds-button--secondary">Cancel</button>`;
  console.log("Rendered a secondary button (conceptually):");
  console.log(secondaryButton);
}

function main() {
  renderApp();
}

main();

Making Components Interactive

Many components respond to user interactions like clicks, input changes, or hovers. You can attach event handlers to run your own code when these events occur.

This allows your application to react to user actions and update its state.

import Button from '@my-ds/button';

function handleClick() {
  console.log("Button was clicked! Action performed.");
}

function renderApp() {
  // Imagine this button has an onClick prop that calls handleClick
  const interactiveButton = `<button class="ds-button" onclick="handleClick()">Click Me</button>`;
  console.log("Simulating a button click:");
  handleClick(); // Call the handler directly to show its effect
  console.log("Interactive button (conceptually):", interactiveButton);
}

function main() {
  renderApp();
}

main();

How Styles Are Applied

Design system components come with their own styles. How these styles are applied depends on the system:

Global CSS: Styles are loaded once for the whole app.
CSS-in-JS: Styles are coupled directly with components.
Utility classes: Components might expose classes for further customization.

Often, you just import a main stylesheet once, or styles are automatically included with the components themselves.

Global Settings for Components

Some design systems use Context or Providers to manage global settings like themes (light/dark mode), language, or user preferences.

You might wrap your application with a ThemeProvider component to make theme settings available to all components within it, without passing props repeatedly.

Test Your Knowledge

You've learned how to bring design system components into your application and use them.

Which of the following commands is typically used to install a design system component library published as an npm package?

Consuming Components: A Summary

Great job! You've learned the essentials of consuming design system components:

Installing component packages via npm/Yarn.
Importing components into your application.
Using components with props and event handlers.
Understanding how styles and global contexts work.

By leveraging design system components, you build better, more consistent UIs faster. Next, we'll look at handling overrides and customizations.

Sıkça Sorulan Sorular

“Uygulamalarda Bileşenleri Kullanma” dersi ücretsiz mi?

Evet — “Uygulamalarda Bileşenleri Kullanma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Design Systems & Component Libraries kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Design Systems & Component Libraries kursu toplamda 4 dersten oluşur.

“Uygulamalarda Bileşenleri Kullanma” dersinde ne öğreneceğim?

Tasarım sisteminizdeki bileşenleri çeşitli uygulama bağlamlarında ve çerçevelerinde etkili biçimde içe aktarmayı ve kullanmayı öğrenin. Design Systems & Component Libraries ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Design Systems & Component Libraries öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Design Systems & Component Libraries, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Uygulamalarda Bileşenleri Kullanma” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Design Systems & Component Libraries dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Design Systems & Component Libraries dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Uygulamalarda Bileşenleri Kullanma
Geçersiz Kılmaları ve Özelleştirmeleri Yönetme
Ürünler İçin Geçiş Stratejileri
Tüketiciler İçin Sürümleme ve Bağımlılık Güncellemeleri

← Design Systems & Component Libraries Sayfasına Dön