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
1import React from 'react'; const App = () => { const greeting = 'Hello Function Component!'; return <Headline value={greeting} />;}; const Headline = ({ value }) => <h1>{value}</h1>; export default App;
1function Comment(props) {
2 return (
3 <div className="Comment">
4 <div className="UserInfo">
5 <img className="Avatar"
6 src={props.author.avatarUrl}
7 alt={props.author.name}
8 />
9 <div className="UserInfo-name">
10 {props.author.name}
11 </div>
12 </div>
13 <div className="Comment-text">
14 {props.text}
15 </div>
16 <div className="Comment-date">
17 {formatDate(props.date)}
18 </div>
19 </div>
20 );
21}
1function Welcome(props) { return <h1>Hello, {props.name}</h1>;
2}
3
4const element = <Welcome name="Sara" />;ReactDOM.render(
5 element,
6 document.getElementById('root')
7);
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}