Chapter 1. Welcome to React
React is a popular library used to create user interfaces. It was built at Facebook to address some of the challenges associated with large-scale, data-driven websites. When React was released in 2013, the project was initially viewed with some skepticism because the conventions of React are quite unique.
In an attempt to not intimidate new users, the core React team wrote an article called “Why React?” that recommended that you “Give It [React] Five Minutes.” They wanted to encourage people to work with React first before thinking that their approach was too crazy.
Yes, React is a small library that doesn’t come with everything you might need out of the box to build your application. Give it five minutes.
Then the questions start to arise: how do I convert this JSX? How do I load data? Where does the CSS go? What is declarative programming? Every path leads to more questions about how to incorporate this library in your actual day to day work. Every conversation introduces new terminology, new techniques, and more questions.
Obstacles and Roadblocks
By taking a few minutes to learn about React components, you’ve opened a door to a different way of thinking about and approaching web development. However, there are some learning obstacles that you’ll have to overcome to begin writing production code with React.
React Is a Library
New ECMAScript Syntax
As of 2015, new language features and syntax additions will be released every year. This replaces a numbered release system (ECMAScript3, ECMAScript 5) with a yearly one (ECMAScript 2016, ECMAScript 2017). As the language evolves, the early adopters in the React community tend to use the new syntax. This often means that documentation assumes knowledge of the latest ECMAScript syntax. If you are not familiar with the latest spec, looking at React code can be daunting.
Why React Doesn’t Have to Be Hard to Learn
From there, we will cover foundational React knowledge including your first components and how and why we need to transpile our code. With the basics in place, we will break ground on a new application that allows users to save and organize colors. We will build this application using React, improve the code with advanced React techniques, introduce Redux as the client data container, and finish off the app by incorporating Jest testing and routing with the React Router. In the final chapter, we will introduce universal and isomorphic code and enhance the color organizer by rendering it on the server.
We hope to get you up to speed with the React ecosystem faster by approaching it this way—not just to scratch the surface, but to equip you with the tools and skills necessary to build real world React applications.
React is still new. It has reached a place where core functionality is fairly stable, but even that can change. Future versions of React will include Fiber, a reimplementation of React’s core algorithm which is aimed at increasing rendering speed. It’s a little early to hypothesize about how this will affect React developers, but it will definitely affect the speed at which apps are rendered and updated.
Keeping Up with the Changes
As changes are made to React and related tools, sometimes there are breaking changes. In fact, some of the future versions of these tools may break some of the example code in this book. You can still follow along with the code samples. We’ll provide exact version information in the package.json file, so that you can install these packages at the correct version.
Beyond this book, you can stay on top of changes by following along with the official React blog. When new versions of React are released, the core team will write a detailed blog post and changelog about what is new.
There are also a variety of popular React conferences that you can attend for the latest React information. If you can’t attend these in person, React conferences often release the talks on YouTube following the events. These include:
Working with the Files
The GitHub repository associated with this book provides all of the code files organized by chapter. The repository is a mix of code files and JSBin samples. If you’ve never used JSBin before, it’s an online code editor similar to CodePen and JSFiddle.
One of the main benefits of JSBin is that you can click the link and immediately start tinkering with the file. When you create or start editing a JSBin, it will generate a unique URL for your code sample, as in Figure 1-1.
The letters that follow jsbin.com represent the unique URL key. After the next slash is the version number. In the last part of the URL, there will be one of two words: edit for editing mode or quiet for preview mode.
React Developer Tools
- React Developer Tools (see Figure 1-2)
Any time you see react-detector or show-me-the-react as active, you can open the developer tools and get an understanding of how React is being used on the site.
You do not need to use Node to use React. However, when working with React, you need to use the Node package manager, npm, to install dependencies. This is automatically installed with the Node installation.
If you’re not sure if Node.js is installed on your machine, you can open a Terminal or Command Prompt window and type:
$ node -v Output: v7.3.0
Ideally, you will have a Node version number of 4 or higher. If you type the command and see an error message that says “Command not found,” Node.js is not installed. This can be done directly from the Node.js website. Just go through the automated steps of the installer, and when you type in the
node -v command again, you’ll see the version number.