In ReactJS we can’t use double tag return in components like.
|
1 2 3 4 5 6 7 8 9 |
class Hello extends React.Component{ render(){ return (<h1>1</h1><h1>2</h1>) } } |
It gives an error because we return double tag
We can use like
|
1 2 3 4 5 6 7 8 9 |
class Hello extends React.Component{ render(){ return (<div><h1>1</h1><h1>2</h1></div>) } } |
It works due to return single tag
In HTML we do not have a complete single tag like input, in ReactJS we must have complete tag
Ex.
HTML
|
1 2 3 4 5 |
<input type=“text” > |
ReactJS
|
1 2 3 4 5 |
<input type=“text” /> |
In HTML apply CSS we are using class but in ReactJS must use className
Ex.
HTML
|
1 2 3 4 5 |
<h1 class=“h1class”>ABC</h1> |
ReactJS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; class Hello extends React.Component{ render(){ return (<h1 className=“h1class”>ABC</h1>) } } ReactDOM.render(<Hello />,document.getElementById('root')) |
If you want to execute javascript in tag use {}
Ex
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; class Hello extends React.Component{ render(){ return (<h1>{2+2}</h1>) } } ReactDOM.render(<Hello />,document.getElementById('root’)) |
The method call in ReactJS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; class Hello extends React.Component{ getName(){ return “Hello ReactJS" } render(){ return (<h1>{this.getName()}</h1>) } } ReactDOM.render(<Hello />,document.getElementById('root’)) |
constructor use in ReactJS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; class Hello extends React.Component{ constructor(){ super(); this.state={ name:”Hello World" } } getName(){ return “Hello ReactJS" } render(){ return (<h1>{this.state.name}</h1>) } } ReactDOM.render(<Hello />,document.getElementById('root’)) |
More Stories
Installation of ReactJS
State and Props in ReactJS
Events and Uni Directional Data Flow in ReactJS