Ant Design and Tailwind CSS - Vocabulary Flashcards

Vocabulary flashcards covering key concepts from Ant Design, Tailwind CSS, and React state handling in the lecture.

Ant Design

A UI library of React components used to build interactive user interfaces with ready-to-use elements.

UI library

A collection of prebuilt UI components that can be imported and used in applications to speed up development.

Card Component (Ant Design)

A UI container for content that can include headers, actions, and subcomponents like Meta and Grid.

Card.Meta

A subcomponent of Card for displaying flexible content such as title, description, and avatar.

Card.Grid

A grid subcomponent within a Card to arrange multiple items in a grid layout.

Cover (Card)

An option to display a cover image inside a Card using the cover prop.

CardLayout

A custom component example name used to demonstrate pasting Card code into a React component.

Public folder

The folder in a React app where static assets like images are stored for reference.

Tailwind CSS

A utility-first CSS framework that provides predefined classes to build UI quickly and consistently.

Utility-first CSS

An approach where small, single-purpose classes are composed to style elements rather than writing custom CSS.

Tailwind installation

Process of installing Tailwind via npm and creating a tailwind.config.js in the project.

tailwind.config.js

The configuration file for Tailwind where content paths and theming options are defined.

content (Tailwind)

A config property listing file paths to scan for class usage to purge unused styles.

Tailwind directives

CSS directives used to inject Tailwind styles:

@tailwind base;

@tailwind components;

@tailwind utilities;

@tailwind utilities

Directive that injects Tailwind's utility classes into your CSS.

Tailwind classes

Predefined utility classes (e.g., flex, justify-center, m-2) used to style elements.

flex

Tailwind utility to control how flex items grow or shrink within a flex container.

flex-wrap

Tailwind utility that allows flex items to wrap onto multiple lines.

justify-center

Tailwind utility that centers items along the main axis in a flex container.

Synthetic Events

A cross-browser wrapper around native events that provides a consistent API across browsers.

onChange

A synthetic event handler triggered when the value of an input changes.

useState

A React hook that adds state to functional components by returning a state value and a setter function.

import useState syntax

import { useState } from ‘react’;

use useState syntax

const [getCurrentState, setUpdateState] = useState()

Requirement when using Synthetic Events

Create a function first and cal the function inside the synthethic events attribute.

() = > {
}