Context API is a feature added in Reacy 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.

s 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

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

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.

Works