React TypeScript Examples

React TypeScript Examples

React TypeScript component with State and Events React TypeScript Parent - Child components example React TypeScript stateless Function component example

React TypeScript stateless Function component example

In the previous post, we saw on how to create a React component with state and event handlers using TypeScript. We can also create simple function components using TypeScript which does not require a state. Usually, these types of components are used for UI components. Class components with the state are used for container components and Function components are used for UI only components which do not interact with the state containers.

In this post, we will see how to create a simple Hello World function component in React using TypeScript.

React TypeScript Parent - Child components example

In the previous post we saw a React class component written in TypeScript, the component had state support and event handling (button click event and text change event). The component has a textbox and a button, we handle the onChange event of the textbox set the value in the name state property. We capture the onClick event of the button and set a greeting text in the message state object, this message is displayed in the screen

In this post we will alter this component a bit so that the greeting message is passed as a property from the parent component.

React TypeScript component with State and Events

In the previous post we saw on how to do a simple Hello World application in React with TypeScript using the create-react-app package. In this post we will move on the next step we will add state support and event handling (button click event and text change event) to the component.

The React component initializes state, notice that we are using the State interface with strongly types properties to define the state object, this is the advantage of TypeScript it allows us to define strongly typed properties which help us capture type errors during development. The state object has 2 properties message and name.

React ref overview

React ref overview

Refs in React React ref example React ref for components example What is ReactDOM.findDOMNode React callback ref example

React Component Lifecycle methods examples

React Component Lifecycle methods examples

ComponentDidMount example getDerivedStateFromProps example componentWillReceiveProps example shouldComponentUpdate example componentDidCatch example

React Component Lifecycle Overview

React Component Lifecycle Overview

What is React Component Lifecycle React Component Lifecycle Mounting React Component Lifecycle Updating React Component Lifecycle UnMounting React Component Lifecycle Error Handling React Component Lifecycle - Constructor React Component Lifecycle - Render React Component Lifecycle - getDerivedStateFromProps React Component Lifecycle - componentDidMount React Component Lifecycle - shouldComponentUpdate React Component Lifecycle - getSnapshotBeforeUpdate React Component Lifecycle - componentDidUpdate React Component Lifecycle - componentWillUnmount React Component Lifecycle - componentDidCatch

React ES6 Examples

React ES6 Examples

Basic HelloWorld example in React Basic Component example in React Parent - Child components example in React Functional stateless component example in React Inline styles example in React Inline styles without classes example in React CSS Module styles example in React state example in React setState example in React event handlers example in React props example in React string refs example in React createRef API example in React Callback Refs example in React forwardRef Refs example in React

React 16 Fragments, Portals & Error boundaries

React 16 Fragments, Portals & Error boundaries

What's new in React 16.0 Fragments in React v16 Error boundaries in React v16 Portals in React v16 Server Side Rendering in React v16 What's new in React 16.2

React Overview

React Overview

What is React? Advantages of React React version History

React TypeScript Environment Setup

React TypeScript Environment Setup

Set up React dev Environment using Webpack and TypeScript HelloWorld example in React with TypeScript HelloWorld create-react-app Application using TypeScript

HelloWorld create-react-app Application using TypeScript

In the previous post we saw on how to setup a React Application using TypeScript and webpack, in that post we manually installed the required npm packages, created the config files and the React component files from scratch, this was a good way to know how React application builds and executes, but it takes time to do this setup.

In this post we will use the create-react-app package from Facebook to quickly create a React application using TypeScript.

Open a command prompt and run the following command.

HelloWorld example in React with TypeScript

In the previous post we did setup the Development environment to develop React applications using TypeScript. In this post we will use this environment and create a Hello World React application using TypeScript.

Assuming we have a root folder and the environment setup with required npm packages installed and config files we will go ahead and create the Application files. First let us create the following folder structure for the React components.

Set up React dev Environment using Webpack and TypeScript

In the previous posts we saw on how to create React Applications using JavaScript and JSX. We can also write react applications using TypeScript. The build environment setup will be different when we use TypeScript.

When we created React Applications using JavaScript (ES6) we used the Bable loaders to transpile ES6 code into browser compatible JavaScript code, in case of TypeScript we will have to use a TypeScript loader (ts-loader) instead of Bable.  In this post we shall see in details on how to setup the environment for creating React applications using TypeScript.

First to start with let us create a new project by running npm init

Setting up React dev Environment using Webpack and babel

Modern web development frameworks like Angular / React are complex and involves complex environment setup before we could write our Hello World program. Setting up the development environment for React is a tedious task. In this post we will try to set up the development environment and display Hello World using a react component.

1. First let us create a folder ReactHelloWorld, we will setup the environment and create the Hello World component in this folder.

2. Next make sure node is installed in the pc, if not installed already install the latest version of Node.js. We can check if Node is installed by running the command node –v, if Node is installed this command will return the version of Node.js Installed in the pc.

ReactHelloWorld>node –v
v8.12.0

React Component Lifecycle - componentDidCatch

The componentDidCatch life-cycle method is used to create special Error Boundary components. Prior to react v16.0 there was not structured way of error handling, if a component throws an exception then the application will crash and we might have to refresh the page.

To overcome this React v16.0 introduces error boundaries. Error boundaries are special components which catch errors in its child component hierarchy and display a custom error / fallback UI. Error boundaries handle any errors in the render(), constructor or any of the component life cycle methods in its child component hierarchy.

React Component Lifecycle - componentWillUnmount

The componentWillUnmount life-cycle method will be called when a component is being removed from DOM. This method can be used to perform any required cleanup operation like cancelling pending network requests, cancelling subscriptions etc.

This is the only life-cycle method invoked in the component un-mounting phase.

Below is the syntax for componentWillUnmount

componentWillUnmount() {
  // perform cleanup operation here.
}

React Component Lifecycle - componentDidUpdate

The componentDidUpdate life-cycle method is the last life-cycle method invoked in the update phase. This method will be invoked after render() and can be used to operate on DOM after the component is updated. Similar to componentDidMount this method can be used to make Ajax/Api calls. Note that any change in the state/props due to the Ajax calls will re-trigger render(). We should make sure that any change to the state in this method is wrapped with proper conditions so as to avoid infinite loops.

shouldComponentUpdate example

The shouldComponentUpdate life-cycle method is invoked in the update phase before the render(). This method will be invoked when the component receives new state or props, this method can be used to prevent re-rendering of the component. If shouldComponentUpdate returns false then render() will not be triggered. By default render() will be called for any state change, this method can be used to override the default behavior and prevent re-rendering of the component.

The following example uses shouldComponentUpdate() to check the value of the state "counter", compares the previous value of the state and the current value of the state in the shouldComponentUpdate method and return true only when the state value is changed, this will trigger render(). If the state value of counter did not change it returns false and render() will not be called. We can check if render is called by looking at the console, since 'Render called.' is written to the console whenever render() is triggered.

React Component Lifecycle - shouldComponentUpdate

The shouldComponentUpdate life-cycle method is invoked in the update phase before the render(). This method will be invoked when the component receives new state or props, this method can be used to prevent re-rendering of the component. If shouldComponentUpdate returns false then render() will not be triggered. By default render() will be called for any state change, this method can be used to override the default behavior and prevent re-rendering of the component.

This method has access to this.state, nextState, this.props & nextProps, hence we can compare current state/props with next state/props and make a decision if we have to prevent re-rendering of the component. The purpose of this method is to help in preformance optimization by preventing re-rendering of components on specific conditions.

Below is the syntax for shouldComponentUpdate