1class MouseTracker extends React.Component {
2 constructor(props) {
3 super(props);
4 this.handleMouseMove = this.handleMouseMove.bind(this);
5 this.state = { x: 0, y: 0 };
6 }
7
8 handleMouseMove(event) {
9 this.setState({
10 x: event.clientX,
11 y: event.clientY
12 });
13 }
14
15 render() {
16 return (
17 <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>
18 <h1>Move the mouse around!</h1>
19 <p>The current mouse position is ({this.state.x}, {this.state.y})</p>
20 </div>
21 );
22 }
23}
1/* PASSING THE PROPS to the 'Greeting' component */
2const expression = 'Happy';
3<Greeting statement='Hello' expression={expression}/> // statement and expression are the props (ie. arguments) we are passing to Greeting component
4
5/* USING THE PROPS in the child component */
6class Greeting extends Component {
7 render() {
8 return <h1>{this.props.statement} I am feeling {this.props.expression} today!</h1>;
9 }
10}
11
12--------------------------------------------
13function Welcome(props) {
14 return <h1>Hello, {props.name}</h1>;
15}
16
17const element = <Welcome name="Sara" />;
18ReactDOM.render(
19 element,
20 document.getElementById('root')
21);
1/* PASSING THE PROPS to the 'Greeting' component */
2const expression = 'Happy';
3<Greeting statement='Hello' expression={expression}/> // statement and expression are the props (ie. arguments) we are passing to Greeting component
4
5/* USING THE PROPS in the child component */
6class Greeting extends Component {
7 render() {
8 return <h1>{this.props.statement} I am feeling {this.props.expression} today!</h1>;
9 }
10}
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}
1function App() {
2 return (
3 <div className="App">
4 <NewComponent name="Ariful Islam Adil" profession="Web-Developer"></NewComponent>
5 </div>
6 );
7}
8
9function NewComponent(props) {
10 return (
11 <div className="test-class">
12 <h1>Name: {props.name}</h1>
13 <h3>Profession: {props.profession}</h3>
14 </div>
15 )
16}
17export default App;