How to Build Your First React App
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
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
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:
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.