React.js Tutorial

React Itself – A React.js Tutorial

This series aims to be a React.js tutorial that compliments Pete Hunt‘s how to where he recommends people start by learning React Itself.

I think the biggest challenge people make when learning React is they get lost in the tooling and ecosystem. Before you’ve even built your first React component you’re plunged into learning Webpack, ES6, React Router or Developer Tools.

This React.js tutorial is different.

A Simple Start

All code in this series is available on my personal Github. Let’s start with a basic HTML file.

How to run this tutorial?

This file can be copy pasted into an index.html file anywhere on your computer and opened directly with a web browser of your choosing! No need for any tools or even your terminal.

React.js Tutorial Breakdown

I left some comments in the above code, but let’s break it all down!

A Mounting Point

This sample file is a basic HTML document until we get to line 7. On that line we have an empty div with an id of root. The id can be anything you want, it just has to match the code on line 18 where we attach our component.

If you’ve ever worked with a JavaScript framework like Backbone, you’re probably used to the concept of creating an empty div as the mounting point for your application.

Dependencies

Next, on line 10 we start including our dependencies. For this minimal react tutorial, all we need is Facebook’s react and react-dom libraries. The main React library has been separated out so it can be used with non web (no DOM) applications such as iOS and Android.

Out Application

Line 16 begins the meat of our application. All React applications have at least one ReactDOM.render() call. That method takes two parameters.

  1. A React component, representing your application.
  2. An HTML selector, your mount point.

For this simple beginning app, we make a component that is a single element (an h1) with the value of “Our First React.js Component!”. In later posts we’ll build more complex components. It’s also worth noting we could have just as easily written:

This is also where you may have seen JSX used to write markup. JSX will not be part of this tutorial series as we are just focusing on learning React.js.

Stay tuned for a lot more posts in this series and let me know in the comments what is / isn’t working!

Jon Kuperman

Jon Kuperman is a Programmer, Teacher and Entrepreneur. He's currently blogging at Code Planet and podcasting at The Web Behind.

Leave a Reply

Your email address will not be published. Required fields are marked *