Joseph Jude

Consult . Code . Coach

Create React.js component with Typescript


code . nodejs . tsc . react

Components are an essential building blocks of React.js. A react.js component could be a search-bar or a list of item. It is a general practice to break down the application into smallest components and build the application on top of these small components.

Take an example of the UI for the common ToDo list. It consists of three components. At the lowest level, there is item components, then the header component, and the whole app component.

This gives the flexibility to develop and test these elements independently.

React components

In this guide, we will create a simple React Hello component. This program builds on top of Getting started with React.js and Typescript.

As a general practice, components are created within a folder called components. So create a folder called components under src.

Create a Hello.tsx in the components folder.

import * as React from "react";

export class Hello extends React.Component<any,any> {
    render() {
        return <h1>Hello World</h1>;
    }
}

React.Component takes two parameters — props and state. For this guide, we are not passing these parameters, so they are defined any.

With Hello.tsx, the folder structure should look like this:

.
├── build
├── index.html
├── package.json
├── src
│   ├── components
│   │   └── Hello.tsx
│   └── index.tsx
├── tsconfig.json
├── webpack.config.js
└── yarn.lock

Notice the components directory and Hello.tsx file.

Now if you run yarn run build, webpack will compile and combine the tsx files into bundle.js. If you open index.html, you will see Hello World in big, bold letters.

Let us modify the application to pass parameters using props.

Modify Hello.tsx as follows:

import * as React from "react";

export interface HelloProps { compiler: string; framework: string; }

export class Hello extends React.Component<HelloProps, undefined> {
    render() {
        return <h1>Hello from {this.props.compiler} and {this.props.framework}!</h1>;
    }
}
´

We are sending two input values into the components as defined in the HelloProps interface. These values are accessed within the component using this.props notation.

We still need to pass these values. So let us modify index.tsx as follows:

import * as React from "react";
import * as ReactDOM from "react-dom";

import { Hello } from "./components/Hello";

ReactDOM.render(
    <Hello compiler="TypeScript" framework="React" />,
    document.getElementById("main")
);

Here we are importing the component we created and then passing the values as we invoke the component inside render() function.

Now if you compile (with yarn run build), and open index.html file, you will see Hello from Typescript and React.

That is it, we have created our first React.js component with Typescript.

Subscribe with the below form to get guides as I post new ones.


Like the post? Retweet it. Got comments? Reply.

Create React.js component with Typescript by @jjude https://t.co/Y9BoRQpTGx

— Joseph Jude (@jjude) June 23, 2017
Share this on: Twitter / /

Comments

comments powered by Disqus