Let’s Learn Typescript | React and Webpack With TS 04

Video Tutorial

Overview

Typescript is awesome because it allows you to use types all over your code base which helps you in different ways such as (Bugs, Typing Flows, and Hidden Vulnerabilities) all of that and more you get once you start using typescript.

React is written on typescript so you will get the full support out of it once you start using it on your typescript project, everything is going to be compiled down to a browser readable javascript version starting from typescript + react working together.

The setup is going to be very simple since we have already configured Webpack to work with typescript while back in the first tutorial, make sure to take look on it if you haven’t already.

Set up

First, make sure to install React and React DOM, if you are not familiar with React and you want to learn it Here is a full tutorial series introduces you React and the world of Javascript Render Engines.

npm install react react-dom --save

Now, let’s say we want to render something to the DOM using React, as we usually do is importing react and ReactDOM modules but this time we have to import in a different way only the awesome typescript loader could understand since if you have worked before with React and javascript you would have used Babel for compiling it where babel and the loader we are using is completely different.

//We usally import it like 
import react from "react"
//But on typescript loader (basically typescript) we import all
import * as React from "react";
import * as ReactDOM from "react-dom";

Babel uses the default exports as the main export for any module while awesome loader does not, and this not only for react there are many other modules require from you to import them like that.

Also, since we are going to use TSX (JSX) in typescript you have to change the file extension from .ts to .tsx in order to be able to use jsx without problems.

Components

Now, you will be able to use the advanced side of React components and control them the way you like by typing Component Props and State.

interface AppProps {
  name?: string;
}

interface AppState {
  count : number;
}

export class App extends React.Component < AppProps, AppState > {
    constructor(props : AppProps) {
      super(props);
      this.state = {
        count: 0
      };
    }
    render() {
      return (
        <div>
          <h3>Hello World</h3>
          <p>Welcome {this.props.name}</p>
        </div>
      );
   }
}

We created a React component in the usual way but this time we have to define interfaces for both the props and the state so we can use it on the component.

We tell the component of which props and state we use through brackets (Generic Types), this way you can use Typescript typing system in your favor when working with React components.

Also, if you can notice in the props interface we have the name property which we set it into optional just by using the question mark before the colons, it means that the name property is not required when rendering the component, which can help you a lot when dealing with a bit more complicated components.

We can render the above component very quickly.

//Render to the DOM 
ReactDOM.render(<App name="Islem Penywis"/>, document.getElementById("root"));

Stateless Functional Components

If you have used a function renderer as a minimal component before on Reactjs, you should also be familiar with this as well since it is the same thing but this time you are using typing to render the minimal component properly and from its name it is so obvious that SFC is stateless which basically means that it has only props but no state to manage.

//On the OLD Javascript Way (JS)
function OldSFC(props) {
   return <small>Im an Statelss Component in ReactJS</small>
}
//Now, the New SFC typescript way 
//Like a Real Component, you also have to specify the props types
interface StatelssCompProps {
   status: boolean;
}
const StatelessComp: React.SFC<StatelessCompProps> = (props: StatelessCompProps) => {
   return <div>Im a Statelss Component { props.status ? "YAH!" : "No!" }</div>
};

It works the same as a Real Component, it needs a props types to be provided but no state since it is stateless, and also you have to use the SFC type from React namespace in order to use it as a stateless Component.

And It is identical to using a function render on Reactjs.

You can include into the main component in order to get rendered very easily.

//App Component 
...
render() {
   ...
   <StatelessComp status={true} />
}

Default Props

You can also use default props with a real component which gets defined in the class scope as a static object, you should carry all the optional parameters default values so if the user omit one property it can use a default value from the static object you are defining it on to.

//App Component
...
   static defaultProps = {
      name: "Alex",
   }
...
/*If you tried to render the App without providing it with the name property it will rely on the default one that you have specified on the static object, so you always have a backup for those optional variables*/

Default props are great especially if your component does have a lot of optional properties, so your rendering is always safe.

What’s Next

Typescript and React forms a great couple together, using them together let you create advanced patterns and renderers along the way you will learn new tricks and skills.

I really advised to move from using ReactJS (javascript) to typescript and react, in my personal opinion it is such a great experience.

No Comments Yet