Carl Rippon

Building SPAs

Carl Rippon
BlogBooks / CoursesAbout
This site uses cookies. Click here to find out more

Building a React Form Component with TypeScript : Introduction

May 29, 2018
reacttypescript

There’s lots of boiler plate code you need to write when building a form in react … managing the field values, validating them, submitting the values to a web api and informing the user of success or any problems.

This is going to be the first of a series of blog posts where we’ll build our own super simple form component. We’ll hopefully encapsulate some of that boiler plate in our form component so we don’t need to code it in our form instances.

We’re going to use some cool stuff in our implementation … We’ll use the new context api as well as the popular render props pattern. We’ll also write our components in TypeScript.

We’ll use our super simple form component to build the following Contact Us form.

Contact Us Form

In this intro post we’ll simply create our project. So, without further ado, let’s get started …

Getting started

Let’s use TypeScript React Starter to create our project:

create-react-app my-app --scripts-version=react-scripts-ts

We’re going to make use of Bootstrap. So, let’s reference this in public\index.html:

<head>
  ...
  <link
    rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
    crossorigin="anonymous"
  />
  ...
</head>

We’re going to get rid of the sample code in App.tsx and replace it with the following:

import * as React from "react";

class App extends React.Component {
  public render() {
    return (
      <div className="mt-3">
        {/* TODO - reference "contact us" form*/}
      </div>
    );
  }
}

export default App;

Let’s also opt out of a few tslint rules in tslint.json:

{
  "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
  "linterOptions": {
    "exclude": ["config/**/*.js", "node_modules/**/*.ts"]
  },
  "rules": {    "object-literal-sort-keys": false,    "member-ordering": false,    "jsx-no-lambda": false,    "no-console": false,    "ordered-imports": false  }}

What’s up next

In the next post we are going to implement very basic Form and Field components. We’ll use the render props pattern so that any content can be injected into the form. We’ll also create the 1st version of our “contact us” form.

Learn TypeScript

NEW!🎉LIMITED LAUNCH DISCOUNT

An interactive course for JavaScript developers who want to learn modern TypeScript

  • Learn to use TypeScript's amazing type system with your existing JavaScript skills to boost your productivity
  • Over 70 interactive tutorial style lessons
  • Quizzes in each chapter to reinforce knowledge
  • Covers beginner topics through to advanced
Learn TypeScript
Find out more