phocks observations on life, the universe, and nothing

Let’s not overreact learning React

How to learn React the slow way

Yep I’m still learning React. My previous article OK fine I’ll learn React gives a quick intro to me getting started with the JavaScript library all the kids are raving about these days.

This post will look at the basic building blocks of a React app. It may also try to make sense of why someone would actually use React in the first place… maybe.

The official React docs from Facebook can get slightly daunting when you first read them. It is easy to get overwhelmed because they introduce multiple new concepts at once. So here we’re gonna take things nice and slow, like really slow.

Remember our Hello World app from last time?

Basically when you open this file it loads React in your web browser and then renders <h1>Hello, world!</h1> in between the div so it displays Hello, world! on the page.

Previously I called the <h1>Hello, world!</h1> bit of code a React “component” but it is actually a React “element”. Whatever.

Let’s start building.

Baby’s first component

A React component is made up of one or more elements wrapped up in a JavaScript “function” or a JavaScript “class”. For now we’re just gonna focus on functions because they’re heaps easier.

This is the simplest React component you can get:

function Hello(props) {
  return <h1>Hello, world!</h1>
}

It’s a function named “Hello”. React functions need to start with a capital letter or they won’t work. It accepts some properties or as they like to call them. And it returns an element.

Anyway let’s make something semi-useful

So what’s the simplest thing we can make that actually does something useful? There’s probably something better but I think a random number generator might fit the bill.

Here’s the new code anyway:

Unfortunately Gist doesn’t highlight text/babel code just yet :(

Save this file or copy and paste the code into a HTML file and open it up in your web browser and you should get a big giant random number between 1 and 45 (the highest number in the Australian Lottery).

If you play the Australian lotto you could use this to pick your numbers for next week’s draw (as long as you promise to PayPal Me 2% of the winnings if you hit the jackpot).

So what’s happening here anyway?

First we add 2 basic styles to html so that the text is in the middle and it’s super big. Later on we will probably build the styles right into the components.

We then create a new React component called “Random”. I used variables in the function here to more easily show what’s happening. I set maxNumber to 45 but you can set it to anything you want. The Math.floor and Math.random thing is just a little trick to get JavaScript to give us a random whole number aka. integer between 1 and whatever.

Lastly we return our element. It’s just a div with the randomNumber we generated before inside it. We need to wrap this variable in curly brackets {} so that React knows to parse it as a variable and not text. You’ve probably heard of JSX. Well yeah this is JSX. But we’ll get to that later.

Down in ReactDOM.render we simply tell it to render our component to the page using . And there you have it!

Here’s a working copy http://random45.surge.sh

Just refresh the page for a brand new number!

I still don’t get it

We didn’t really get into why anyone would want to use React. But don’t worry I’m sure that will come up next time when we decide we want to reuse a few components and make them do different things.

Until then. Peace out coders. ✌

OK fine I’ll learn React

Or: how I learned to stop worrying and love the frontend

This will be an ongoing series. It will focus on my journey in forcing myself to learn this seemingly rather unintuitive JavaScript library called React.

I’ve been threatening to learn it for a while. Every time however I keep getting to a point and then I ask myself:

“Why the hell am I learning this I don’t even like building frontend user interfaces anyway?”

This time will be different. I hope.

What is React? (and what React isn’t)

React is a way to build reusable HTML components and then render them on to a web page with JavaScript. That’s it. OK I know there’s probably a bit more to it than that, but we’ll get to it later.

React is NOT a complete JavaScript framework. It’s just the frontend. So there’s no use comparing to Angular, or Ember, or Meteor at all really.

Minimum Viable Whatever

For starters we’re not going to worry about installing Node and npm and all that until later. It’s possible to build a simple React web app/website using a single HTML file. So here we go. Just copy and paste the following into a file called or whatever and open it in your web browser:

OK so what’s going on here?

It’s just your basic HTML5 page as indicated by the <!DOCTYPE html> up top. The needs to be set to UTF-8 for some reason or it won’t work. Then we have our title. Then three external scripts are imported so that React works. Don’t worry about these yet.

In the body the only element we have is a div with id="root" and this is where we will tell React to render our component.

Lastly we have a script. This is the React part. The <h1>Hello, world!</h1> bit is our React component. Yes it looks just like HTML. That’s because it is just HTML code, for now. Later on we’ll learn how build these components separately so they are reusable.

Lastly, we call on the ReactDOM.render(); method to render our react component onto the page using document.getElementById('root').

That’s it! Your first React app. How exciting.

What now?

You may be thinking:

“Wow, that’s dumb. I could have just typed the Hello, world! heading into the page manually and not used React at all.”

And you’d be right. Hopefully we’ll get to find out how React can actually be useful in real-world scenarios in the future.

Until then. Peace out coders. ✌

Developing (as a person)

Maybe I should start writing this more like a proper personal journal. If I just write for myself and disregard the opinions of others then I’m sure to increase my output and flow. It’s not like anyone is actually reading this anyway.

Yesterday was a public holiday for Anzac Day. Today is my first Wednesday not at work in a while. Late last year I made a resolution for change for the year to come. This is me following through with that idea. Now if I can only figure out which direction to take.

I guess for now it just comes down to whoever will take a chance in hiring me. With aspirations of building my own startup temporarily on hold for a while I guess my future is somewhat in the hands of others. But mostly I believe I’ll be moving in the direction of becoming a true software developer.

So I’ll keep on developing little projects at home. I’ll keep on going through online learning courses like freeCodeCamp and NodeSchool etc. And I’ll keep sending out my resume (CV) to places that look interesting.

Let’s see if anything develops.

Hauling Anchor

Taking another look at Anchor the internet audio podcast app thing whatever it is.

I remember having the idea a long time ago what if there was a service like Twitter but for audio? Anyway I started even doing a little SoundCloud account where I would record little updates on my phone and upload them.

I don’t think anyone really ever listened to my inanities though, but it was kind of fun anyway. Anyway, then I heard that an app called Anchor FM had launched and it was pretty much exactly the same concept. It was actually pretty well made and had great onloading etc. But the problem was I think that no one really knew what to do with it. I tried staying on the platform doing updates whenever I could but then time crept by and I mostly forgot about it. A familiar story.

Just the other day though Anchor relaunched with version 2.0. The first thing I noticed was all my old updates were gone. But don’t worry they are safely in the archive. Looks like they have taken a page from SnapChat’s book (like a lot of companies seem to be doing lately).

This new update has enormous potential. Basically you record updates and add songs from Spotify etc and they stay up on your station for 24 hours. This way you are almost forced to create new content every day to keep your station fresh. Best just to jump right to it. Check out my station below, or sign up and create your own.

Happy waving.

Website Swagger

Showcases are pretty dumb tbh. But I’ve decided to start making one anyway. It’s pretty much the same thing as my other site QuoteSwagga. It’s hosted on Tumblr and uses a custom hacked html template.

Still working on it obviously and I want to try to get people to submit their own sites and have them come up as showcased websites.

Anyway here it is: SiteSwagga if you wanna chech it out.