OK fine I’ll learn React
Or: how I learned to stop worrying and love the frontend
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)
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
index.html 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
charset 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.
body the only element we have is a
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
That’s it! Your first React app. How exciting.
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. ✌️
Part 2 is here:
Thanks for reading :) you can follow me on Twitter if ya wanna.