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.

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 " > { } </ 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