Typescript – Step by Step Guide to setup with React

If you’re a React developer, you might have heard of TypeScript, a popular programming language that adds static typing to JavaScript. Using TypeScript with React can help you write more maintainable code, catch errors earlier, and improve your overall development experience. In this guide, we’ll go through the step-by-step process of setting up a React project with TypeScript.

Prerequisites

Before we start, make sure you have the following installed on your machine:

• Node.js
• npm or yarn

Step 1: Create a new React app

The first step is to create a new React app using create-react-app. Open your terminal and run the following command:

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

This will create a new React app with TypeScript support. The --template typescript flag tells create-react-app to set up the project with TypeScript.

Step 2: Remove unnecessary files

By default, create-react-app generates some files that we don’t need for a TypeScript project. Delete the following files:

• src/App.css
• src/App.test.tsx
• src/index.css
• src/logo.svg
• public/logo192.png
• public/logo512.png
• public/manifest.json
• public/robots.txt

Step 3: Update App.tsx

Open src/App.tsx and replace the contents with the following code:

import React from 'react';

const App: React.FC = () => {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
};

export default App;

This is a simple React component that renders a div with an h1 tag.

Step 4: Start the app

Now that we have our app set up with TypeScript, we can start it by running the following command:

npm start

This will start the development server and open your browser to http://localhost:3000. You should see the “Hello, World!” message rendered on the page.

Create a Button component with React Typescript

If you’re building a React app with TypeScript, you might be wondering how to create a button component with TypeScript. In this section, we’ll walk you through the process step by step.

First, let’s create a new file called Button.tsx in the src/components directory. Here’s what the code for our Buttoncomponent will look like:

import React from 'react';

type ButtonProps = {
  onClick: () => void;
  text: string;
};

const Button: React.FC<ButtonProps> = ({ onClick, text }) => {
  return (
    <button onClick={onClick}>
      {text}
    </button>
  );
};

export default Button;

In the above code, we define a ButtonProps interface that describes the props that our component expects. We then define a Button component that accepts these props and renders a button with the provided text prop. When the button is clicked, the onClick function is called.

To use our Button component, we can import it into our App.tsx file and render it like this:

import React from 'react';
import Button from './components/Button';

const App: React.FC = () => {
  const handleClick = () => {
    console.log('Button clicked!');
  };

  return (
    <div>
      <Button onClick={handleClick} text="Click me!" />
    </div>
  );
};

export default App;

In the above code, we import our Button component and render it with an onClick function and some text. When the button is clicked, the handleClick function is called and logs a message to the console.

To create a Counter component using the Button component in React TypeScript, we can create a new file called Counter.tsx in the src/components directory with the following code:

import React, { useState } from 'react';
import Button from './Button';

const Counter: React.FC = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h2>Counter: {count}</h2>
      <Button onClick={increment} text="+" />
      <Button onClick={decrement} text="-" />
    </div>
  );
};

export default Counter;

In the above code, we define a Counter component that uses the useState hook to manage a count state variable. We also define increment and decrement functions that update the count variable when the buttons are clicked.

To use the Button component in our Counter component, we import it and render it with the appropriate onClickfunction and text. We also render the current value of count in an h2 tag.

We can then import our Counter component into our App.tsx file and render it like this:

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

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

export default App;

In the above code, we import our Counter component and render it in our app.

And that’s it! You’ve successfully created a Counter component using the Button component in React and TypeScript. Now you can use these components throughout your app to create reusable and type-safe UI elements.

And that’s it! You’ve successfully created a button component with React and TypeScript. Now you can use this component throughout your app to create reusable and type-safe buttons.

Conclusion

That’s it! You’ve successfully set up a React project with TypeScript. From here, you can start building your app using TypeScript and take advantage of its many features.