Building Your First React App
- Dealing with JSX
- Getting Your React On
- Displaying Your Name
- It's All Still Familiar
- Conclusion
React is a popular web framework and library, but complex. Start at the very beginning and get your hands dirty by building a simple React app.
This chapter is from the book
This chapter is from the book
This chapter is from the book
By now, thanks to the previous chapter, you probably know all about the backstory of React and how it helps even your most complex user interfaces sing performantly. For all the awesomeness that React brings to the table, getting started with it (kinda like this sentence) is not the most straightforward thing. It has a steep learning curve filled with many small and big hurdles:
)
In this chapter, we start at the very beginning and get our hands dirty by building a simple React app. We encounter some of these hurdles head-on, and some of these hurdles we skip over—for now. By the end of this chapter, not only will we have built something you can proudly show off to your friends and family, we’ll have set ourselves up nicely for diving deeper into all that React offers in future chapters.
Dealing with JSX
Before we start building our app, there is an important thing we should cover first. React isn’t like many JavaScript libraries you may have used. It isn’t very 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:
)
It doesn’t matter if your web app was written using React or some other library like 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 is where the special nature of React comes in. Besides normal HTML, CSS, and JavaScript, the bulk of your React code will be written in something known as JSX. JSX, as I mentioned in Chapter 1, 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 we will see JSX in action in just a few moments), but there is 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 take our JSX and convert it into plain old JavaScript that your browser can understand.
If we didn’t do this, our React app simply wouldn’t work. That’s not cool. Fortunately, there are 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 rely on a JavaScript library to automatically convert JSX to something it understands. You specify your JSX directly just like 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 where 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 may be wondering why we don’t use the second solution always. The reason is that your browser takes a performance hit each time it spends time translating JSX into JS. That is totally acceptable when learning how to use React, but that is totally not acceptable when deploying your app for real-life use. Because of that un-acceptableness, we will revisit all of this and look at the first solution and how to set up your development environment later, once you’ve gotten your feet comfortably wet in React.