Let’s not overreact learning React
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. ✌
