Using TSX in a Vite Project

Tutorial 5 of 5

Using TSX in a Vite Project

1. Introduction

Goal of the Tutorial

This tutorial aims to guide you on how to use TSX (TypeScript with JSX) in a Vite project.

Learning Outcomes

By the end of this tutorial, you will be able to:
- Understand the basics of TSX and its application in a Vite project
- Configure a Vite project to support TSX
- Write TSX code in a Vite project

Prerequisites

Before proceeding with this tutorial, make sure you have:
- Basic understanding of TypeScript and React
- Node.js installed on your local machine
- Vite installed globally or in your project

2. Step-by-Step Guide

We'll start by creating a new Vite project with TypeScript and React.

npx create-vite my-app --template react-ts

Navigate to your project folder and install the required dependencies.

cd my-app
npm install

Enable TSX in Vite

To enable TSX, you need to tweak the tsconfig.json file in your project root.

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "react",
  },
}

The "jsx": "react-jsx" option tells TypeScript to convert JSX syntax to React.createElement() calls. The "jsxImportSource": "react" option is used to specify the module to import JSX factory functions from.

Now, you can start writing TSX code in your Vite project.

3. Code Examples

Example 1: Creating a Simple TSX Component

// src/components/HelloWorld.tsx

import React from 'react';

interface Props {
  name: string;
}

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

export default HelloWorld;

In this example, HelloWorld is a functional component that accepts Props as its props. The name prop is of type string.

Example 2: Using the TSX Component

// src/App.tsx

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

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

export default App;

Here, we import and use the HelloWorld component in our App component.

4. Summary

In this tutorial, we've learned how to use TSX in a TypeScript/Vite project. We've covered how to configure TSX in Vite and how to write TSX code.

To continue learning about TSX and Vite, you may want to explore the following resources:

5. Practice Exercises

Exercise 1: Create a TSX component that accepts a `message` prop and displays it in a paragraph.

Exercise 2: Create a TSX component that accepts an array of strings as a prop and displays each string in a list item.

Exercise 3: Create a TSX component that accepts an `onClick` function prop and a `label` prop for a button. When the button is clicked, the `onClick` function should be called.

Remember, practice is key to mastering any concept. Happy coding!