class component react

1class MyComponent extends React.Component{
2    constructor(props){
3        super(props);
4    };
5    render(){
6        return(
7            <div>
8              <h1>
9              	My First React Component!
10              </h1>
11            </div>
12        );
13    }
14};
15

1class ComponentName extends React.Component {
2  render() {
3    return ;
4  }
5}
6
7export default ComponentName;
8

1class Clock extends React.Component {
2  constructor(props) {
3    super(props);
4    this.state = {date: new Date()};
5  }
6
7  componentDidMount() {  }
8  componentWillUnmount() {  }
9  render() {
10    return (
11      <div>
12        <h1>Hello, world!</h1>
13        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
14      </div>
15    );
16  }
17}

1import React, { Component } from 'react'
2import './TourList.scss';
3import Tour  from '../Tour/Tour';
4import { tourData } from './tourData';
5export default class TourList extends Component {
6    state={
7        tours:tourData
8    }
9    render() {
10        const {tours}=this.state
11        
12
13        return (
14            <section className="toulist">
15            {tours.map(tour=>{
16                return <Tour key={tour.id} tour={tour} />;
17            })}
18            
19            </section>
20        )
21    }
22}
23
24//------------------------------------------------------
25import React, { Component } from 'react';
26import './Tour.scss';
27
28export default class Tour extends Component {
29    state={
30        showinfo:false,
31        name:""
32    }
33    handleInfo=()=>{
34        this.setState({
35            showinfo:!this.state.showinfo,
36            name:"kumar"
37        })
38    }
39    render() {
40        const {id,city,name,info,img}=this.props.tour
41        return (
42            <div className="grid">
43            <article className="tour">
44            
45               <div className="img-container">
46               <img 
47                src={img}></img>
48                <span className="close-btn">
49                    <i class="fa fa-window-close"></i>
50                </span>
51               </div>
52               <div className="info">
53               <div className="tour-info">
54               <h3>{name}</h3>
55               <h4>{city}</h4>
56               <h5>info{""}
57               <span class="fa fa-caret-square-down" onClick={this.handleInfo}></span></h5>
58                
59               </div>
60               {this.state.showinfo && <p>{info}{this.state.name}</p>}
61               
62               </div>
63               
64            </article>
65            </div>
66        )
67    }
68}

1class HelloMessage extends React.Component {
2  render() {
3    return (
4      <div>
5        Hello {this.props.name}
6      </div>
7    );
8  }
9}
10
11ReactDOM.render(
12  <HelloMessage name="Taylor" />,
13  document.getElementById('hello-example')
14);

1// New component class starts here:
2class Friend extends React.Component {
3  render() {
4    const friend = friends[0];
5    return (
6      <div>
7        <h1>{friend.title}</h1>
8        <img src={friend.src}/>
9      </div>
10    );
11  }
12}