React with TypeScript

Points to ponder

Read the below points before you start.

Components

The primary reason why we choose a frontend library like React is to create frontend components. When you imagine a web application most of the elements you see on every page will be similar, e.g.: like button, comment box, upload screen, etc. Then why copy the code everywhere and create a disaster? Imagine tomorrow your CEO says we want a dislike button everywhere. Horror!

React provides a way to create UI elements as components and use them anywhere like a html tag. Take commenting functionality for example. What if you can create your own <CommentBox> tag and use it everywhere your users are allowed to comment. When your CEO plans to add a dislike button, all you have to do is change it in one place. That is the power of React.

Functional components

As we have established we need components for reusing in different places, we also need to keep in mind that same component can behave differently, based on where it is used. A comment in a story and a comment in a post may trigger different backend logic. So what we need is a function that takes customization parameters and gives back a html coded UI.

What comes to your mind when we talk about functions? Programming. When we are dealing with functions, parameters and return statements we need the help of a programming language. JavaScript was chosen for React. So React files will always have a file extension prefix of js or ts if it is TypeScript. We will learn about these in this lesson.

To make web development even more simple, React introduced a format called .jsx or .tsx (TypeScript extension) extending the capability of JavaScript file to contain HTML code. This way you have just 1 file for your code and your UI. Super cool, right? An example of such a functional component file is given below.

export default function CollectionCard({name, href, imageSrc, imageAlt}: {
    name: string;
    href: string;
    imageSrc: string;
    imageAlt?: string
}) {
    return (
        <div className="group relative">
            <div
                className="h-96 overflow-hidden rounded-lg group-hover:opacity-75 sm:aspect-h-5 sm:aspect-w-4 sm:h-auto">
                <img
                    src={imageSrc}
                    alt={imageAlt}
                    className="h-full w-full object-cover object-center"
                />
            </div>
            <h3 className="mt-6 font-semibold text-gray-500">
                <a href={href}>
                    <span className="absolute inset-0"></span>
                    {name}
                </a>
            </h3>
        </div>
    );
}

Did you notice I have created the exact same component we created in HTML. Only now I am using TypeScript to define it as a dynamic component. The reason why it is dynamic is because anyone can reuse it with different properties. Ignoring the folders src and components, Let us analyze the code.

1. Create a folder where the components fits better. This is the toughest part than programming, seriously! As this collection card will not be used anywhere except home page I am keeping it under home folder along with other components for home page.
2. Then you need to create a file named component-name.tsx to create a TypeScript component. TypeScript is insisted because it is widely adapted in the industry. Some companies might follow PascalCase for the naming (ComponentName.tsx), so please adapt.
3. React prefers functional components. So inside the file declare a function with name of the component in PascalCase. Imagine this as exposing your component as a function, so that the caller can pass parameters and get UI element in response.
4. Function has parameters like name, href, imageSrc and imageAlt and the other side of the declaration are the types. You can see that there is a ?: in imageAlt parameter, the ? makes it an optional parameter.
5. The immediate next line after the function declaration is the return statement. And the component returns the html code itself.
6. Functional parameters can be used inside the html code, with a { } enclosing the parameter name. When React returns the UI it computes the value and replaces it with actual value. You can see this in lines where I have used parameters like name, href etc.