Tutorials on React

When dealing with user interactions, you often need to handle some user events like mouse clicks, keyboard input, etc. Unlike with mouse events , TypeScript doesn't provide type declarations for an InputEvent . However, you can use KeyboardEvent for tracking keypresses: ... ChangeEvent for tracking input changes:

When dealing with user interactions, you often need to handle some user events like mouse clicks, keyboard input, etc. To handle mouse event in React you can use MouseEvent type to declare types on handler event argument: You can specify the element on which an event is being handled. It improves the type-safety and shrinks possible properties and methods to those that apply to a given element.

The useCallback hook returns a memoized callback that only changes if one of the dependencies has changed. This helps us to avoid unwanted and unnecessary components re-renders. The basic syntax for the useCallback hook is: You don't need any additional typings since TypeScript knows that useCallback accepts a function and an array of dependencies.

Chances are you, if you've ever looked at a React component, you've seen JavaScript that looks like this: What is that stuff that looks like HTML or XML? That's called JSX and it stands for JavaScript eXtension. It might seem weird to have XML tags in your JavaScript, but it turns out to be super useful. By the end of this blog post, you'll have a solid understanding of what JSX is, and how we'll use it to build powerful React apps. All of our React components have a render function that specifies what the HTML output of our React component will be. JSX is a "language extension" that allows us to write JavaScript that looks like HTML.

Let's talk a bit about props and state , two core concepts in React that we'll use in every React application. The short of it is, props are like the "arguments" (or properties ) that you pass into your components and state stores "component-local data". Let's look at an example to make it concrete: Let's say that we have a <Header /> component that includes a title. The code might look something like this:

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:

In this article, we will learn how to use react-redux hooks with TypeScript to build a note taking app.

In this article, we will learn how to handle file uploads using react-hook-form.

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:

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 must extend the Reducer<State, Action> type, which is a function that takes a state and an action as arguments, updates the state, and returns the updated state:

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 type-parameter, that will tell TypeScript what type is acceptable for this ref.

React Context provides a way to pass data through the component tree without having to pass props down manually at every level. Use it when you need to share data “globally”, between many components on different levels to a component tree. To create a context use React.createContext :

When you need to store some data that won't be shared across components you can use the local component state. To use state in functional component use useState hook. This hook returns a tuple of two values. The first one is the current value of the state, the second one is a function to update the state. You can also increase type-safety declaring what types a state accepts:

TypeScript is fantastic to use with React because it can help us catch a lot of bugs we wouldn't catch otherwise. It helps our team have good documentation and it makes React easier to use (over the long term). But there were a lot of things I didn't understand in the beginning that I wish someone would have explained to me. In this post, I'm going to walk you through the basics of using TypeScript and React, with code.

In this post, we will dive into a technique for sharing data between React components using Context . While we usually use props to pass values, that doesn't always work if we have components in different parts of our component tree. We can use Context to share these values anywhere in our app (and we can use TypeScript to type them). Below, I'm going to show you:

Thinking in React can feel weird if you're not used to it. In this post, I'm going to show you a React-way to think about and use the native browser's APIs and hook them into your React app. Specifically, I'm going to show you how to listen for keystrokes in a React-y way. Keyboard shortcuts are making a comeback in webapps -- but this pattern is more than listening for keystrokes: it's a way of thinking: the React Way. Here's what we're going to build:

In this post, we'll cover React Reducers (with the useReducer hook). This tutorial will help you understand: By the way, this is an intermediate React topic. We cover this more in depth in Fullstack React with TypeScript . We just added a bunch of new content on how to use SSR with Next.js to the book. Check it out .

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 third-party library called web-vitals .

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:

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.

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 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.

In this article, we'll cover two ways to create React forms: the HTML way, with uncontrolled components, and the best practice, with controlled components.We'll discuss concepts such as: what are controlled and uncontrolled components, main tags used in a React form, and form validation and submission.

Props in React are like function arguments. They are passed in a component so it knows the data to work with. To define props create a new type where declare every prop that should be defined: The name for this type consists of 2 parts:

Create a new file with a component name, for example, Message.tsx . It is important to use the .tsx extension for the component to work properly. Inside, create a functional component as you would in plain React: Then, create a MessageProps type to define props that this component will accept. Use it to type passed props inside of a component:

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 ? :

When you develop an app you often use some third-party packages as dependencies. Not all of them are written in TypeScript, but many provide type declarations for a developer to be able to include those in a project. The biggest repository with type declarations is DefinitelyTyped . It contains type declarations for packages like React, Redux, Mobx, and many others. Some packages already have .d.ts files in them. These files contain type declarations. If your dependency package has it, you won't need to install types manually.

The Higher Order Component (HOC) pattern is used frequently in React libraries, so it's worth knowing. Below I'm going to show you what a HOC is, how to use one, and how to create your own.

In this post, we will discuss how to build a dropdown component in React. We will also add an animation to our dropdown.

In this post, we will be looking at Next.js app deployment on different types of servers and using different technologies, such as: We will go through deployment setup on each technology step by step and show the code. Some time ago web-developers shipped their applications in production by hand. They might use FTP or some other protocols to copy built application assets to production server. This approach has a lot of downsides.