1. Learn

Learn React By Itself

No NPM, no Webpack, no Redux, no Router.

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.

Contents

  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.

What You’ll Build

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.

import { PythagorasTree } from 'react-armory-pythagoras-tree'

ReactDOM.render(
  <PythagorasTree
    // Try changing `sprout` from 0.01 to 0.2
    sprout={0.01}

    // Try changing `sway` from 0.04 to 0.3
    sway={0.04}
  />,
  document.getElementById('app')
)

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

Go to part 1: React's Most Basics

Stay Up To Date

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

Join React Armory,
Get Cool Stuff

Exclusive access to resources.

Early access to new content.

No spam, ever.

React Armory is growing. Join in to be the first to experience new lessons, examples and resources.