reactjs and typescript code example

Example 1: React with Typescript

// to create a simple app with React and Typescript
npx create-react-app yourProjectName --template typescript

// to add Typescript in an existing project
npm install --save typescript @types/node @types/react @types/react-dom @types/jest

Example 2: axios js and react

import React from 'react';

import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    persons: []
  }

  componentDidMount() {
    axios.get(`https://jsonplaceholder.typicode.com/users`)
      .then(res => {
        const persons = res.data;
        this.setState({ persons });
      })
  }

  render() {
    return (
      <ul>
        { this.state.persons.map(person => <li>{person.name}</li>)}
      </ul>
    )
  }
}

Example 3: why use typescript with react

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

Example 4: react class and props example

import React, { Component } from 'react'
import './TourList.scss';
import Tour  from '../Tour/Tour';
import { tourData } from './tourData';
export default class TourList extends Component {
    state={
        tours:tourData
    }
    render() {
        const {tours}=this.state
        

        return (
            <section className="toulist">
            {tours.map(tour=>{
                return <Tour key={tour.id} tour={tour} />;
            })}
            
            </section>
        )
    }
}

//------------------------------------------------------
import React, { Component } from 'react';
import './Tour.scss';

export default class Tour extends Component {
    state={
        showinfo:false,
        name:""
    }
    handleInfo=()=>{
        this.setState({
            showinfo:!this.state.showinfo,
            name:"kumar"
        })
    }
    render() {
        const {id,city,name,info,img}=this.props.tour
        return (
            <div className="grid">
            <article className="tour">
            
               <div className="img-container">
               <img 
                src={img}></img>
                <span className="close-btn">
                    <i class="fa fa-window-close"></i>
                </span>
               </div>
               <div className="info">
               <div className="tour-info">
               <h3>{name}</h3>
               <h4>{city}</h4>
               <h5>info{""}
               <span class="fa fa-caret-square-down" onClick={this.handleInfo}></span></h5>
                
               </div>
               {this.state.showinfo && <p>{info}{this.state.name}</p>}
               
               </div>
               
            </article>
            </div>
        )
    }
}