Props and State in React with TypeScript

React is a popular JavaScript library used for building web applications. It uses a virtual DOM (Document Object Model) to efficiently update the UI of an application in response to changes in data. React also provides developers with two important concepts to manage data within components: props and state. In this tutorial, we will explore how to use props and state in React with TypeScript.

Prerequisites

Before we start, make sure that you have the following installed:

1. Node.js
2. npm or yarn
3. A code editor of your choice

Setting up a React project with TypeScript

To create a new React project with TypeScript, you can use the create-react-app command. Open your terminal and run the following command:

npx create-react-app my-app --template typescript

This will create a new React project called my-app with TypeScript support. Once the installation is complete, you can navigate to the project directory and start the development server by running the following commands:

cd my-app
npm start

This will start the development server at http://localhost:3000.

Using Props in React with TypeScript

Props are used to pass data from a parent component to a child component in React. In TypeScript, we can define the type of props using an interface. Let's create a simple HelloWorld component that takes a name prop and displays a greeting message.

import React from 'react';

interface Props {
  name: string;
}

const HelloWorld: React.FC<Props> = ({ name }) => {
  return <div>Hello, {name}!</div>;
};

export default HelloWorld;

In the above code, we have defined an interface Props that defines the type of the name prop. We have also used the React.FC type to specify that the component is a function component that takes Props as its props.

To use the HelloWorld component, we can pass the name prop as follows:

import React from 'react';
import HelloWorld from './HelloWorld';

const App: React.FC = () => {
  return <HelloWorld name="John" />;
};

export default App;

In this example, we have imported the HelloWorld component and used it in the App component by passing the name prop with the value "John".

Using State in React with TypeScript

State is used to manage data within a component in React. In TypeScript, we can define the type of state using an interface. Let's create a simple Counter component that displays a count and provides buttons to increment and decrement the count.

import React, { useState } from 'react';

interface State {
  count: number;
}

const Counter: React.FC = () => {
  const [state, setState] = useState<State>({ count: 0 });

  const increment = () => {
    setState({ count: state.count + 1 });
  };

  const decrement = () => {
    setState({ count: state.count - 1 });
  };

  return (
    <div>
      <div>Count: {state.count}</div>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
};

export default Counter;

In the above code, we have defined an interface State that defines the type of the state, which is an object with a count property. We have also used the useState hook to initialize the state to an object with a count property set to 0.

We have defined two functions, increment and decrement, that update the state by calling the `setState' function with a new object that contains the updated count value. Finally, we have rendered the current count and two buttons that call the increment and decrement functions respectively.

To use the Counter component, we can simply import it and use it in our App component:

import React from 'react';
import Counter from './Counter';

const App: React.FC = () => {
  return <Counter />;
};

export default App;

Conclusion

In this tutorial, we have learned how to use props and state in React with TypeScript. Props are used to pass data from a parent component to a child component, and state is used to manage data within a component. By defining the types of props and state using interfaces, we can ensure type safety in our React components.

In addition to props and state, React also provides other important concepts such as hooks, context, and lifecycle methods, which we can use to build complex and interactive web applications. With TypeScript, we can enhance the development experience by catching type errors early and providing better code completion and documentation.