React provides Components which behave like function but return HTML tags by render() function.
React provides two types of components one is Class types Component and another is function like component
React Class Component
React Class Component name must start with uppercase and it should extends React.Component making Class Component
Example
class Name extends React.Component {
render() {
return <h2>yashpal</h2>;
}
}
Display name Component
ReactDOM.render(<Name />, document.getElementById('root'));
React function Component
function Name() {
return <h2>yashpal</h2>;
}
Display function Component
ReactDOM.render(<Name />, document.getElementById('root'));
What is state in React Component
React state is object which holds the properties of Component
Example
class Name extends React.Component {
constructor() {
super();
this.state = {name: "yash"};
}
render() {
return <h2>my name is {this.state.name} </h2>;
}
}
Props in React
React Props is an another way of holding Component properties. Props is like functional based arguments which we send to the component in form of attributes
Example
class Name extends React.Component {
render() {
return <h2>my name is {this.props.name }</h2>;
}
}
ReactDOM.render(<Name name="yash"/>, document.getElementById('root'));