Skip to content

Latest commit

 

History

History
165 lines (118 loc) · 3.7 KB

4.JSX.md

File metadata and controls

165 lines (118 loc) · 3.7 KB

100 React Questions (JSX)

Q1. What is the role of JSX in React? (3 points) V. IMP.

  • JSX stands for JavaScript XML

  • JSX is used by React to write HTML-like code

  • JSX is converted to JavaScript via tools like Babel. (Because Browser understand JavaScript not JSX)

Q2. What are the 5 Advantages of JSX? V. IMP.

  • Improve code readability and writability

  • Error checking in advance (Type safety)

  • Support JavaScript expressions

  • Improved performance

  • Code reuseability

Q3. What is Babel?

Babel in React is used to transpile JSX syntax into reglar JavaScript which browser can understand.

Q4. What is the role of Fragment in JSX? V. IMP.

  • In React, a fragment is a way to group multiple children's elements.

  • Using a Fragment prevents the addition of unnecessary nodes to the DOM.

return(
    <>
        <div>This is a div</div>
        <p>This is a paragraph</p>

        <button>This is a button</button>
    </>
)

Q5. What is Spread Operator in JSX?

The spread operator (...) is used to expand or spread an array or object.

const props = {name: 'Hello', noun: 'World'};

return(
    <>
        <ChildComponent {...props}>
        {/*<ChildComponent {props}> ❌*/}
    </>
)
function ChildComponent(props){
    return(
        <div>
            {props.name}, {props.noun}
        </div>
    )
}

Q6. What are the types of Conditional Rendering in JSX? V. IMP.

  • If / else statements
  • Ternary operator
  • && operator
  • Switch statement
// If/else statements
function MyComponent() {
    if (2 > 1) {
        return "abc";
    } else {
        return "xyz";
    }
}

// Ternary operator
function MyComponent() {
    return 2 > 1 ? "abc" : "xyz";
}

// && operator
function MyComponent() {
    return 2 > 1 && "abc";
}

// Switch statement
function MyComponent() {
    const value = 2;
    switch (value) {
        case 2:
            return "abc";
        case 1:
            return "xyz";
        default:
            return null;
    }
}

Q7. How do you iterate over a list in JSX? What is map() method?

map() method allows you to iterate over an array and modify its elements using a callback function.

function App() {
    const numbers = [1, 2, 3, 4, 5];

    return (
        <>
            {
                numbers.map((number) => (
                    <div key={number}>{number * 2}</div>
                ))
                // 2 4 6 8 10
            }
        </>
    );
}

A callback function is a function passed as an argument to another function, which is then invoked within the outer function to complete a specific task.

Q8. Can a browser read a JSX File?

  • No, browsers cannot directly interpret or understand JSX files.

  • Babel takes JSX and converts it into equivalent JavaScript code that browsers can understand.

Q9. What is Transpiler? What is the difference between Compiler & Transpiler?

Transpiler

  • A Transpiler is a tool that converts source code from one high-level programming language(JSX) to another high-level programming language(JavaScript). Example: Babel

Compiler

  • A compiler is a tool that converts high-level programming language(Java) into a lower-level language(machine code or bytecode).

Q10. Is it possible to use JSX without React?

  • Yes, it's possible to use JSX without React by creating your own transpiler like Babel.

  • However, this is not recommended since JSX is tightly integrated with React and relies on many React-specific features.

Previous: File and Folder
Next: Components (Function & Class)