Alex Bespoyasov
@bespoyasov
Contributed IDE list
No IDE contribution for now
User's comments
0
articles
How to Use Thunks with Redux Toolkit and TypeScript
Last time we used Redux Toolkit to create a todo app. Since RTK is considered to be the standard way to write redux applications, we will use thunks with Redux Toolkit to write asynchronous logic as well. Thunks are a way to manage side effects when working with Redux. For instance, when we want to…Sep 20th 2022
Setting Up Dependency Injection with TypeScript in an Object-Oriented Way
The last letter in SOLID is a Dependencies Inversion Principle. It helps us decouple software modules so that it is easier to replace one module with another. The dependency injection pattern allows us to follow this principle. In this post, you will learn what dependency injection is, why it is…Dec 21st 2020How to Test Your First React Hook Using Testing Library
In previous posts we learned: In this post, we're going to write tests for a custom React hook. We're going to create a custom hook that will uppercase a given text string. This hook will be connected to an input and whenever a user changes the input value this hook will automatically uppercase the…Mar 24th 2021
How to Write Your First Component Test in React + TypeScript App
In the previous post, we created a unit test for a function. In this post, we're going to create a unit test for a component using @testing-library/react. Since we're using Create React App the React Testing Library is already installed in our dependencies. If you don't have it, install the package…Mar 12th 2021How to Use fetch with TypeScript
The main problem with fetch function is that it isn't a generic function. This makes it harder to type response data without writing additional wrappers. We can create a wrapper-module to avoid this problem. Let's create a function request that will handle network requests:Feb 15th 2023How to Use Redux Toolkit with TypeScript
The Redux Toolkit package is intended to be the standard way to write Redux logic. It simplifies the store creation and decreases the amount of boilerplate code. Let's rewrite the application we wrote in one of the earlier posts from scratch to see what will change. First of all, we need to create…Sep 20th 2022How to Handle Effects Using Hooks in React with TypeScript
There are 2 hooks to handle side-effects in React: The first one fires after layout and paint, during a deferred event. The second one works synchronously before the next paint, and used to handle effects that are visible to a user. The useEffect hook accepts 2 arguments:Dec 2nd 2020How to Use useReducer with TypeScript
The useReducer hook is a hook that allows you to create a state, update it, and share its data across different components. (Its core logic is similar to Redux.) It takes a reducer-function and an initial state as arguments and returns a tuple of a new state and a dispatch function. The reducer…Dec 2nd 2020How to Use useMemo Hook with TypeScript
The useMemo hook memoizes a function value. It is similar to caching the return value of a function so that the function doesn't get executed if given the same arguments. It helps us to avoid expensive recalculations and speeds up an application. useMemo takes 2 arguments:Dec 7th 2020Measuring Performance in Create React App
Create React App includes a built-in tool for measuring the real life performance of your app. It is called reportWebVitals and it measures a set of metrics that aim to capture the user experience of a web page. This set is called web vitals and includes: Under the hood Create React App uses a…Nov 30th 2020How to Use Generics in TypeScript
Generics in TypeScript is a way to make your code more abstract and reusable. Let's say you want to create a function that returns a first element from a given list: How to type it? We cannot know beforehand list of what type will be given.Dec 10th 2020
How to create a React TypeScript application from scratch
Create a new project directory and navigate there: Init this directory as an npm-package. It will allow you to install third-party packages such as React and TypeScript later: Install React, React-DOM and TypeScript:Nov 30th 2020How to create react typescript application with Create React App
The easiest way to create a new app with TypeScript using Create React App is to run this command in a console: Or if you use yarn: Where npx is a package runner that comes with npm 5.2+ and higher. It executes packages like create-react-app or eslint and such.Nov 30th 2020
How to Define Props with Children in React + TypeScript App
There are multiple ways to define props with children. You can declare children prop on your props type and assign the ReactNode type to it: If children should be optional, you can mark it with the ?:Nov 4th 2020How to Use Redux with TypeScript
TypeScript can provide type-safety for reducers in your application, improves the documentation of your code, and overall improves long-term maintainability. Also, Redux officially recommends using static typing in their docs. Let's re-implement a todolist app. It is a basic example that many are…Dec 23rd 2020How to a create class component using TypeScript
Create a new file with a component name, for example, Counter.tsx. Inside, create a class component as you would in plain React: Then, create a CounterProps type to define props that the component will accept and a CounterState type to type the state of a component if it has one.Nov 30th 2020How to add TypeScript to existing application built with Create React App
If you already have an app built with create-react-app, you can add TypeScript by installing it and type definitions for all the installed packages: Or if you use yarn: This command will add TypeScript to your project and provide type definitions for react, react-dom and jest—packages used in…Nov 30th 2020How to Use React Refs with TypeScript
Refs provide a way to access DOM nodes or React elements created in the render method. Also, they can be used to store some references to entities or objects for accessing them later. To use refs with functional components use a special useRef hook. It is a generic function, so we can pass a…Dec 2nd 2020How to Use react-hook-form with TypeScript
React Hook Form is a library that helps you to simplify form validation. It uses React hooks to inject required validation checks and to bind a form and a submit handler. Let's create a signup form with React Hook Form and then type it with TypeScript. Out form will contain 3 fields:Dec 15th 2020How to Write Your First Unit Test in React + TypeScript App
Tests make sure that changes in code don't break its functionality. For testing an app, we need a test runner. Create React App provides us a test runner called jest. Let's create a new app and inspect what it contains. The src directory contains all the app code and a file called App.test.tsx.…Feb 25th 2021
courses
bespoyasov hasn't published any courses
