How to Build Your First React App
- Dealing with JSX
- Getting Your React On
- Displaying Your Name
- It’s All Still Familiar
- Conclusion
Learn how to build a simple React app along with how to overcome some hurdles head-on and which hurdles you can skip over—for now.
Save 35% off the list price* of the related book or multi-format eBook (EPUB + MOBI + PDF) with discount code ARTICLE.
* See informit.com/terms
This chapter is from the book
This chapter is from the book
This chapter is from the book
Thanks to the previous chapter, you probably now know all about the backstory of React and how it helps even your most complex user interfaces sing. For all the awesomeness that React brings to the table, getting started with it (kind of like this sentence) is not the most straightforward. It has a steep learning curve filled with many small and big hurdles, as in Figure 2.1.
)
Figure 2.1 Hurdles come in a variety of sizes. Some are big. Some are small.
In this chapter, we start at the very beginning and get our hands dirty by building a simple React app. You’ll encounter some of these hurdles head-on, and some of these hurdles you’ll skip over—for now. By the end of this chapter, not only will you have built something you can proudly show off to your friends and family, but you’ll have set yourself up nicely for diving deeper into all that React offers in future chapters.
Dealing with JSX
Before we start building our app, there’s an important point to cover first. React isn’t like many JavaScript libraries you might have used. It doesn’t get too happy when you simply refer to code you’ve written for it using a script tag. React is annoyingly special that way, and it has to do with how React apps are built.
As you know, your web apps (and everything else your browser displays) are made up of HTML, CSS, and JavaScript (see Figure 2.2).
)
Figure 2.2 Web apps are built in HTML, CSS, and JavaScript.
It doesn’t matter whether your web app was written using React or some other library, such as Angular, Knockout, or jQuery. The end result has to be some combination of HTML, CSS, and JavaScript; otherwise, your browser really won’t know what to do.
Now, here’s where the special nature of React comes in. Besides normal HTML, CSS, and JavaScript, the bulk of your React code will be written in JSX. As I mentioned in Chapter 1, “Introducing React,” JSX is a language that allows you to easily mix JavaScript and HTML-like tags to define user interface (UI) elements and their functionality. That sounds cool and all (and you’ll see JSX in action in just a few moments), but there’s a slight problem. Your browser has no idea what to do with JSX.
To build a web app using React, we need a way to convert our JSX into plain old JavaScript that your browser can understand (see Figure 2.3).
)
Figure 2.3 JSX needs to turn into something our browser understands.
If we don’t do this, our React app simply won’t work. That’s not cool. Fortunately, we have two solutions to this:
Set up a development environment around Node and a handful of build-tools. In this environment, every time you perform a build, all of your JSX is automatically converted into JS and placed on disk for you to reference like any plain JavaScript file.
Let your browser automatically convert JSX to JavaScript at runtime. You specify your JSX directly, just as you would any old piece of JavaScript, and your browser takes care of the rest.
Both of these solutions have a place in our world, but let’s talk about the impact of each.
The first solution, while a bit complicated and time-consuming at first, is the way modern web development is done these days. Besides compiling (transpiling, to be more accurate) your JSX to JS, this approach enables you to take advantage of modules, better build tools, and a bunch of other features that make building complex web apps somewhat manageable.
The second solution provides a quick and direct path in which you initially spend more time writing code and less time fiddling with your development environment. To use this solution, all you do is reference a script file. This script file takes care of turning the JSX into JS on page load, and your React app comes to life without you having to do anything special to your development environment.
For our introductory look at React, we are going to use the second solution. You might be wondering why we don’t always use the second solution. The reason is that your browser takes a performance hit each time it translates JSX into JS. That is totally acceptable when learning how to use React, but it is totally not acceptable when deploying your app for real-life use. Because of that lack of acceptability, we will revisit all of this later, to look at the first solution and how to set up your development environment after you’ve gotten your feet comfortably wet in React.