Introduction

You are going to be surprised how easy it is to learn the React API and start creating useful applications with it right away. This book is your first step. It will teach you the most important concepts of React, its main building blocks, and how to use it to build simple web applications.

This book will also teach you some of the popular, modern JavaScript concepts that are typically used with React. Learning and using modern JavaScript will make your React code better on many levels.

With modern JavaScript in your tool set, we’ll go through one example application to understand the core theory of working with React components. After that, we’ll put the knowledge into action and build a simple, timed memory challenge game where the player needs to recall the positions of cells in a grid. I built this one for my young children, and they love it.

Please note that this book will have a complete focus on the React library rather than any third-party packages that are usually used with React, like Redux React Router, or helper libraries like PropTypes. This does not mean that you should not use these libraries. It just means that for the duration of this book, your focus should be entirely on the React API. This focus will give you the understanding that’s needed for you to correctly use packages designed for React.

Note: Whenever non-React JavaScript logic is needed throughout the book (for example, to sum or sample an array), I will provide a ready function for it. I will also provide starting HTML/CSS templates so that you do not get distracted with non-React needed steps.

You do need to learn more than just React to work with React, however. This is a good thing. React is a small library, and it is not the answer to everything. To name a few examples, you need to learn Node and many Node-based tools to run React applications, you need to learn how to work with data APIs to correctly make data available for React applications, and you need to learn many browsers’ APIs like history and localStorage to correctly integrate React applications with what browsers can offer beyond the DOM.

During your learning process, the best thing you can possibly do is build stuff with your own hands. Do not copy and paste examples, and do not follow instructions blindly! Instead, mirror the instructions to build something else (ideally, something you care about). For example, after understanding the memory challenge game that we will build in this book, try to come up with different game ideas and implement them as well. After going through the memory challenge game example, try to improve it and add more features beyond what is presented in this book. Building new things with your own hands is the only truly helpful strategy when it comes to learning programming in general. React is no exception.

“You don’t learn to walk by following rules. You learn by doing, and by falling over.”

—Richard Branson

Is this book for you?

Although this book covers a little bit of modern JavaScript, it will not teach you the basics of the language. You need a good understanding of the JavaScript language before reading this book.

Nor will this book teach you anything about HTML/DOM and CSS. A good understanding of how these languages work is essential to getting good at React.

I like to be specific about the level of HTML and JavaScript that you need before learning React:

• If you do not know what the DOM is, or understand the concept of children and parent nodes, or how to define simple event handlers on DOM elements, you are probably not ready for React. React can be used without understanding the DOM API, but you will be a lot more productive in React if you know the basics. If you don’t know anything about the DOM API, I strongly encourage you to read this introduction first.
• For JavaScript, if you do not know how to write for loops and if statements, or if you do not understand the concept of scopes and closures, you should probably learn these concepts in pure JavaScript before you dive into React. I have many resources for you about learning the JavaScript concepts you need to work with React applications. I have them all hosted here. Check them out first and make sure you understand them on their own before seeing them in action with React.

I am not saying you should not try to learn React if these concepts are new to you! I am just saying that these concepts will be needed when you work with React, and if you don’t have a good understanding of them, you’ll think that React is hard to learn. It is not. It just has some prerequisites that you might be lacking.

If you’re coming to React with some previous knowledge of JavaScript but you have not used the modern features of the language that were added in the past few years, that is not a problem. In Chapter 3, I’ll introduce you to features like arrow functions, destructuring, rest/spread operators, promises, and more.

You don’t need to be an expert in JavaScript to write React applications, but you’re likely to run into problems related to the JavaScript language syntax rather than the React API. I’ve put together a reference article about the common problems learners usually face when working with React, which you can read here. If you run into a problem while experimenting with React, make sure it’s not one of the common problems listed in that article.

The jsComplete playground

You can follow along with all the examples in the book using the jsComplete React playground. This playground is a simple tool where you can test React (and JavaScript) code right in the browser, without any need to install, configure, import, or compile anything. I built this playground with React, and made it as simple as possible to remove any noise around learning the React API.

Figure 1: The jsComplete React playground interface

The playground has a two-column interface: an editor and a display. The latest version of React and its DOM renderer (which is named ReactDOM) are pre-loaded and available on the global scope. The editor understands JSX (the XML-like JavaScript syntax extension used with React) and the modern features in JavaScript. The display has a DOM element with an ID of mountNode. When you execute your JavaScript code, anything you put in the mountNode element shows up in the display. The display will also show any errors you encounter when you execute your code.

To execute the code at any time, press Ctrl+Enter. Try the following line, for example:

Or mount a simple React element with JSX:

Note: Don’t worry about this line yet. I’ll explain everything about it in the next chapter.

Throughout the book, I’ll be sharing saved code sessions using unique playground links so that you start from predefined snapshots. Use these links to work through the book’s examples and compare your progress with the milestones completed in the book.

A playground tool like this one is a good start, but you’ll eventually need to configure your own React environment. However, I think for the duration of this book you should keep your focus on learning the React API, and just use the playground. Once you’re comfortable with React, you can use packages like create-react-app to generate a local environment, or you can configure your own. I wrote a guide on that topic, which you can read here, but don’t go through it yet. Learn React first!

Note: Parts of this book were adapted from articles previously published on the jsComplete library and my Medium account. I am thankful to the many readers who provided early feedback on these articles and helped me make them better for future learners. Please do not hesitate in providing any further feedback about this book, good or bad! You can tweet me @samerbuna or find me at the jsComplete Help Slack channel.