DEV Community: Muhammad Ridho Anshory

JSX Element, React Node, React Element

Muhammad Ridho Anshory — Sat, 12 Mar 2022 00:12:52 +0000

I am currently migrating a React application to TypeScript. So far, this works pretty well, but I have a problem with the return types of my render functions, specifically in my functional components.

Cut a long story short, I have these questions during my learning process:

What is the difference between JSX.Element, ReactNode and ReactElement?
Why do the render methods of class components return ReactNode, but functional components return ReactElement?

What is the difference between `JSX.Element`, `ReactNode` and `ReactElement`?

A ReactElement is an object with a type and props.

type Key = string | number

 interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> {
    type: T;
    props: P;
    key: Key | null;
}

A ReactNode is a ReactElement, a ReactFragment, a string, a number or an array of ReactNodes, or null, or undefined, or a boolean:

type ReactText = string | number;
type ReactChild = ReactElement | ReactText;

interface ReactNodeArray extends Array<ReactNode> {}
type ReactFragment = {} | ReactNodeArray;

type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

JSX.Element is a ReactElement, with the generic type for props and type being any. It exists, as various libraries can implement JSX in their own way, therefore JSX is a global namespace that then gets set by the library, React sets it like this:

declare global {
  namespace JSX {
    interface Element extends React.ReactElement<any, any> { }
  }
}

By example:

<p> // <- ReactElement = JSX.Element
   <Custom> // <- ReactElement = JSX.Element
     {true && "test"} // <- ReactNode
  </Custom>
 </p>

Why do the `render` methods of class components return `ReactNode`, but functional components return `ReactElement`?

they do return different things. Components return:

render(): ReactNode;

tl;dr: It is a current TS type incompatibility not related to core React.

TS class component: returns ReactNode with render(), more permissive than React/JS
TS function component: returns JSX.Element | null, more restrictive than React/JS

In principle, render() in React/JS class components supports the same return types as a function component. With regard to TS, the different types are a type inconsistency still kept due to historical reasons and the need for backwards compatibility.

Ideally a valid return type would probably look more like this:

type ComponentReturnType = ReactElement | Array<ComponentReturnType> | string | number
  | boolean | null // Note: undefined is invalid

If you guys have other thoughts leave a comment I'll update the post base on your solutions as well.. cheers🍻

Git Basic Commands

Muhammad Ridho Anshory — Sun, 20 Feb 2022 23:07:19 +0000

About this article

In this article, I will share with you guys what are the basic commands when using git CLI.

I know who did what, when, and why. -Git

Git: configurations
Git: starting a repository
Git: staging files
Git: committing to a repository
Git: pulling and pushing from and to repositories
Git: branching

Git: configurations

git config <followed with>

followed with:

--global user.name "FirstName LastName"
--global user.name "yourEmail@email.com"
--global color.ui true
--list

Git: starting a repository

git init
git status

Git: staging files

adding files to staging area

git add <fileName>
git add <fileName> <anotherFileName>
git add .
git add --all
git add -A

removes a file from the staging area

git rm --cached <fileName>

discard change or reset the file

git reset <fileName>

Git: committing to a repository

Appendix:

-m → stands for a message

git commit -m "Add three files"

undo the last Git commit

git reset --soft HEAD^

Git: pulling and pushing from and to repositories

Appendix:

-u → add upstream (tracking) reference

git remote add origin <link> //Adding a remote repository
git push -u origin master //pushes all your branches to the origin.
git clone <cloneURL> // clone a repository
git pull // download all the changes

Git: branching

git branch // current branch
git branch <branchName> // create a branch
git checkout <branchName> // change current branch
git merge <branchName> // merge branchName to current branch
git checkout -b <branchName> // create and checkout a new branch

If you guys have other thoughts leave a comment I'll update the post base on your solutions as well.. cheers🍻

Interface vs Type in Typescript

Muhammad Ridho Anshory — Sun, 13 Feb 2022 13:17:02 +0000

My personal convention, which I describe below, is this:

Always prefer interface over type.

When to use `type`?

Use type when defining an alias for primitive types (string, boolean, number, bigint, symbol, etc)
Use type when defining tuple types
Use type when defining function types
Use type when defining a union
Use type when trying to overload functions in object types via composition
Use type when needing to take advantage of mapped types

Additions:

Generic Transformations

Use the type when you are transforming multiple types into a single generic type.

Example:

type Nullable<T> = T | null | undefined
type NonNull<T> = T extends (null | undefined) ? never : T

Type Aliasing

We can use the type for creating the aliases for long or complicated types that are hard to read as well as inconvenient to type again and again.

Example:

