/*@jsxRuntime automatic @jsxImportSource react*/ const {jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = Object.assign({ p: "p", pre: "pre", code: "code", blockquote: "blockquote", a: "a" }, _provideComponents(), props.components), {Playground, QuestionSet, Question, Choises, Choise, Answer} = _components; if (!Answer) _missingMdxReference("Answer", true); if (!Choise) _missingMdxReference("Choise", true); if (!Choises) _missingMdxReference("Choises", true); if (!Playground) _missingMdxReference("Playground", true); if (!Question) _missingMdxReference("Question", true); if (!QuestionSet) _missingMdxReference("QuestionSet", true); return _jsxs(Playground, { children: [_jsxs(QuestionSet, { children: [_jsxs(Question, { children: [_jsx(_components.p, { children: "What is the output of the below code?" }), _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "function App() {\n console.log('Hello World');\n}\n\nApp();\n" }) })] }), _jsxs(Choises, { children: [_jsx(Choise, { children: _jsx(_components.p, { children: "Hello React" }) }), _jsx(Choise, { isAnswer: true, children: _jsx(_components.p, { children: "Hello World" }) }), _jsx(Choise, { children: _jsx(_components.p, { children: "Hello" }) }), _jsx(Choise, { children: _jsx(_components.p, { children: "undefined" }) })] }), _jsx(Answer, { children: _jsx(_components.p, { children: "There are no magic here." }) })] }), _jsxs(QuestionSet, { children: [_jsxs(Question, { children: [_jsx(_components.p, { children: "What will be the output of the following code?" }), _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx", children: "function App() {\n return (\n

\n Hello World\n

\n );\n}\n" }) })] }), _jsxs(Choises, { children: [_jsx(Choise, { children: _jsx(_components.p, { children: _jsx(_components.code, { children: "

Hello World

" }) }) }), _jsx(Choise, { children: _jsx(_components.p, { children: _jsx(_components.code, { children: "<>Hello World" }) }) }), _jsx(Choise, { isAnswer: true, children: _jsx(_components.p, { children: _jsx(_components.code, { children: "

Hello World

" }) }) }), _jsx(Choise, { children: _jsx(_components.p, { children: _jsx(_components.code, { children: "

[Object object]

" }) }) })] }), _jsx(Answer, { children: _jsxs(_components.p, { children: ["Again, No magic. React would render a ", _jsx(_components.code, { children: "div" }), " with the children \"Hello World\"."] }) })] }), _jsxs(QuestionSet, { children: [_jsxs(Question, { children: [_jsx(_components.p, { children: "What will be the output of the following code after compilation?" }), _jsx(_components.pre, { noline: true, children: _jsx(_components.code, { className: "language-jsx", children: "

Hello World

\n" }) })] }), _jsxs(Choises, { children: [_jsx(Choise, { isAnswer: true, children: _jsx(_components.p, { children: _jsx(_components.code, { children: "React.createElement(\"h1\", null, \"Hello World\")" }) }) }), _jsx(Choise, { children: _jsx(_components.p, { children: _jsx(_components.code, { children: "React.createElement(\"h1\", null, [\"Hello World\"])" }) }) }), _jsx(Choise, { children: _jsx(_components.p, { children: _jsx(_components.code, { children: "React.createElement(\"

\", null, {\"Hello World\"})" }) }) }), _jsx(Choise, { children: _jsx(_components.p, { children: _jsx(_components.code, { children: "React.createElement(\"jsx.h1\", null, {jsx:\"Hello World\"})" }) }) })] }), _jsxs(Answer, { children: [_jsx(_components.p, { children: _jsx(_components.code, { children: "React.createElement(\"h1\", null, \"Hello World\")" }) }), _jsxs(_components.p, { children: ["Since we have ", _jsx(_components.code, { children: "Hello World" }), " string, the third argument of createElement would be a simple \"string\"."] })] })] }), _jsxs(QuestionSet, { children: [_jsxs(Question, { children: [_jsx(_components.p, { children: "Is this valid React JSX?" }), _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx", children: "function App() {\n return \"Hello World\"\n}\n" }) })] }), _jsxs(Choises, { children: [_jsx(Choise, { isAnswer: true, children: _jsx(_components.p, { children: "Valid" }) }), _jsx(Choise, { children: _jsx(_components.p, { children: "Invalid" }) })] }), _jsxs(Answer, { children: [_jsx(_components.p, { children: "It's valid because react renders a string from the component." }), _jsx(_components.p, { children: "On the HTML, it would look like this" }), _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "
Hello world
\n" }) })] })] }), _jsxs(QuestionSet, { children: [_jsxs(Question, { children: [_jsx(_components.p, { children: "Is this valid React JSX?" }), _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx", children: "function App() {\n return [1, 2, 3]\n}\n" }) })] }), _jsxs(Choises, { children: [_jsx(Choise, { isAnswer: true, children: _jsx(_components.p, { children: "Valid" }) }), _jsx(Choise, { children: _jsx(_components.p, { children: "Invalid" }) })] }), _jsxs(Answer, { children: [_jsx(_components.p, { children: "It's valid because react treats each number as child element and renders like below:" }), _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "
123
\n" }) })] })] }), _jsxs(QuestionSet, { children: [_jsxs(Question, { children: [_jsx(_components.p, { children: "Is this valid React JSX?" }), _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-jsx", children: "function App() {\n return {}\n}\n" }) })] }), _jsxs(Choises, { children: [_jsx(Choise, { children: _jsx(_components.p, { children: "Valid" }) }), _jsx(Choise, { isAnswer: true, children: _jsx(_components.p, { children: "Invalid" }) })] }), _jsxs(Answer, { children: [_jsx(_components.p, { children: "If you try that, you'll see a error message on the console," }), _jsxs(_components.blockquote, { children: ["\n", _jsxs(_components.p, { children: ["Error: Objects are not valid as a React child (found: object with keys ", "). If you meant to render a collection of children, use an array instead."] }), "\n"] }), _jsx(_components.p, { children: "This is because, React expects components to return either a single React element, an array of elements, or a string (or number) representing a single element." }), _jsxs(_components.p, { children: ["When you return an array ", _jsx(_components.code, { children: "[1, 2, 3]" }), " from a component, React treats each element of the array as a separate child component and renders them accordingly. In contrast, when you return an object ", _jsx(_components.code, { children: "{}" }), " from a component, React doesn't know how to render it because it's not a valid React element."] }), _jsxs(_components.p, { children: ["😄 Answer provided by ", _jsx(_components.a, { href: "https://chat.openai.com/", children: "ChatGPT" })] }), _jsxs(_components.p, { children: ["👉 ", _jsx(_components.a, { href: "https://react.dev/reference/react/isValidElement#react-elements-vs-react-nodes", children: "Read more details about React Node vs React elements" })] })] })] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components); return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, { children: _jsx(_createMdxContent, props) })) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }

React is Just Javascript Quiz