React Fundamental Concept

Same React Concept

1. Creating Class Components:

You can create a class component in javascript. Bellow this button class component extends React.Component. That this component uses anywhere. You can see this button use props property. This property pass value in the component.

For Example:

class Button extends React.Component {
render() {
return (
<button>{this.props.label}</button>
);
}
}

2. Responding to user events:

You can add even property in the button element. Even property is onClick, onMouseOver, onSubmit etc. You use the onClick property that sees this value when you click.

For Example:

const Button = () => {
let count = 0; return (
<button onClick={() => console.log('Button clicked')}>
{count}
</button>
);
};

3. useState Hook:

useState is an important hook in react. It uses the store in react. Any value input and output value anywhere.

For Example:

const Button = () => {
const [count, setCount] = useState(0); return (
<button onClick={() => setCount(count + 1)}>
<button onClick={() => setCount(count + 1)}>
{count}
</button>
<button onClick={() => setCount(count - 1)}>
{count}
</button>
);
};

<button onClick={() => setCount(count + 1)}>
{count}
</button>
);
};

4. Rendering sibling components:

Sibling is a common method to react. It uses 3 different ways. first of all single-line use code. secondly, you use the main div in all code. last of all you use React.Fragment or <></> in all code

For Example:

import React from “react”;
// sibling 1

const Person = () => (<h1>Hello</h1>);

// sibling 2

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

// sibling 3

const Person = (props) => (
<React.Fragment>
<h1>Hello, {props.name}</h1>
</React.Fragment>
);

// or

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

5. defaultProps:

defaultProps is the default value in the component. You do not set a value it shows the default value. You set a value it shows this value.

For Example:

class CustomButton extends React.Component {
// ...
}

CustomButton.defaultProps = {
color: 'black'
};
render() {
return <CustomButton /> ; // props.color will be set to black
}
render() {
return <CustomButton color={blue} /> ; // props.color will be set to blue
}