type Primitive = number | string | boolean | null | undefined

Creating an alias like this makes the code more concise and readable.

Type Capturing

Use the type to capture the type of an object when the type is unknown.

Example:

const orange = { color: "Orange", vitamin: "C"}
type Fruit = typeof orange
let apple: Fruit

Here, we get the unknown type of orange, call it a Fruit and then use the Fruit to create a new type-safe object apple.

When to use `interface`?

Use interface for all object types where using type is not required (see above)
Use interface when you want to take advantage of declaration merging.

Additions:

Polymorphism

An interface is a contract to implement a shape of the data. Use the interface to make it clear that it is intended to be implemented and used as a contract about how the object will be used.

Example:

interface Bird {
    size: number
    fly(): void
    sleep(): void
}

class Hummingbird implements Bird { ... }
class Bellbird implements Bird { ... }

Though you can use the type to achieve this, the Typescript is seen more as an object oriented language and the interface has a special place in object oriented languages. It's easier to read the code with interface when you are working in a team environment or contributing to the open source community. It's easy on the new programmers coming from the other object oriented languages too.

The official Typescript documentation also says:

... we recommend using an interface over a type alias when possible.

This also suggests that the type is more intended for creating type aliases than creating the types themselves.

Declaration Merging

You can use the declaration merging feature of the interface for adding new properties and methods to an already declared interface. This is useful for the ambient type declarations of third party libraries. When some declarations are missing for a third party library, you can declare the interface again with the same name and add new properties and methods.

Example:

We can extend the above Bird interface to include new declarations.

interface Bird {
    color: string
    eat(): void
}

That's it! It's easier to remember when to use what than getting lost in subtle differences between the two.

PS: According to TypeScript handbook the answer is:

Almost all features of an interface are available in type.The key distinction is that a type cannot be re-opened to add new properties vs an interface which is always extendable.

UI Components: How to make Outline Gradient Button with Transparent Background🤷‍♂️

Muhammad Ridho Anshory — Thu, 10 Feb 2022 12:57:35 +0000

During developing 🧑‍💻 website’s at my workplace, I was facing some difficulty when it comes to outlining some div or button with gradient color. After hours crawling on google, I find the solutions..

I wanted to share my thought about it and maybe you guys have another different approach to really save our time ⏰ solving the issues.

Goal🎯

So, on this article the goal 🎯 was making an Outlined Gradient Button with Transparent Background aka with opacity

here’s the spell 🧙‍♂️ what is it look like in CodePen ✍️

If you guys have another thoughts leave a comment I'll update the post base on your solutions as well.. cheers🍻

Next.JS + MUI v5 + TypeScript + Scss + Storybook Starter 📕

Muhammad Ridho Anshory — Thu, 13 Jan 2022 13:26:29 +0000

Lately, I was building a Next.js, MUI v5, TypeScript, Scss and Storybook for projects. I wanted to have a modern starter repository to speed up my development. A new boiler plate for Next.js with type checking (TypeScript), configured linter (ESlint), configured code formatter (Prettier), Sass / Scss for CSS framework with Material UI v5 theming, also Storybook to build streamlines UI development, testing, and documentation.

You can check a live demo at this url : click me!

You can also check the source code 📕 on GitHub: nextjs-ts-mui5-scss-storybook-starter

Here is the list of major feature:

✍️ code snippet for react and next.js that I personally use
🎨 pre-configured Sass, MUI v5, and Storybook. You just need to focus on building your components
⌨️ Type checking with TypeScript
✏️ Linter with Eslint and Prettier also simple-import

Please leave a star ⭐ or some comment if there's a issue! Thanks ✌️

Hi my new post

Muhammad Ridho Anshory — Sun, 02 Jan 2022 09:18:47 +0000

How to write hello World

DEV Community: Muhammad Ridho Anshory

JSX Element, React Node, React Element

What is the difference between JSX.Element, ReactNode and ReactElement?

Why do the render methods of class components return ReactNode, but functional components return ReactElement?

Git Basic Commands

About this article

Table of Contents

Git: configurations

Git: starting a repository

Git: staging files

Git: committing to a repository

Git: pulling and pushing from and to repositories

Git: branching

Interface vs Type in Typescript

When to use type?

When to use interface?

UI Components: How to make Outline Gradient Button with Transparent Background🤷‍♂️

Goal🎯

Next.JS + MUI v5 + TypeScript + Scss + Storybook Starter 📕

Hi my new post

What is the difference between `JSX.Element`, `ReactNode` and `ReactElement`?

Why do the `render` methods of class components return `ReactNode`, but functional components return `ReactElement`?

When to use `type`?

When to use `interface`?