DEV Community: mercy0002

Different Ways to Write CSS in React

mercy0002 — Mon, 16 Oct 2023 16:02:11 +0000

CSS (Cascading Style Sheets) are an important aspect of web development since they define the visual presentation of web applications. When integrating CSS with React, a popular JavaScript toolkit for developing user interfaces, developers have a number of alternatives for writing and managing styles. These various approaches enable flexibility and customization while meeting a wide range of project requirements and developer preferences.

In this investigation of "Different Ways to Write CSS in React," we will look at Three various approaches for styling React components. Each strategy has its own set of advantages and disadvantages. Understanding the benefits and drawbacks of these strategies allows developers to make informed decisions that best meet the demands of their projects, whether it's retaining modularity, attaining component-based styling, or guaranteeing a smooth user experience. Let's take a tour of the CSS environment in React to discover the tools and approaches that enable developers to create beautiful and responsive web applications.

inline CSS

Inline CSS in React is a means of directly applying CSS styles to individual components or elements within your application using the style attribute in JSX. This enables you to specify and customize styles for specific components or elements without requiring the use of external CSS files or CSS-in-JS tools. In React, inline CSS works as follows:

const myComponent = () => {
  const inlineStyles = {
    color: 'blue',
    fontSize: '16px',
  };

  return <p style={inlineStyles}>This is a blue and larger-sized text.</p>;
};

const myComponent = () => {
  const textColor = 'blue';
  return (
    <p style={{ color: textColor, fontSize: '16px' }}>
      This is a blue and larger-sized text.
    </p>
  );
};

CSS Modules

CSS Modules is a popular technique for managing and scoping CSS styles in React applications. It helps to encapsulate styles for individual components, preventing global scope pollution and naming conflicts. it works by compiling individual CSS files into both CSS and data. The CSS output is normal, global CSS, which can be injected directly into the browser or concatenated together and written to a file for production use. The data is used to map the human-readable names you’ve used in the files to the globally-safe output CSS.

A CSS Module stylesheet is similar to a regular stylesheet, only with a different extension (e.g. styles.module.css). Here’s how they’re set up:

Create a file with .module.css as the extension.
Import that module into the React app (like we saw earlier)
Add a className to an element or component and reference the particular style from the imported styles.

/* styles.module.css */
.font {
  color: #f00;
  font-size: 20px;
}

import { React } from "react";
import styles from "./styles.module.css";
function App() {
  return (
    <h1 className={styles.heading}>Hello World</h1>
  );
}
export default App;

Component Libraries with Built-in Styles

Component libraries with built-in styles are pre-designed and pre-built collections of user interface components that include their own predefined styles, making it easier to develop visually appealing and consistent user interfaces in React applications. These libraries are frequently used to speed up development by offering ready-made components that correspond to design standards, accessibility best practices, and a consistent design language.

To use a component library with built-in styles in a React application, first add the library to your project as a dependency. I'll demonstrate using the Material-UI library, which is a popular React component library that includes pre-designed components and styles.

Here's a step-by-step tutorial for incorporating Material-UI into your React application:

Install Material-UI: Install Material-UI as a dependency in your project. You can use npm or yarn for this:

// Using npm:
npm install @mui/material @mui/icons-material

// Using yarn:
yarn add @mui/material @mui/icons-material

Import and Use Material-UI Components: You can now import and use Material-UI components in your React components. Here's an example of how to create a simple button using Material-UI:

import React from 'react';
import Button from '@mui/material/Button';

function App() {
  return (
    <div>
      <Button variant="contained" color="primary">
        Click Me
      </Button>
    </div>
  );
}

export default App;

Conclusion
The multiple CSS writing methods in React provide developers with numerous options for styling their web apps. Each strategy has its own set of benefits and considerations, so choosing the best method depending on the project's requirements and team preferences is critical.

5 Secret Typescript Tricks You Should Know

mercy0002 — Thu, 10 Aug 2023 02:49:46 +0000

Welcome to the world of TypeScript, where modern JavaScript and static typing work together to provide developers better control over the quality, maintainability, and productivity of their code. Although you might be familiar with TypeScript's fundamentals, there are a few less well-known tips and tactics that can help you advance your TypeScript proficiency. This article will provide five exclusive TypeScript tips that will make your code simpler, more productive, and more expressive.

These techniques, which range from sophisticated type manipulation to ingenious uses of TypeScript's features, will not only impress your coworkers but also develop your coding skills. These tips will broaden your horizons and inspire you to go beyond the box whether you are an experienced TypeScript developer or just getting started.

