TypeScript Tutorial: Building a Simple Web Application for a Feedback Form

Written by

learnmodernjavascript

in

In the digital age, gathering user feedback is crucial for improving products, services, and overall user experience. Imagine you’re building a website or web application. How do you efficiently collect user opinions, suggestions, and bug reports? Creating a feedback form is a fundamental solution. This tutorial will guide you through building a simple, yet effective, feedback form application using TypeScript. You’ll learn the core concepts of TypeScript while creating a practical tool that you can adapt and integrate into your projects.

Why TypeScript?

TypeScript, a superset of JavaScript, brings static typing to your code. This means you define the data types of your variables, function parameters, and return values. Why is this important? Because it helps you:

  • Catch Errors Early: TypeScript identifies potential errors during development, before you even run your code, saving you time and headaches.
  • Improve Code Readability: Type annotations make your code easier to understand and maintain, especially in large projects.
  • Enhance Developer Experience: TypeScript provides better autocompletion, refactoring, and other features in your IDE, boosting your productivity.

Prerequisites

Before we begin, ensure you have the following installed:

  • Node.js and npm (Node Package Manager): You’ll need these to manage your project dependencies and run TypeScript. Download them from https://nodejs.org/.
  • A Code Editor: VS Code, Sublime Text, or any editor of your choice will work.

Setting Up Your Project

Let’s create a new project directory and initialize it with npm. Open your terminal and run the following commands:

mkdir feedback-form-app
cd feedback-form-app
npm init -y

This will create a `package.json` file in your project directory. Next, install TypeScript and a few other necessary packages:

npm install typescript --save-dev
npm install @types/react @types/react-dom react react-dom --save

Here, we install:

  • `typescript`: The TypeScript compiler.
  • `@types/react` and `@types/react-dom`: Type definitions for React.
  • `react` and `react-dom`: React and ReactDOM libraries.

Now, create a `tsconfig.json` file in your project root. This file configures the TypeScript compiler. You can generate a basic one using the following command:

npx tsc --init --rootDir src --outDir dist

This command creates a `tsconfig.json` file with default settings. You may want to customize this file later, but for now, the defaults are fine. We’ll set the `rootDir` to `src` and `outDir` to `dist` so that our TypeScript files will be inside the `src` directory, and the compiled JavaScript files will be inside the `dist` directory.

Project Structure

Let’s define the project structure. Create the following directories and files in your project directory:

feedback-form-app/
├── src/
│   ├── components/
│   │   └── FeedbackForm.tsx
│   ├── App.tsx
│   ├── index.tsx
│   └── styles.css
├── dist/
├── package.json
├── tsconfig.json
└── webpack.config.js

This structure organizes our code logically. The `src` directory will hold our TypeScript source files, `components` will hold our React components, and `dist` will contain the compiled JavaScript and CSS.

Writing the Feedback Form Component

Let’s create the core of our application: the `FeedbackForm` component. Open `src/components/FeedbackForm.tsx` and add the following code:

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

interface Feedback {
  name: string;
  email: string;
  feedback: string;
}

const FeedbackForm: React.FC = () => {
  const [feedback, setFeedback] = useState<Feedback>({
    name: '',
    email: '',
    feedback: '',
  });

  const [submitted, setSubmitted] = useState(false);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    setFeedback(prevFeedback => ({
      ...prevFeedback,
      [name]: value,
    }));
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // In a real application, you'd send this data to a server.
    console.log('Feedback submitted:', feedback);
    setSubmitted(true);
  };

  return (
    <div className="feedback-form-container">
      <h2>Feedback Form</h2>
      {submitted ? (
        <p>Thank you for your feedback!</p>
      ) : (
        <form onSubmit={handleSubmit}>
          <div className="form-group">
            <label htmlFor="name">Name:</label>
            <input
              type="text"
              id="name"
              name="name"
              value={feedback.name}
              onChange={handleChange}
              required
            />
          </div>

          <div className="form-group">
            <label htmlFor="email">Email:</label>
            <input
              type="email"
              id="email"
              name="email"
              value={feedback.email}
              onChange={handleChange}
              required
            />
          </div>

          <div className="form-group">
            <label htmlFor="feedback">Your Feedback:</label>
            <textarea
              id="feedback"
              name="feedback"
              value={feedback.feedback}
              onChange={handleChange}
              rows={4}
              required
            />
          </div>

          <button type="submit">Submit Feedback</button>
        </form>
      )}
    </div>
  );
};

export default FeedbackForm;

Let’s break down this code:

  • Imports: We import `React` and `useState` from `react`. We also import the stylesheet.
  • Feedback Interface: We define an interface `Feedback` to specify the structure of our feedback data (name, email, feedback). This is where TypeScript’s type checking shines.
  • State Management: We use the `useState` hook to manage the form data (`feedback`) and the submission status (`submitted`).
  • handleChange Function: This function updates the state whenever the user types in the input fields or the textarea. Notice how we use `e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>` to type the event, ensuring we’re handling the correct event type.
  • handleSubmit Function: This function is called when the form is submitted. It prevents the default form submission behavior (page reload) and logs the feedback data to the console. In a real-world application, you would send this data to a server.
  • JSX Structure: The component returns JSX (JavaScript XML) that renders the form. We conditionally render a thank-you message after the form has been submitted.

Creating the App Component

Now, let’s create the `App` component that will render the `FeedbackForm`. Open `src/App.tsx` and add the following code:

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

const App: React.FC = () => {
  return (
    <div className="app-container">
      <FeedbackForm />
    </div>
  );
};

export default App;

This is a simple component that imports and renders the `FeedbackForm` component. We’ve added a container div to help with styling.

Setting up the Entry Point

