- 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
The JavaScript looks new and shiny thanks to JSX, but the end result your browser sees is nice and 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
First we’ll change where the 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’re 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 your render method will use. To make this happen, go back to the HTML and add a div element with an id value of container:
<body>
<div id="container"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Batman</h1>,
document.body
);
</script>
</body>
With the container div element safely defined, let’s modify the render method to use it instead of document.body. Here’s one way of doing this:
ReactDOM.render(
<h1>Batman</h1>,
document.querySelector("#container")
);
Another option is to do some things outside the render method itself:
var destination = document.querySelector("#container");
ReactDOM.render(
<h1>Batman</h1>,
destination
);
Notice that the destination variable stores the reference to your container DOM element. Inside the render method, you simply reference the same destination variable instead of writing the full element-finding syntax as part of the argument itself. The reason for this is simple: I want to show you that you’re still writing JavaScript and that render is just another boring old method that happens to take two arguments.
Styling It Up!
Time for the last change before we call it a day. Right now, our names show up in whatever default h1 styling the browser provides. That’s just terrible, so let’s fix that by adding some CSS. Inside your head tag, let’s add a style block with the following CSS:
<style>
#container {
padding: 50px;
background-color: #EEE;
}
#container h1 {
font-size: 144px;
font-family: sans-serif;
color: #0080A8;
}
</style>
After you’ve added everything, preview your page. Notice that the text appears to have a little more purpose than it did earlier, when it relied entirely on the browser’s default styling (see Figure 2.5).
)
Figure 2.5 The result of adding the CSS.
This works because, after running all the React code, the DOM’s body 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 the render method. The end result of your React app is still going to be made up of some 100% organic (and cage-free!) HTML, CSS, and JavaScript. If we had to see what this transpiled JavaScript looks like, it would look a bit like the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React! React! React!</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.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’s nary a trace of React-like code in sight. (Also, we should use the word nary more often in everyday conversation!)