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
1function Welcome(props) {
2 return <h1>Hello, {props.name}</h1>;
3}
4
5function App() {
6 return (
7 <div>
8 <Welcome name="Sara" /> <Welcome name="Cahal" /> <Welcome name="Edite" /> </div>
9 );
10}
11
12ReactDOM.render(
13 <App />,
14 document.getElementById('root')
15);
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 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;