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
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Simmental Shield</title> <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script> <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script> <script src="https://unpkg.com/[email protected]/index.js"></script> </head> <body> <div id="app"></div> <script type="text/javascript"> class MyInfo extends React.Component { render() { const h1 = ReactDOMFactories.h1(null, "Brian's Simmental Shield Photo"); const img = ReactDOMFactories.img({ src: "SimmentalCrossCover.jpg", height: 420, alt: "Simmental Cross Magazine 1983" }); const myDiv = ReactDOMFactories.div(null, h1, img); return ( myDiv ) } } ReactDOM.render(React.createElement(MyInfo), document.getElementById("app") ); </script> </body>
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.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Simmental Shield</title> <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script> <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script> <!-- Remove ReactDomFactories and use Bable instead <script src="https://unpkg.com/[email protected]/index.js"></script> --> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script> </head> <body> <div id="app"></div> <!-- change type from text/javascript to text/babel. This tells Babel to transpile into normal JS--> <script type="text/babel"> class MyInfo extends React.Component { render() { return ( <div> <h1>Brian's Simmental Shield Photo</h1> <img src="SimmentalCrossCover.jpg" alt="Simmental Cross Magazine 1983" height="420" /> </div> ); } } ReactDOM.render(<MyInfo />, document.getElementById("app") ); </script> </body>
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 { }.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simmental Shield</title>
<link href="style.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<!-- Remove ReactDomFactories and use Bable instead
<script src="https://unpkg.com/[email protected]/index.js"></script>
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<!-- change type from text/javascript to text/babel. This tells Babel to transpile into normal JS-->
<script type="text/babel">
class MyInfo extends React.Component {
render() {
const liStyle = {fontSize: '1.5em'}
return (
<div className="card">
<h1 className="name">Brian's Simmental Shield Photo</h1>
<img src="SimmentalCrossCover.jpg"
alt="Simmental Cross Magazine 1983"
height="420" />
<h5 style={{fontSize: '2em', margin: '2px'}}>Hobbies</h5>
<ul>
<li style={liStyle}>Travel</li>
<li style={liStyle}>Reading</li>
</ul>
</div>
);
}
}
ReactDOM.render(<MyInfo />,
document.getElementById("app")
);
</script>
</body>
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
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Simmental Shield</title> <link href="style.css" rel="stylesheet"> <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script> <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script> <!-- Remove ReactDomFactories and use Bable instead <script src="https://unpkg.com/[email protected]/index.js"></script> --> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script> </head> <body> <div id="app"></div> <!-- change type from text/javascript to text/babel. This tells Babel to transpile into normal JS--> <script type="text/babel"> class HobbyList extends React.Component { render() { const liStyle = {fontSize: '1.5em'}; const hobbies = ["Travel", "Reading", "Riding Trains"]; return ( <div> <h5 style={{fontSize: '2em', margin: '2px'}}>Hobbies</h5> <ul> {hobbies.map((h, i) => { return <li key={i} style={liStyle}>{h}</li> })} </ul> </div> ) } } class MyInfo extends React.Component { render() { return ( <div className="card"> <h1 className="name">Brian's Simmental Shield Photo</h1> <img src="SimmentalCrossCover.jpg" alt="Simmental Cross Magazine 1983" height="420" /> <HobbyList /> </div> ); } } ReactDOM.render(<MyInfo />, document.getElementById("app") ); </script> </body>