Breaking News: Grepper is joining You.com. Read the official announcement!

react main basic concepts

Add Answer

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

react main basic concepts

Closely Related Answers

Javascript concepts for starting react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.