So grab a seat as we explore these TypeScript secrets. Prepare to develop your programming abilities and fully utilize TypeScript's possibilities. Let's go out on a journey to discover five top-secret TypeScript techniques that you must be aware of!

Mapped Types with Key Remapping: Mapped types with key remapping is a powerful TypeScript feature that allows you to construct new kinds by altering the keys of an existing type. This is incredibly handy when you need to adapt or modify the keys of an object type without modifying the data associated with those keys. Here's how it works:

Assume you already have a type named OriginalData:

type OriginalData = {
  id: number;
  name: string;
};

Now, you want to create a new type where each key of OriginalData is modified by adding a prefix "modified_". You can achieve this using mapped types with key remapping:

type OriginalData = {
  id: number;
  name: string;
};

type ModifiedKeysData = {
  [K in keyof OriginalData as `modified_${string & K}`]: OriginalData[K];
};

// Usage
const data: ModifiedKeysData = {
  modified_id: 1,
  modified_name: "John",
};

From the code above,The ModifiedKeysData type is constructed in this example by iterating through each key K in the keyof OriginalData. To add the "modified_" prefix to each key, use the remapping syntax modified_$string & K. The resulting ModifiedKeysData type has keys like modified_id and modified_name while retaining the original OriginalData values.

Conditional Types with Inference Conditional types with inference are a powerful tool in TypeScript that allow you to create types that depend on certain conditions and also infer types based on those conditions. This enables you to create more dynamic and flexible type definitions. Here's how it works:

type Transform<T> = T extends string ? number : T;

function transformValue<T>(value: T): Transform<T> {
  if (typeof value === "string") {
    return value.length;
  }
  return value;
}

// Usage
const result: number = transformValue("hello"); // Result: 5

The Transform type in the above instance accepts a type parameter T. If T is a string, the resulting type is number; otherwise, it is the same as T; if the input value is a string, it returns the length of the string (which is a number); otherwise, it returns the value as is. Because the input "hello" is a string, the result1 is inferred as a number.

Template Literal Types for String Manipulation: TypeScript's template literal types allow you to manipulate and construct new kinds by utilizing template strings in the same way that template literals operate with strings at runtime. Here's how you can use template literal types to manipulate strings:

type Capitalize<S extends string> = `${Uppercase<S>[0]}${Lowercase<S> extends `${infer L}${infer R}` ? R : ""}`;

type CapitalizedHello = Capitalize<"hello">; // Result: "Hello"

Here's a breakdown of the Capitalize type:

${Uppercase[0]}: This part extracts the first letter of S and converts it to uppercase using the Uppercase utility type. It uses indexing [0] to get the first character.

${S extends ${infer First}${infer Rest} ? Rest : ""}: This part checks if S can be split into ${First}${Rest} using the template literal syntax. If it can, it takes the Rest part (which is the remaining characters of the string after the first character) and adds it to the result. If not, it adds an empty string.

Inferring Tuple Element Types Inferring tuple element types is another powerful feature in TypeScript that allows you to extract and infer the individual types of elements within a tuple. This is particularly useful when you want to create functions that operate on tuples and preserve type information. Here's how it works:

function getFirstAndLast<T extends any[]>(arr: T): [T[0], T[number]] {
  return [arr[0], arr[arr.length - 1]];
}

// Usage
const result = getFirstAndLast([1, 2, 3]); // Result: [1, 3]

From the code above example, the function getFirstAndLast takes an input arr of type T, which is a tuple type due to the restriction T extends any[]. The function's return type is a tuple, with the first element's type being T[0] and the second element's type being Tnumber. Lastly typeScript infers that the result is of type [number, number] because the input array [1, 2, 3] is inferred as a tuple of numbers.

Distributive Conditional Types: Distributive conditional types are a fascinating feature in TypeScript that enable type transformations to be applied to each element of a union type separately. This distribution happens automatically when a conditional type is used with a union type. Let's delve into this concept:

Consider the following example of a distributive conditional type:

type StringOrNumber<T> = T extends string ? string : number;

type Distributed = StringOrNumber<"a" | "b">; // Result: "a" | "b"

The StringOrNumber type in this example accepts a type parameter T. It examines whether T extends (is assignable to) string within the conditional type. The type evaluates to string if true; else, it evaluates to number.

This is where distribution comes into play. When you apply StringOrNumber to a union type, such as "a" | "b", TypeScript applies the conditional type to each element of the union independently. To put it another way, it spreads the conditional type among the union elements.

Conclusion

TypeScript is a complex programming language with advanced functionality beyond the fundamentals. Exploring these lesser-known approaches might help you uncover new levels of expressiveness, maintainability, and flexibility in your software.