Learn React page

Learn React by building a feature-rich Tic-Tac-Toe game in this beginner React guide. This hands-on course will introduce both fundamental and more advanced React concepts! By the end of this course, you will have mastered functional components, hooks, and component optimization.

Before You Begin

Before beginning this tutorial, you will want to have some familiarity with HTML and JavaScript. Specifically, you will need to understand functions, objects, and arrays. Additionally, you should be familiar with some of the more recent ECMAScript features, such as arrow functions, let, const and the rest operator. It is also beneficial to have some familiarity with NPM, though it is not strictly necessary to begin.

What is React?

In a nutshell, React is a front-end JavaScript library which makes it very easy to build scalable apps.

While it's most commonly used for building web apps, React can also be used to create mobile & desktop apps through React Native and Electron. Although this course will not explicitly cover them, the theory contained here will still fully apply to other environments.

React's goal is to enable developers to break down the view layer of their apps into small, reusable chunks called components. These components are rendered as plain HTML and tracked in memory as Virtual DOM objects. As data or state in the application changes, the underlying Virtual DOM is updated and we see the coresponding markup change. This makes React very efficent at making updates as only components that have changed will be rendered again.

One of the best things about React is that it can be used in any website, even one that is already built with another framework. This makes it easy to convert an existing project to React, or just use it for one part of a site.

Course Outline

This guide begins by walking you through how to set up an environment, providing an introduction into JSX (JavaScript flavor of XML) and some basic React theory.

Once you're all setup and oriented into the framework, you'll learn how to build reusable web components using props, and you will discover the difference between controlled & uncontrolled components. You'll also learn the various ways of doing styling, and how CSS can be integrated into JSX.

The second half of the guide will cover more intermediate topics like state management using hooks and making components as optimized as possible.

Throughout this guide, we'll be building out a simple Tic-Tac-Toe game, gradually applying all of these concepts to produce a clean and optimized solution!

Next Steps

✏️ Head over to the first lesson and get your environment setup.