Okay, now that we know what React.js is and how to get it up and running, let’s spend today’s post breaking down the pieces in front of us after using the create-react-app command we talked about two weeks ago. This is all going to be assuming you’re following along and have the standard boiler plate file structure, so you can go ahead and create a new app if you need to. This will mostly just include what is happening at the very top level of React, because I don’t think knowing exactly how every behind-the-scenes thing works is necessary to create your first simple app, and because I don’t know if I feel comfortable enough myself to explain it to someone else yet.
I want to start this post today with the caveat that, although really simple in idea, I really struggled with this coding challenge. So, if at any point you’re thinking, “the answer to this HAS to be simpler than this, right?” well you’re probably right, but I can’t help you there. I’ll post what I did to make the tests pass, and then I’ll post an alternate solution a friend of mine sent to me that maybe will get you thinking in a different way.
A couple weeks ago, I mentioned that I was going to explain a little bit of the transition from Vanilla JavaScript over to using React.js. In that post, I talked about some useful topics to be extra familiar with to make your life a little bit easier when learning React, such as arrow functions and the ternary operator. I called this post the Couch to 5k because it will give a little bit (plus resources) of a lot of information, and it’s up to you to take it and run with it!
Today, I came across an older challenge on Codewars.com that I felt deserved some blog time. It’s a smaller coding challenge, and you’ll see from the given directions that it’s extremely straightforward. I like to write about challenges that I think really translate well into real world coding projects, and this one fits the bill exactly.
I think we’re at the point in this blog series with a significant amount of base vanilla JavaScript knowledge to get us started using React.js. React is a library (not a framework) that uses JavaScript to build powerful web applications. It has quickly become one of top ways of using JavaScript to build easily scalable sites.