Learn React By Itself

James K Nelson

James is the editor of React Armory, and has been creating things with JavaScript for over 15 years.

Read more by JamesFollow @james_k_nelson on Twitter

In this series, you’ll learn React’s fundamentals by building an animated fractal. And you won’t even need to leave your browser! All of the exercises can be completed with the embedded editors – without downloading or installing anything.

1. React's Most Basics

   At its core, React is just JavaScript. It doesn't need a build system or fancy syntax. And with just two functions, it lets you create something amazing...

2. Custom React Elements

   React frees you from the binds of HTML by letting you create custom elements. And the best part? All it takes is a simple function.

3. Rendering and Re-rendering

   Let's pop the hood and see how React actually updates the DOM. And animate a fractal tree while we're at it...

4. Everything About Events

   Familiarize yourself with React Events through exercises. Start with the basics before learning about custom events and components.

5. Self-contained Components

   Learn how to use JavaScript classes to create components that encapsulate behavior and state.

6. A Brief Introduction to JSX

   React doesn't require JSX. But given the option, it will certainly save you keystrokes – as these live examples demonstrate.

By the end of this guide, you’ll have built your own animated fractal tree. Here’s a sneak peak – you can start the animation by clicking the button, and you can even change the animation by editing the two blue numbers.

Even if this seems like black magic now, it’ll be clear as day by the end of the series.

React Armory is constantly improving. Make sure you don’t miss out on the latest guides, examples and subscriber-only resources by subscribing now.