- 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
Getting Your React On
In the previous section, we looked at the two ways you have for ensuring that your React app ends up as something your browser understands. In this section, we put all those words into practice. First, you need a blank HTML page as your starting point.
Create a new HTML document with the following contents:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>React! React! React!</title> </head> <body> <script> </script> </body> </html>
This page has nothing interesting or exciting going for it, but let’s fix that by adding a reference to the React library. Just below the title, add these two lines:
<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>
These two lines bring in both the core React library and the various things React needs to work with the DOM. Without them, you aren’t building a React app at all.
Now, you aren’t done yet. You need to reference one more library. Just below these two script tags, add the following line:
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
Here you’re adding a reference to the Babel JavaScript compiler (http://babeljs.io/). Babel does many cool things, but the one we care about is its capability to turn JSX into JavaScript.
At this point, your HTML page should look as follows:
<!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> </head> <body> <script> </script> </body> </html>
If you preview your page right now, you’ll notice that this page is still blank, with nothing visible going on. That’s okay. We’re going to fix that next.