React + TypeScript - Super Hero/Villain Site
Tags: 100daysofcode, javascript, react, typescript
Published: 2020-06-13 18:17:20

---
title: React + TypeScript - Super Hero/Villain Site
published: true
description: A quick React Site with TypeScript implementation
tags: #100daysofcode,#javascript,#react,#typescript
cover_image: https://miro.medium.com/max/3242/1*WgiC7P0tNvtHMnhMztIO5Q.png
---

Yesterday Worked on a simple node js API that returns Super Hero Data with typescript implementation.

Today I decided to work on a React Site (with TS implementation ) that Randomly displays a superhero/villain details from the node js API. 

This page randomly displays a hero or villain data and when you click on show Random Hero it displays other hero. You can find the full code in my git repo. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/feflf4eflqf4wq47nrug.png)

Tomorrow will work on improving the code
https://github.com/ganeshraja10/Latest-Tech-Learnings

Here is a sample code
```react
import React, { Component } from 'react';
import axios from 'axios';
import { Container, Row, Col, Button } from 'reactstrap';

import SuperHeroDetails from '../custom_types/SuperHeroData';
import DisplaySuperHeroProperty from './DisplaySuperHeroProperties';

const apiClient = axios.create({
  baseURL: 'http://localhost:3000',
  responseType: 'json',
  headers: {
    'Content-Type': 'application/json',
  },
});

type SuperHeroData = {
  data: SuperHeroDetails;
};

export default class DisplaySuperHeroDetails extends Component<{}, SuperHeroData> {
  loadNewSuperHeroDetails = async () => {
    try {
      const response = await apiClient.get('/');
      this.setState({ data: response.data });
    } catch (err) {
      console.log(err);
    }
  };
  componentDidMount() {
    this.loadNewSuperHeroDetails();
  }

  render() {
    if (this.state === null || !('data' in this.state)) return <div>Loading</div>;
    const { data } = this.state;
    return (
      <div>
        <Container style={{ paddingTop: '30px', border: '2px solid red', borderRadius: '40px', margin: '40 auto' }}>
          <h1 style={{ textAlign: 'center' }}>{data.name}</h1>

          <Row style={{ padding: '20px' }}>
            <Col lg={8}>
              <DisplaySuperHeroProperty name={'Full Name'} data={data.biography.fullName} />
              <DisplaySuperHeroProperty name={'First Appearance'} data={data.biography.firstAppearance} />
              <DisplaySuperHeroProperty name={'Gender'} data={data.appearance.gender} />
              <DisplaySuperHeroProperty name={'Race'} data={data.appearance.race} />
              <DisplaySuperHeroProperty name={'Power'} data={data.powerstats.power} />
              <DisplaySuperHeroProperty name={'Speed'} data={data.powerstats.speed} />
              <DisplaySuperHeroProperty name={'Strength'} data={data.powerstats.strength} />
              <DisplaySuperHeroProperty name={'Intelligence'} data={data.powerstats.intelligence} />
              <DisplaySuperHeroProperty name={'Combat'} data={data.powerstats.combat} />
            </Col>
            <Col LG={4}>
              <img alt={'superhero'} src={data.images.md} />
            </Col>
          </Row>
        </Container>
        <Button
          onClick={this.loadNewSuperHeroDetails}
          className={'justify-content-center mx-auto d-block'}
          style={{ margin: '40px' }}
        >
          Show Random SuperHero
        </Button>
      </div>
    );
  }
}
```