- Dealing with JSX
- Getting Your React On
- Displaying Your Name
- It's All Still Familiar
- Conclusion
This chapter is from the book
This chapter is from the book
This chapter is from the book
It’s All Still Familiar
While the JavaScript looks new and shiny thanks to JSX, the end result your browser sees is nice, clean HTML, CSS, and JavaScript. To see this for yourself, let’s make a few alterations to how our app behaves and looks.
Changing the Destination
The first thing we’ll do is change where our JSX gets output. Using JavaScript to place things directly in your body element is never a good idea. A lot can go wrong—especially if you are going to be mixing React with other JS libraries and frameworks. The recommended path is to create a separate element that you will treat as a new root element. This element will serve as the destination our render method will use. To make this happen, go back to the HTML and add a div element with an id value of container.
Instead of showing you the full HTML for this one minor change, here is what just our body element looks like:
<body>
<div id ="container "></div >
<script type ="text/babel ">
ReactDOM.render (
<h1>Batman</h1>,
document.body
);
</script >
</body >
With our container div element safely defined, let’s modify the render method to use it instead of document.body. Here is one way of doing this:
ReactDOM.render (
<h1>Batman</h1>,
document.querySelector ("#container" )
);
Another way of doing this is by doing some things outside of the render method itself:
var destination = document.querySelector ("#container" );
ReactDOM.render (
<h1>Batman</h1>,
destination
);
Notice that the destination variable stores the reference to our container DOM element. Inside the render method, we simply reference the same destination variable instead of writing the full element-finding syntax as part of the argument itself. The reason I want to do this is simple. I want to show you that you are still writing JavaScript and render is just another boring old method that happens to take two arguments.
Styling It Up!
Time for our last change before we call it a day. Right now, our names show up in whatever default h1 styling our browser provides. That is just terrible, so let’s fix it by adding some CSS. Inside your head tag, add a style block with the following CSS:
#container {
padding : 50px;
background-color : #EEE;
}
#container h1 {
font-size : 48px;
font-family : sans-serif;
color : #0080A8;
}
After you have added all of this, preview your page. Notice that our text appears with a little more purpose than it did earlier when it relied entirely on the browser’s default styling (see Figure 2-1).
)
Figure 2-1 The result of adding the CSS.
The reason this works is that our DOM’s body, after running all of the React code, contains our container element with an h1 tag inside it. It doesn’t matter that the h1 tag was defined entirely inside JavaScript in this JSX syntax or that your CSS was defined well outside of the render method. The end result is that your React app is still going to be made up of some 100% organic (and cage-free!) HTML, CSS, and JavaScript:
<!DOCTYPE html>
<html >
<head >
<title >React! React! React!</title >
<script src ="https://fb.me/react-15.1.0.js "></script >
<script src ="https://fb.me/react-dom-15.1.0.js "></script >
<script src ="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.
js "></script >
<style >
#container {
padding : 50px;
background-color : #EEE;
}
#container h1 {
font-size : 144px;
font-family : sans-serif;
color : #0080a8;
}
</style >
</head >
<body >
<div id ="container "></div >
<script type ="text/babel ">
var destination = document.querySelector ("#container" );
ReactDOM.render (React.createElement (
"h1 ",
null ,
"Batman "
), destination);
</script >
</body >
</html >
Notice that there is nary a trace of React-like code in sight. Also, we should use the word nary more often in everyday conversation!