react main basic concepts

The Biton answered on June 11, 2023 Popularity 9/10 Helpfulness 1/10

answer react main basic concepts

related Javascript concepts for starting react

react main basic concepts

Comment

REACT Main Basic concepts

1. Function with number param

function simpleCalculation(currentCount: number) {
    return currentCount + 1;
  }

2. UseState - Updates only its associated UI value, not all values.

// 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.

// 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!

Popularity 9/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: basic javascript

Link to this answer
Share Copy Link

Contributed on Dec 06 2023

The Biton

0 Answers Avg Quality 2/10

Closely Related Answers

Javascript concepts for starting react

Comment

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

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jun 11 2023

Zeeshan Mughal

0 Answers Avg Quality 2/10

react main basic concepts

Contents

More Related Answers