Skip to content

Latest commit

 

History

History
40 lines (32 loc) · 1.22 KB

04-understanding-jsx.md

File metadata and controls

40 lines (32 loc) · 1.22 KB
Raw

Understanding JSX

  1. Use the Babel REPL to examine how the following JSX elements convert to JavaScript. Type in the element shown in the left pane, and view the compiled or 'desugared' output in the right pane. Make sure you have just one top level element on the left.

    1. <p></p>
    • What's the first parameter to React.createElement?
    1. <p className="foo"></p>
    • How is the className name translated?
    1. <p>Hello there</p>
    • What does the third parameter to React.createElement represent?
    1. <div><p>hello there</p></div>
    2. React.render(<div><p>hello there</p></div>, document.getElementById('foo'));
    3. Compare <p>paragraph HTML element</p> with <P>Paragraph Component</P>. For Pto work in JavaScript, it would need to be a variable. What would that variable contain?
    4. Why do you think more than one top-level element is not allowed?

  2. Create the JSX needed to render this component hierarchy:

React.createElement(
  "div",
  null,
  React.createElement(
    SpecialComponent,
    null,
    React.createElement(
      "p",
      null,
      "hello"
    )
  ),
  React.createElement(SpecialComponent, { foo: "abc" })
);