04 Jul 2018
Perhaps another attempt at updating this blog. It’s been over a year since I started working full-time as a developer and the time seems to slip away sometimes.
We moved house back to my old stomping grounds as a kid. Not too far away from Mum’s house, which will be good when the baby arrives.
A bit over 5 weeks ago I fell off my electric push-bike and fractured by foot. I have been on crutches and have been on the mend slowly ever since.
I can’t wait for everything to get back to normal.
Anyway instead of cross-posting things I write on Medium (Like I have been doing in the past with these React articles) I thought I might just link to this one. It’s about the death of my Father and also about douchbags who tried to get me fired for standing up for truth and justice aka. the worst people in the world.
It’s called: 13 reasons why I will never apologise for calling out so called “health” professionals who literally advocate “death”. Please read and share if you like.
Bye for now.
14 Oct 2017
But it wasn’t because I learnt React
I’m done “learning” React.
At the same time I’ll probably never by “done” learning React.
This will be the third and final chapter in what might have been a much longer series had I not just a few months ago accepted a position working full-time as a front-end developer.
You can read the first and second article if you want some additional perspective.
A resolution to develop (as a person)
For New Year’s I resolved to make a slight redirection in the course of my career. I wanted to become a “proper” developer.
So I gave notice at my old job as in IT Support/Sysadmin and hit up every online learning resource I could find on the Internet about JavaScript development.
I avoided learning React for a long time simply because it seemed like a lot of effort for a library that might be replaced by something else (hello Vue) in a few months time anyway.
But I persisted, for a bit.
Getting hired
I would like to say that I got hired because I learnt React inside and out and was a genius at it. But I think it would be more accurate to say I got hired because I showed my willingness to learn new things.
(Plus I knew someone on the inside who recommended me for the position… that may or may not have had something to do with it.)
There was also a hell of a lot of trial and error and outright rejection beforehand while I was out there in the brutal job market. It was definitely a tough few months.
But still I persisted. I forced myself to get “out there”. I went along to local JavaScript meetups and React meetups. I spoke to people and tried to make as many friends as I could.
All the while I kept learning. And eventually the perfect role came along.
The first few weeks of work were actually spent learning a completely different JavaScript library (D3) which I had only very briefly looked at before.
And we are only now beginning to build a few React components that we will be able to use and re-use in future projects.
It’s a brave new world out there.
So here’s my takeaway from the whole experience
This turned out not to be a coding tutorial article like the others, but whatever. There are far better places on the Internet to learn React than through my rambling writing here.
But here are a few things I will leave with you on your journey.
You probably already kinda know React. There’s nothing magical about React. It’s just JavaScript and HTML and CSS being rendered to a screen.
JSX is not that scary. It’s pretty much just like HTML but right there in your JavaScript instead of a separate file.
React is all about components. You build your base App component and then you slot in all your other components into it like this:
function App() {
return (
<div>
<Header />
<Body />
<Footer />
</div>
);
}
And then you just render the App component to your page.
So just start building stuff. It is 100% the best way to learn. Go through the docs and tutorials and then get building. Build components and publish them on GitHub, even if they’re not very good.
Never stop learning. And have fun out there. Peace 🍑
17 May 2017
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?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
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:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Random</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<style>
html {
text-align: center;
font-size: 420px;
}
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Random(props) {
var maxNumber = 45;
var randomNumber = Math.floor((Math.random() * maxNumber) + 1);
return <div>{randomNumber}</div>;
}
ReactDOM.render(
<Random />,
document.getElementById('root')
);
</script>
</body>
</html>
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. ✌
10 May 2017
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:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
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. ✌
26 Apr 2017
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.
