# Unit 4: Consuming APIs and Styling ## Introduction to Styling in React ### Styling Approaches in React * **Inline Styles:** Directly applied to elements using the `style` prop (JavaScript object). * `const myStyle = { color: 'blue', fontSize: '16px' };` * `

Styled Content

` * **Pros:** Simple for dynamic styles. * **Cons:** Limited CSS features, harder to manage, performance overhead. * **CSS Modules:** Locally scoped CSS files, preventing global style conflicts. * Create `styles.module.css` file. * `import styles from './styles.module.css';` * `

Styled Content

` * **Pros:** **Scoped by default**, no naming collisions, better maintainability. * **Cons:** Requires a build tool setup (often handled by Create React App). * **CSS-in-JS Libraries:** Write CSS within JavaScript code. * **Key Concept:** Dynamic styling, theming, automatic vendor prefixing, style scoping. * Examples: Styled Components, Emotion. ### CSS-in-JS Libraries #### Styled Components * **Definition:** A library that allows you to write **actual CSS code** in your JavaScript files. * **Key Feature:** Creates React components with attached styles. * **Syntax:** ```javascript import styled from 'styled-components'; const Button = styled.button` background-color: ${props => props.primary ? 'palevioletred' : 'white'}; color: ${props => props.primary ? 'white' : 'palevioletred'}; font-size: 1em; margin: 1em; padding: 0.25em 1em; border: 2px solid palevioletred; border-radius: 3px; `; ``` * **Exam Point:** Enables component-level styling and dynamic style changes based on props. #### Emotion * **Definition:** A popular CSS-in-JS library with multiple APIs. * **Key Feature:** Offers flexibility (string tags, object styles, `css` prop). * **Syntax (using `css` prop):** ```javascript /** @jsxImportSource @emotion/react */ import { css } from '@emotion/react'; const boxStyle = css` padding: 10px; background-color: lightblue; border-radius: 5px; `;

Styled Box

``` * **Exam Point:** Offers different ways to style components, including a convenient `css` prop. ### Theming and Styling * **Concept:** Applying a consistent design language (colors, fonts, spacing) across an application. * **CSS-in-JS Theming:** * Styled Components: Uses `ThemeProvider` context. * Emotion: Also supports context-based theming. * **Implementation:** 1. Define a **theme object** (e.g., `colors`, `fonts`, `spacing`). 2. Wrap the application with a `ThemeProvider`. 3. Access theme values within styled components using `props.theme`. * **Exam Point:** Centralizes design tokens for **consistent UI** and **easy updates**. **[Figure: Theming in React Application]** This figure illustrates how a `ThemeProvider` component wraps the application, making theme constants accessible to all child components. It's crucial for understanding how to achieve consistent branding and design. ### Optimizing Performance with React.memo and useMemo * **Problem:** Unnecessary re-renders can degrade performance, especially in large applications. * **Solution:** Memoization techniques. #### `React.memo` * **Definition:** A **higher-order component (HOC)** that memoizes a functional component. * **How it works:** It prevents a component from re-rendering if its **props have not changed**. * **Usage:** ```javascript const MyComponent = React.memo((props) => { // Component logic return

{props.data}

; }); ``` * **When to use:** On components that are frequently re-rendered with the same props, or are computationally expensive to render. * **Exam Point:** **Optimizes rendering** by skipping re-renders when props are the same. #### `useMemo` Hook * **Definition:** A hook that **memoizes the result of a computation**. * **How it works:** It re-computes the value only when one of its dependencies changes. * **Usage:** ```javascript const memoizedValue = useMemo(() => { // Expensive computation return computeExpensiveValue(a, b); }, [a, b]); // Dependency array ``` * **When to use:** For expensive calculations that are performed within a component and whose results are needed multiple times or as props. * **Exam Point:** **Caches expensive calculation results** to avoid re-computation on every render. ### Styling Libraries and Popular CSS Frameworks #### Bootstrap * **Definition:** A popular open-source **front-end framework** for developing responsive, mobile-first websites and applications. * **Key Features:** * Pre-built **CSS classes** and **JavaScript components**. * Responsive grid system. * Components like buttons, forms, navigation bars, carousels. * **Usage in React:** * Install `bootstrap` package. * Import Bootstrap CSS in `index.js` or `App.js`. * Apply Bootstrap classes to HTML elements. * Use `react-bootstrap` for React-specific components. * **Exam Point:** Provides a **rapid development workflow** with a consistent design system. #### Material-UI (MUI) * **Definition:** A popular React UI framework that implements **Google's Material Design**. * **Key Features:** * High-quality, customizable React components. * Follows Material Design principles (shadows, elevation, motion). * Includes components for forms, navigation, data display, etc. * **Usage in React:** * Install `@mui/material` and `@emotion/react`, `@emotion/styled`. * Import components directly. * Leverages CSS-in-JS (Emotion) for styling. * **Exam Point:** Offers a **comprehensive set of pre-built, accessible UI components** adhering to Material Design guidelines. ---