REACT Main Basic concepts
1. Function with number param
xxxxxxxxxx
function simpleCalculation(currentCount: number) {
return currentCount + 1;
}
2. UseState - Updates only its associated UI value, not all values.
xxxxxxxxxx
// Full example
import React, { useState } from 'react';
function Counter() {
const [countA, setCountA] = useState(0);
const [countB, setCountB] = useState(0);
return (
<div>
<p>You clicked A {countA} times</p>
<button onClick={() => {
const newValue = simpleCalculation(countA);
setCountA(newValue);
}}>
A Increment button
</button>
<p>You clicked B {countB} times</p>
<button onClick={() => {
const newValue = simpleCalculation(countB);
setCountB(newValue);
}}>
B Increment button
</button>
</div>
);
}
export default Counter;
3. useEffect - Performs actions after UI updates, can depend on specific value changes.
xxxxxxxxxx
// A. Depends nothing, like Flutter post-build
useEffect(() => {
console.log('Runs on init & after every (useState) render');
},);
// B. Depends initial, like Flutter initState
useEffect(() => {
console.log('Run on init, just once.');
}, []);
// C. Depends specific useState
useEffect(() => {
console.log('Run on init & whenever countA or countB changes');
}, [countA, countB]);
More concepts will Coming soon!
xxxxxxxxxx
JavaScript Concepts must be clear to start learning react
- Function Declarations and Arrow Functions
- Template Literals
- Short Conditionals: &&, ||, Ternary Operator
- Three Array Methods: .map(), .filter(), .reduce()
Object Tricks: Property Shorthand, Destructuring, Spread Operator
- Promises + Async/Await Syntax
- ES Modules + Import / Export syntax