React Review – Creating a Single File / Single Component Page

I am doing a review of React on the Colt Steele Advanced Bootcamp program on Udemy.  First I create a single component / single file React app.  In this instance, I load in the React, ReactDOM, and ReactDOMFactories libraries.  I instantiate the MyInfo class on line 15.  On lines 17, 18 and 23, I have to use ReactDOMFactories to create HTML elements to display.  Line 24 – 26 returns rendered content.  But how do I display it?

I use ReactDOM (lines 30-32) to create an element to be displayed on the DOM.  On line 13, I create an empty div with an id of “app”.  On line 31, I update that div with the rendered content.

This is the Github repository for the first iteration: https://github.com/jbhafner/OnePageReact

I can make this a little bit simpler with the help of JSX and Babel.  JSX stands for Javascript XML.  It allows us to embed Javascript into HTML/XML.  In order to use JSX, we need a transpiler to translate the JSX into standard Javascript.  I will use Babel for this.  As you can see on lines 9-12, I have removed the ReactDOMFactories library and replaced it with Babel.  In lines 22 – 27, I have replaced the ReactDOMFactory calls with JSX, which Babel will compile for us down into vanilla Javascript.

While I am using JSX here below, I am not yet making any use of Javascript inside the JSX.

Now I will beef up my JSX with some Javascript.  On lines 29, 31 and 32, I am passing in some Javascript.  I tell JSX to evaluate that code as Javascript by putting it in curly brackets { }.

Finally, I move all the data and logic on hobbies into a second component called “HobbyList”.  I use the map() method to create a list of hobbies.  I simply return HobbyList to the the MyInfo component by calling it on line 45.

This is the Github repository for the final iteration: https://github.com/jbhafner/OnePageReact-JSX-JS-MultipleComponent

 

Leave a Reply

Your email address will not be published. Required fields are marked *