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

At the moment the missus uses a worksheet to store her tasks and meeting notes for her work. This application will help her store it on a cloud database for portability and additional features that she wants like sorting by categories or adding priority level to her task.

My goal for this project is to learn the NextJs Server Component use Appwrite as my database and do all my code using Typescript.

A task list application for storing work-related tasks and notes. Unlike a simple to-do list application this will be able to add categories and priorities for sorting and reporting purposes. 

Tasks List

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.

Hi, I'm Owa Aquino.

👉 This website is here to help me become a better developer.

💻 What I'm working on

Tasks List

Portfolio v3

📝Latest Posts

TS for React: Prop Types

Learning React Context API

TS Basic: Literal Types