Carlrippon.com Website Review

As of React v16.7.0-alpha, function-based components have a lot more capability which includes the ability to manage state. In this post we within a strongly-typed functional component with TypeScript. We are going to build a sign up form like the one below: Firstly, let’s create a React and TypeScript app with create-react-app as detailed in the last post At the time of writing this post, v16.7 is still in alpha, so, let’s update our app to use the alpha version of React: We’re going to shrink the size of the app header so that we can see our sign up form. Let’s make the following changes in App.css: .App-logo {. height: 40px; } .App-header {. min-height:150px; font-size:16px; margin-bottom: 30px; } Whilst we are in App.css, let’s add some styles for our form so that looks okay: form { width: 220px; margin: 0px auto 0px auto; text-align: left; display: flex; flex-direction: column; font-size: 16px; } form .row { margin-bottom: 15px; } form input { width: 100%; font-size: 16px; margin: 3px 0px 3px 0px; padding: 3px 5px; color: #464444; } form .error { color: red; font-size: 12px; } form bu*ton { font-size: 16px; color: white; background-color: #484a4e; border: #484a4e solid 1px; border-radius: 3px; padding: 5px 12px; cursor: pointer; } form bu*ton:hover { background-color: #282c34; border-color: #282c34; } form bu*ton:disabled { background-color: gray; border-color: gray; cursor: not-allowed; } form .submit-success { color: green; } form   background-color: #484a4e;   border: #484a4e solid 1px; Now that our project is setup nicely, let’s create a component that will contain our sign up form. So, let’s create a file called import React, { SFC, ChangeEvent, FormEvent, useState } from react; import React, { SFC, ChangeEvent, FormEvent, useState } from react; The useState function is the new React function we are going to use a little later to manage our state. export interface ISignUpData { firstName: string; emailAddress: string; } export interface ISignUpResult { success: boolean; message: