💻 Exercise One: Pure Javascript
Create and append dom elements in vanilla javascript. Write javascript code between <script> tags to produce the codeblock below on an html file
Use the code block below as your starting point.
Solution:
💻 Exercise Two: Babel for inline JSX
Exercise 2a: Create an div element with a class of container with Hello World written on it. Use jsx syntax. Assume that a div with an id of root already exists in the page. Put the div with a class of container inside the root node. Use ReactDom to render this on the browser.
Solution:
Exercise 2b: Do the same as in Exercise 2a, but instead of using jsx syntax, use React.createElement instead.
Solution:
Fun fact: you can actually use React (and optionally the babel compiler to add jsx) directly on your html file like this:
💻 Exercise Three: Multiple children
Write code using React to generate the html code below.
Solution:
💻 Exercise Four: Function Components
Write a function message that you can reuse to produce the code below. This function must be fed to React.createElement() Will this work if the first letter is not a capital letter? What is the difference between using writing the function to be const message = () => {} and const Message = () => {} ?
Solution:
You can do something like this and it will work, but it's not following the convention the Babel compiler recognizes.
In this case, it is being used as a component. It works but not best practice. You should use capitalized Message instead of message. That way, you'd be following the convention which the babel compiler understands.
💻 Exercise Five: How babel compiles jsx
Understand how babel compiles jsx based on the appearance of the component name.
In order words, how would babel compile the following components?
Solution: