HTML

react-typescript

Typescript

ChatGPT

styled-component

Study Notes

NextJs

groq

ReactJs

Javascript

After 4 years of Front-end Development, I decided to update my old portfolio website. 

For my new portfolio website, I planned to incorporate Nextjs and Sanityio. Additionally, I aim to include a feature where I can share updates on my web development journey, including blogs and showcase my work.

I am currently updating my portfolio website after three years of working as a front-end developer, utilizing ReactJs and NextJs.

Portfolio v3

ComponentProps are typically used when you want to create a component using a native html element like 

Can also use ComponentProps to get the props of a component ( reference 

https://www.totaltypescript.com/react-component-props-type-helper

Here are some basic type and useful prop types when using Typescript in React.

TS for React: Prop Types

Context API is a feature added in React 16.3 that allows to share states across the entire application.

Less prop drilling ( passing props down manually at every level )

particularly useful for managing global data that needs to be shared between multiple components

It can be useful as well to store data retrieved from external sources such as API or databases and make it available to all components.

is a component wrapped in the component tree that is responsible for providing the data ( state ) to its child components

 props, which is the data you want to share

typically you want to wrap your top-level component or a higher-level component with the context provider to make the data available to all its children components. Such as 

A component that consumes the data provided by the Context Provider.

will automatically re-render whenever the data it consumes changes to ensure it is up to date.

 accepts any kind of value ( even an object ).

Theming - change the appearance of your application from light to dark? put it into context so all its child components can update

Current Account - need to know the current logged-in user, and you need it for your components to use if the user has permission on the specific component

Routing - rerouting your user if it’s logged-in account has expired, or maybe you just want to redirect them to another part of your site.

Managing States - or you only want to pass some state to a lower component or maybe parent component?

https://react.dev/learn/passing-data-deeply-with-context#use-cases-for-context

How to use React Context API ( Theme toggling)

Let’s create a Theming Context that toggles our app theme from dark to light mode.

 - custom hooks that access theme and toggleTheme function.


 - component that will wrap in our application that will provide the theme state and the toggleTheme function

Use the Theme in our MainContent component

https://codesandbox.io/s/react-context-api-5pjh9p

Context API is a feature added in Reacy 16.3 that allows to share states across the entire application.

Learning React Context API

Literal types allow you to define exact values that a variable or property can take on.

by combining literals into a union, you can express a more useful concept

This feature provides more PRECISE TYPE CHECKING and helps enforce STRICTER constraints on the values that can be assigned.

literal types can also be used in combination with union types to create more complex constraints.

Using literal types, you can define and enforce specific values, making your code more EXPLICIT and catching potential errors at compile-time.

Literal Types allow you to SPECIFY that a variable or parameter MUST HAVE A PARTICULAR value

TS Basic: Literal Types

Sometimes you will have information about the type of value that TS can’t know about. Type assertions are used to explicitly specify the type of a value when the TS compiler is unable to infer it automatically.

They are simply a way to provide hints to the TS compiler for type checking during the compilation process

TS Basic: Type Assertion

Interface declaration is another way to name an object type.

TS is only concerned with the structure of the value we passed. It only cares that it has the expected properties. - Being concerned only with the structure and capabilities of type is why we call TS a structurally typed type system

Interface can also be extended to create a new interface based on the existing one.

 are most commonly used to define the structure of objects, they can also be applied to describe other types, such as function type and array type

TS Basic: Interfaces

Type aliases are a way of creating a custom name for your type variables, functions and objects for reusability and readability.

Type aliases can make your code more expressive and allow you to create reusable types that can simplify your type annotation throughout your codebase.

Note that aliases are only aliases - you cannot use type aliased to create different distinct "version" of the same type.

TS Basic: Type Aliases

Type annotation is where you can optionally add a type to explicitly specify the type of the variables, function ( parameters and return ), and objects.

TS allows to specify the type of both the input and the output

declare type annotation after each parameter to know/declare what types of parameters the function accepts

type annotation is declared after the parameter

even you don’t have the type annotation on your parameter. TS will still check that you passed the right number/s of arguments.

return type annotation is added after the parameter list

much like variable type annotation you usually don’t need a return annotation because TS will infer the function return type based on its return statement.

when a function appears in a place where TS can be determined how it's going to be called, the parameters of that function are automatically given type

contextual typing is a feature that allows the compiler to infer the type of an expression based on the surrounding context.

to define an object type we simply list its properties and their types

in JS if you access properties that don’t exist you get the value undefined rather than a runtime error.

the optional property is defined by using 

optional property is assigned as undefined

allows you to define a value can be one or several types

represent a value that can be a different type at different time

a union type is defined/created using the 

TS Basic: Type Annotation

My first time adding User Authentication / Login Logout integration to my client project was an awesome experience. I’ve always been just doing the CRUD, Component before and giving me the opportunity to do the Login credentials was pretty cool.

Anyway, these “how to’s” are what I’m basing my code from now on ( until I learn a better approach to do it ) going forward.

So the important thing about doing any kind of challenging task is to cut them down first into little pieces and then do them one at a time.

Here’s how the login authentication is built based on what I gather on the web:

Login Page ( UI ) - you have to have a small UI component to put down your username and password

Login Logic for forms - this includes the state management / or putting your login information and passing it to the API

Tokens & Session storage - when API sees your login information, it’ll usually respond with something that confirms that you have the correct details. Depending on your project, mine returns the user details and tokens. Which we need to access data and pages that require tokens or authentication to open.

Protect Routes - if we have multiple pages, we might need to protect some pages that require users' information and authentication before accessing. Protecting them with some kind of redirect is one that I have used on my current project.

Logout Function - removing any traces of user information on our browser.

Just a simple login form will do for this how to’s:

 function for our form to be able to change the input fields, then 

2. Interacting with the API with our credentials. We needed to know if we entered the correct or incorrect credentials and check if there’s a return data from our API. Back in our 

 function, we just wanted to see in our console what data our API is going to give to us.

 this object will depends on the server or API you are using, at this moment the API I’m using requires this headers and the credentials are required to be passed in the body.

We now have a basic Login page that responds to our entered credentials. We should have been able to see what kind of message/response it has and use that response to our application.

Usually, in any login authentication, the server will respond with a token, token expiration, and user details. With this information, we can store them in our browser's local storage to be used for application. 

Displaying the user details ( name ) in the frontend 

Using the tokens to get other API information we might need 

Logging off the app automatically when the token expires

Back on the handleSubmit function, we can store our login API response in the local storage.

Again depending on your API returned data, we can add them to our 

 to be used on different parts of our site. Now we have 

This one is where I struggled a lot when I was doing the user authentication as I was not really familiar with HOC ( High Order Component - more on that soon ) back then and still right now 😅 and Context API. We need to create some kind of a way to create restrictions/protection on some pages/routes that we wanted only logged-in users to view.

In this case, I’m just going to make sure the user can’t see the home page 

 that’s why in token and session storage, we redirect the user after logging in. Now we’ll create a way to make sure non-logged-in users can’t see our home page 

Let’s start by making sure that when a valid user logged in, we can access his data everywhere in our App. We’re going to use Context API here.

function here as well, so we can use it anywhere in our application in the future.

2. Create our High Order Component to make sure that if a non-logged in user cannot access our home page, and redirects to our login page. Basically, what we’re doing is creating a component that takes a component as an argument and returns a new component. With the new component, we’re checking first if the user has logged-in information and is valid before rendering the component. ( too much use of the word component here 🤣 ).

We just need to wrap this component in any pages we wanted to ask/require authentication.

 function. This will be easy as we just need to clear out the 

 that we created earlier when logging in.

 function into the component you needed it.

Congratulations! 🥳 Now you have a working user authentication component. 

This is how I did my first ever User Authentication task, and there is for sure a better approach than what I have, and there’s a better tool as well to use for easier user authentication. 

 where I see lot’s of developer is currently using for thier next.js authentication. 

Check out the whole code in my GitHub Repository: 

https://github.com/owaaquino/Login-Authentication

Login / Logout /  User Authentication

special type that you can use wherever you don’t want a particular value to cause type checking error

 disable all further type checking and it assumed you know the environment better than TS

useful when you don’t want to write out a long type just to convince TS that a particular line of code is okay

same as JS null and undefined TS null and undefined behave depending on whether 

a function that does not return any value

if you don’t specify and explicit return type and the function DOES NOT HAVE a return statement. The inferred return type would be 

 adds clarify and is a good practice for readability and maintainability

refers to any value that isn’t primitive

 but is safer because it’s not legal to do anything w/ an unknown value

 is often used in scenarios where the type is not known ahead of time or when working with dynamic type values

it provides a way to assign any values to a variable without losing type safety

 you’ll need to perform type checks or type assertion before you can use them as specific type. This is because TSC doesn’t have enough information to determine the exact type of the unknown value without additional checks.

by defining explicit type you make your codebase more maintainable

in return type this means that the function throws an exception or terminates the execution of the program

 also appears when TS determines that there’s nothing left in a union

Notes for Typescript different types and their use cases.

TS Basic: Everyday Types

Typescript is a tool that provides type-checking before you run your code. Javascript provides dynamic typing running the code to see what happens. TS predicts what code is expected before it runs.

TS will know what kind of type your variable is ( 

 is non-existent it’ll inform you right away before running your code

if you have an issue with your object it’ll tell you which object and what 

 it should be used instead of just throwing a 

tools that help find bugs 🐞 before our code runs.

describes the shape and behavior of what our values will be when we run our program

TS tells us when thing might be going off the rails 🚂

 TS will tell you the property does not exist and tell you the available property of the object 

uncalled function - throw errors on your uncalled/unused functions

Installation of TSC ( Typescript Compiler )

Bawas sa pagcheck sa console at browser kung may mali ba code mo.

Typescript is a tool that provides type-checking before you run your code.

Posts