- 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 your React app ends up as something your browser understands. In this section, we are going to put all of those words into practice. First, we will need a blank HTML page that will act as our starting point.
If you don’t have a blank HTML page handy, feel free to use the following:
<!DOCTYPE html> <html> <head> <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@15.3.2/dist/react.js"></script> <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
These two lines bring in both the core React library as well as the various things React needs to work with the DOM. Without them, you aren’t building a React app at all. Now, we aren’t done yet. There is one more library we need to reference. Just below these two script tags, add the following line:
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min. js"></script>
What we are doing here is 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, our HTML page should look as follows:
<!DOCTYPE html> <html> <head> <title>React! React! React!</title> <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script> <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.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 OK. We are going to fix that next.