---
# System prepended metadata

title: class vs className

---

# class vs className

In HTML, it’s common to use class as an attribute name:
<h1 class="big">Hey</h1>

In JSX, you can’t use the word class! You have to use className instead:

<h1 className="big">Hey</h1>

This is because JSX gets translated into JavaScript, and class is a reserved word in JavaScript.

When JSX is rendered, JSX className attributes are automatically rendered as class attributes.

# Dum class: jismain na state ho na props

# example
class jahan extends React.Component{
  render(){
    return (<h2>fghfh</h2>);
  }
}

# smart class: jismain ya to state ho ya props ho koi ek hon chahiye

# example:
class jahan extends React.Component{
  render(){
    return (
    <h2>{this.props.name}</h2>
    );
  }
}
or
class Name extends React.Component {
  constructor(props) {
    super(props);
    this.state = { text: "" };    
  }
  render() {
    return (
      <div>
        <p>You typed {this.state.text}</p>
      </div>
    );
  }
}