Mastering JSX Fundamentals in React: From Destructuring to Promises

[Lomanu4]

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

Mastering JSX Fundamentals in React: From Destructuring to Promises


In modern React development, understanding the JavaScript features inside JSX is crucial to writing clean, efficient, and expressive components. In this article, we'll explore how destructuring, arrow functions, ternary conditionals, spread operators, import/export, and promises play a vital role in crafting powerful UI logic — using a mathematical concept: the Quadratic Formula.

Introduction to Our Example


We'll build a simple React component that:

• Accepts coefficients a, b, and c for a quadratic equation.
• Computes the discriminant and roots using the quadratic formula.
• Renders results using concise JavaScript expressions inside JSX.

1. Destructuring in JSX


Destructuring simplifies props or state access.


const QuadraticSolver = ({ a, b, c }) => {
const discriminant = b * b - 4 * a * c;
...
}
2. Arrow Functions in JSX


Arrow functions are used for inline handlers or logic.


const handleSolve = () => {
// calculate roots
}
3. Ternary Conditional Operator


Used for conditional rendering in JSX.


<p>
{discriminant < 0
? 'No real roots'
: `Roots: ${root1.toFixed(2)}, ${root2.toFixed(2)}`}
</p>
4. Spread Operator in JSX


Copy and extend state or props easily.


const defaultValues = { a: 1, b: 2, c: -3 };
const newValues = { ...defaultValues, b: 4 };
5. Import and Export in JSX


Used for modular architecture.


// utils.js
export const calculateDiscriminant = (a, b, c) => b ** 2 - 4 * a * c;

// in component
import { calculateDiscriminant } from './utils';
6. Promises and Asynchronous Logic


Simulate solving delay with setTimeout wrapped in a promise.


const solveQuadratic = (a, b, c) => {
return new Promise(resolve => {
setTimeout(() => {
const d = b * b - 4 * a * c;
resolve(d);
}, 1000);
});
};

useEffect(() => {
solveQuadratic(a, b, c).then(setDiscriminant);
}, [a, b, c]);
Full Example


import React, { useState, useEffect } from 'react';

export const QuadraticSolver = ({ a = 1, b = -3, c = 2 }) => {
const [discriminant, setDiscriminant] = useState(null);
const [roots, setRoots] = useState([]);

const calculate = async () => {
const d = await new Promise(resolve => {
setTimeout(() => resolve(b ** 2 - 4 * a * c), 1000);
});

setDiscriminant(d);
if (d >= 0) {
const root1 = (-b + Math.sqrt(d)) / (2 * a);
const root2 = (-b - Math.sqrt(d)) / (2 * a);
setRoots([root1, root2]);
} else {
setRoots([]);
}
};

useEffect(() => {
calculate();
}, [a, b, c]);

return (
<div className="math-card">
<h3>Quadratic Equation Solver</h3>
<p>Discriminant: {discriminant}</p>
<p>
{discriminant === null
? 'Calculating...'
: discriminant < 0
? 'No real roots'
: `Roots: ${roots.map(r => r.toFixed(2)).join(', ')}`}
</p>
</div>
);
};
Final Thoughts


Understanding how to integrate JavaScript's core features like destructuring, ternaries, spread operators, and promises inside JSX is essential for building maintainable React applications.

These concepts are the bridge between raw JavaScript power and elegant UI logic in modern React.

React mastery starts with JavaScript mastery — especially inside JSX.

react #javascript #frontend #jsx #math

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.