Next, we need an entry point for our application. Open `src/index.tsx` and add the following code:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

This code does the following:

  • Imports `React` and `ReactDOM`.
  • Imports our `App` component.
  • Renders the `App` component into the DOM element with the ID `root`. We’re using `React.StrictMode` to help identify potential problems in our application during development.

Adding Styles (styles.css)

To make the form look better, let’s add some basic CSS. Create a file named `src/styles.css` and add the following styles:

.app-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f4f4f4;
  font-family: sans-serif;
}

.feedback-form-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 80%;
  max-width: 500px;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

input[type="text"], input[type="email"], textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

textarea {
  resize: vertical;
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #45a049;
}

This CSS provides basic styling for the form elements, making them more visually appealing. Feel free to customize these styles to match your preferences.

Configuring Webpack

We’ll use Webpack to bundle our application. Webpack takes all of our JavaScript, CSS, and other assets and combines them into a single file (or a few files) that can be easily deployed to a web server. Install `webpack`, `webpack-cli`, `webpack-dev-server`, and the necessary loaders:

npm install webpack webpack-cli webpack-dev-server html-webpack-plugin css-loader style-loader ts-loader --save-dev

Now, open `webpack.config.js` and add the following configuration:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.tsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    static: path.resolve(__dirname, 'dist'),
    port: 3000,
    open: true,
  },
  module: {
    rules: [
      {
        test: /.(ts|tsx)$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

Let’s break down this Webpack configuration:

  • mode: We set the mode to `development` for easier debugging. In production, you’d typically use `production`.
  • entry: Specifies the entry point of our application (`src/index.tsx`).
  • output: Defines where the bundled output will be placed (`dist/bundle.js`).
  • devServer: Configures the development server, which automatically reloads the browser when you make changes to your code.
  • module.rules: Defines how Webpack should handle different file types.
    • We use `ts-loader` to transpile TypeScript files.
    • We use `style-loader` and `css-loader` to handle CSS files.
  • resolve.extensions: Specifies which file extensions Webpack should resolve (e.g., `.tsx`, `.ts`, `.js`).
  • plugins: Adds plugins to customize the build process.
    • `HtmlWebpackPlugin` generates an `index.html` file in the `dist` directory and injects the bundled JavaScript into it.

Create a basic `index.html` file in a `public` directory at the root level of your project, and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Feedback Form</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

Building and Running the Application

Now, it’s time to build and run the application. Add the following scripts to your `package.json` file:

"scripts": {
  "start": "webpack serve --mode development",
  "build": "webpack --mode production"
}

These scripts will:

  • `start`: Run the development server.
  • `build`: Build the production-ready bundle.

To start the development server, run:

npm start

This will compile your TypeScript code, bundle it, and start a development server. Open your browser and navigate to `http://localhost:3000` (or the port specified in your `webpack.config.js`). You should see your feedback form! Any changes you make to your code will automatically reload the browser thanks to the development server.

To create a production build, run:

npm run build

This will create a `dist` directory containing the bundled JavaScript and HTML files, ready for deployment.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them when working with TypeScript and React:

  • Incorrect Type Annotations: This is one of the most common issues. Make sure you’re using the correct types for your variables, function parameters, and return values. Use the TypeScript compiler’s error messages to guide you. For example, if you get an error like, “Type ‘string’ is not assignable to type ‘number’,” then you know you’re trying to assign a string to a variable that expects a number.
  • Missing Dependencies: Ensure you have all the necessary dependencies installed. Double-check your `package.json` file and install any missing packages using `npm install`.
  • Incorrect Imports: Make sure you’re importing modules and components correctly. Check the file paths and ensure you haven’t made any typos.
  • Webpack Configuration Errors: Webpack configuration can be tricky. Carefully review your `webpack.config.js` file for any errors. Common issues include incorrect paths, missing loaders, or incorrect plugin configurations. Use the Webpack documentation and error messages to help you troubleshoot.
  • JSX Syntax Errors: Make sure your JSX syntax is correct. Common errors include missing closing tags, incorrect attribute names, and invalid JavaScript expressions within JSX. Your code editor should highlight these errors.
  • Ignoring TypeScript Errors: Don’t ignore the TypeScript compiler errors! They are there to help you catch bugs early. Read the error messages carefully and fix the underlying issues.

Key Takeaways

  • TypeScript for Type Safety: TypeScript significantly improves code quality and maintainability by adding static typing.
  • React for UI Components: React allows building reusable and efficient UI components.
  • State Management with `useState`: The `useState` hook is essential for managing component state and user interactions.
  • Webpack for Bundling: Webpack bundles your code and assets for deployment.
  • Clear Error Messages: Pay attention to compiler and console errors to debug and improve your code.

FAQ

  1. Why use TypeScript with React?

    TypeScript enhances React development by providing type safety, code completion, and easier debugging, leading to more robust and maintainable applications.

  2. How do I handle form validation?

    You can add validation to the `handleChange` function to check user input before updating the state. For more complex validation, consider using libraries like Formik or React Hook Form.

  3. How do I send the feedback data to a server?

    Inside the `handleSubmit` function, use the `fetch` API or a library like Axios to make an HTTP request to your server, sending the `feedback` data in the request body.

  4. Can I use this form in a larger application?

    Yes, this form component is designed to be reusable. You can easily integrate it into any React application and customize it to fit your specific needs.

This tutorial provides a solid foundation for building feedback forms with TypeScript and React. By understanding the core concepts and following the step-by-step instructions, you can create a valuable tool for collecting user feedback. Remember to adapt and expand upon this example to suit your specific project requirements, experimenting with different features and functionalities to enhance your application. With a bit of customization, you can integrate this form into any website, empowering you to gather important insights from your users.

More posts