We finally started learning about React! I’ve been so excited about officially learning React because I already jumped the gun a bit by building this site using GatsbyJS (using React). It probably would’ve been easier if I had waited, but who doesn’t love a good challenge? This week we learned about React components (as opposed to the vanilla JavaScript components we were making last week) and the basics of state and passing data via props. I nailed all of the projects for the required specs, but I found myself struggling this weekend with the stretch goals. For the first project, I was super sick, so I didn’t even bother trying to stretch myself. Instead I opted to sleep to try and get better as quickly as possible because it was really hard to think and learn new things.

This weekend’s project was to make a basic calculator using React! All we were actually required to do was to create React components and pass in the necessary data via props to create the buttons and have the correct text display on them. The stretch assignment was to style the calculator to reflect the provided design file and to actually make the calculator functional. The styling part was easy-peasy. I found myself VERY grateful that I took the time a couple of months ago to learn about CSS grid (Wes Bos’ tutorial was 👌🏽). But for some reason I had the hardest time translating the logic and functionality from vanilla JavaScript to React. Thank goodness for my wonderful, ever-so-patient husband who helped talk me through things and help me realize that I did know what I was doing. I just needed to stop overthinking things and focus on how much I DO know, rather than on how much I DON’T know about React.

Be it ever so humble, check out my finished calculator! Or the GitHub repo here.

Nifty thing I learned this weekend while working on the calculator functionality. Instead of writing out all of the different mathematical operations as a bunch of functions, I created a global MATHS object, with the keys being the input from the different operator buttons on the calculator and the values being the functions. Then you can call the functions by doing MATHS[operator](num1, num2). Pretty sleek!

JS

Copy

const MATHS = {
  "/": (x, y) => x / y,
  "*": (x, y) => x * y,
  "-": (x, y) => x - y,
  "+": (x, y) => x + y,
  "=": x => x,
  "%": x => x / 100,
  "+/-": x => x * -1,
}