A Rootin' Tootin' Beginner's Guide To React

#react #javascript #webdev #html

Alright, bucko, buckle up and hold onto your socks, because this is going to be a wild ride... for about two days. Then everything will click in your head and suddenly the sun will shine again. But until then, you're going to want to kick a tree and shout at a wall. Don't do that.

First things first, this article I'm blessing your eyeballs with the pleasure of reading assumes that you're proficient with JavaScript and HTML at least. Also, a sprinkle of jQuery wouldn't hurt. As they say, you can't ride a pony if you don't have the reins. If you're confident in your coding skills, read on, cowboy, read on.

First, let me tickle your fancy with an interesting new tool: JSX. JSX stands for JavaScript XML. It's basically a fancy way of saying that the lovely people over at Facebook have blended JavaScript and HTML into one weird language and now it's going to be your best friend alongside some new ES6 notation that you'll probably want to brush up on.

So, the old way of creating an element would've either used document.createElement(...), or if you're not a caveman, you would probably use something along the lines of $('<div>...</div>').doSomething(). Well, JSX allows us to do this a lot more directly. To create a new element in JSX, you could do something like this:

var element = (
  <div id="thisIsDiv">
    I am div.
  </div>
);

Now there is something to note. You will need a transpiler in order for JSX to run on your browser. The React docs themselves recommend you use a little program called Babel. Maybe you've heard of it, maybe you haven't, but you're about to learn. Babel basically converts all your .jsx files into a plain old .js file so that it can be run, but thanks to the wonderful magic that is React, that's all done both automatically and efficiently. All you need to worry about is writing your JSX code and then running your transpile command it for it to go into effect.

Now On To React

React is really neat. It works in a world of components and "props" (no, not like in movies), and you'll probably never stop using it once you get used to it. It did to jQuery what jQuery did to JavaScript; sure, you can go without it, but it would be a lot less fun.

Back to the topic. React heavily brings object-oriented programming concepts, more concisely referred to as Model-View-Controller concepts, to web development. Here's a very simple example of a component:

function Cowboy(props) {
  return <div> I wear spurs on my {props.shoes}</div>;
}

Now, besides the fact that we're jumping straight into using the JSX syntax, you may have also noticed that we're passing in 'props' to our function. If you put 'prop' and 'erty' together, you may have guessed that 'props' is short for 'properties'. Well, you'd be right. If you want a cookie you can check in your browser ba dum tiss.

Basically, whenever you create this Cowboy component, what ever you pass into it is thrown together into this props object. Why, you may ask? Because React. Anyway, to get out what you pass in, you generally have to access the props object and go from there. There is a way around that, but that's a topic for another day.

Another thing you may or may not have noticed is that our {props.shoes} statement is wrapped in curly braces. That's because in JSX, when we want to write JavaScript code, we have to escape the JSX syntax with the {} operators, and anything inside becomes vanilla JavaScript again.

After that, to assign the value of that function to a variable, just to make it easier to use, you could say:

var CowBoyBootSpurThing = <Cowboy shoes='Boots' />;

You'll notice that we're using HTML-like tags when we're assigning this variable and, if you were to treat this like vanilla JavaScript, you're not even invoking the Cowboy function. But, in the weird but allegedly better world of React, this is how you do things now. Let me explain:

The first bit, var CowBoyBootSpurThing = is pretty straightforward. If you need help with that you might have lied about your JavaScript skills to get this far down the page. That's okay though.

It's the <Cowboy shoes='Boots' /> part that's weird, right?
In a nut shell, or to you non-cowboys, in a pickle, this is creating a React component (hence the '<' and '>' symbols) and telling React you want to create what's called a user-defined component, which will now be a 'Cowboy' component.

From there, shoes='Boots' is telling React that you want to invoke the aforementioned Cowboy function and send in 'Boots' as an argument. However, because on the other side it all gets thrown into the props object, we have to feed it what's essentially a key/value pair. So in this example, 'shoes' is the key, and 'Boots' is the value.

To imagine this in JavaScript, it would look like this once it's in the props object:

var props = {
  shoes: boots,
  // Some other stuff
}

So that's why, back to our original function, which if you forgot was this:

function Cowboy(props) {
  return <div> I wear spurs on my {props.shoes}</div>;
}

That's why you have to say {props.shoes} in order to get 'boots'.

Aaaaaaanyway,

so you have your React component, and you kinda get the basics of the props object. How do you take this magic pot of goop and put it on the screen? Well I'll tell you. There's a neat function that the React library includes called ReactDOM.render(). This is the most crucial part of using react. Without this puppy, nothing else will matter.

ReactDOM.render() takes two arguments. The first one is the component you want to render, and the second one is the node on the DOM you want to parent your component to.

So back with our example. To put it all together, you'd do:

ReactDOM.render(CowBoyBootSpurThing, document.getElementById('root'));

And there you have it. It's that easy. But not really, because this is only the beginning cue evil laugh.

But, don't get discouraged. You'll pick it up quickly and pretty soon it'll be as second nature as JavaScript itself probably feels at this point. Play around with it a bit, and experiment with ES6 Classes and all that jazz.

Also, DON'T FORGET TO IMPORT THE MODULE YOU'RE WORKING WITH.

Maybe that'll make sense later, maybe it won't. I wish I would've read that sooner.

Yee-haw, partner!