# class vs function

# Rendering JSX

function FunctionalComponent() {
return <h1>Hello, world</h1>;
}

functional component is a javascript /es6 function that returns react element(JSX).

class ClassComponent extends Component {
render() {
return <h1>Hello, world</h1>;
}
}

classs component is es6 classes which have a addional render method for returned JSX.

# Passing props

in class component <Component name="jahan" />
OR
class ClassComponent extends React.Component {
render() {
const { name } = this.props;
return <h1>Hello, { name }</h1>;
}
}

In function component

const FunctionalComponent = ({ name }) => {
return <h1>Hello, {name}</h1>;
};

OR

const FunctionalComponent = (props) => {
return <h1>Hello, {props.name}</h1>;
};

# Handling state

In function component

const FunctionalComponent = () => {
const [count, setCount] = React.useState(0);

return (
<div>
<p>count: {count}</p>
<button onClick={() => setCount(count + 1)}>Click</button>
</div>
);
};

In class Component

class ClassComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}

render() {
return (
<div>
<p>count: {this.state.count} times</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click
</button>
</div>
);
}
}