Quiz – React

Which syntax extension is widely used to create React components?

Props are passed as?

Which algorithm is used to compare DOM with Virtual DOM?

Where is the Virtual DOM created and stored?

Which is the basic building block of a React application?

Can a React component have an empty return?

How can we create a React component that returns nothing?

What would this code render:

if (!!0) {
    return <p>Hello world</p>
}
return <p>What is up?</p>

What would this component render in development mode?

const Playground = () => {

    return ()

}

export default Playground;

What would the output of this component be:

const Playground = () => {
    var x = 1;
    ++x;
    return <p>{x}</p>;
};

What would the following code print to the console when we click the button once?

const Playground = () => {

  var x = 1;

  return (

    <button

      onClick={() => {

        ++x;

        console.log(x);

      }}

    >

      Count: {x}

    </button>

  );

};

What would be the text of the button after it is clicked once?

const Playground = () => {

  var x = 1;

  return (

    <button

      onClick={() => {

        ++x;

        console.log(x);

      }}

    >

      Count: {x}

    </button>

  );

};

What is the correct way to create a state in React?

Does the component re-render if a state is updated?

What would the value of the button be after it is clicked once?

const Playground = () => {

  var x = useRef(0);

  return (

    <button

      onClick={() => {

        ++x;

      }}

    >

      Count: {x.current}

    </button>
  );

};

What would be the value of the button after it is clicked once?

const Playground = () => {
let [count, setCount] = useState(0);

return (
<button
onClick={() => {
count = count + 1;
console.log(count);
}}
>
Count: {count}
</button>
);
};

What would be logged to the console after the button is clicked once?

const Playground = () => {

  let [count, setCount] = useState(0);

  return (

    <button

      onClick={() => {

        count = count + 1;

        console.log(count);

      }}

    >

      Count: {count}

    </button>
  );
};

Does the component re-render if a ref is updated?

What will happen when the count is updated by clicking on the button?

const Playground = () => {

  const [count, setCount] = useState(0);

  useEffect(() => {

    console.log(count);

  }, [count]);

  return (

    <>

      <button

        onClick={() => {

          setCount(count + 1);

        }}

      >

        Increase

      </button>

    </>

  );

};

If a state contains an object and we modify it, would the component re-render?

What should be used as the dependency array if we want to run the useEffect when the component is mounted?

What should be used as the dependency array if we want to run the useEffect whenever any state is updated?

Which of the following are ways to style React components?

Which of the following is a valid component name?

Which of the following is the valid and most ideal way to add event listeners?

Which of the following are state management libraries for React?

Is it possible to share states with other components without passing them as a prop?

What are the two components of a React context

What is the significance of keys in React?

In CSS Modules, how can you access class ‘.has-font-large’?