My React Experience

Posted By  EN - Junior Web Developer25/10/19

The last four days have been a rollercoaster for me. Being given, what felt like, a mammoth task of creating a health and safety app in 4 days and then trying to create it all using React which prior to the weekend had no knowledge of.

My introduction to React was a quick read of https://reactjs.org/, a tic tac toe tutorial and a React SpaceX tutorial the weekend before I was due to start. Despite this, I don’t think I did too bad, maybe the student within me allowed me to cram the weekend before and walk away relatively unscathed!

What is React?
React is a JavaScript library for building user interfaces, developed by Facebook. It consists of components, which you can use to break down your app or website into child components.

Components
The two main types of components are function and class-based.

A function component is declared like a vanilla Javascript function and, to me, is probably the easier of the two to create and use since it’s familiar looking. 

props” is an argument that can be passed into a component. It can hold a value passed to it from a parent component which the child component can then utilise.

Demonstrating the props parameter being utilised.

A class-based component is slightly more complicated. It can have multiple states which it can then pass down to child components through props.

Class based components and the state object.

The tic tac toe tutorial helped me understand how components are linked together through children and how the scope between them worked.
For example, “lifting state up” from children to a parent component allows the parent to pass the state to multiple children at once. This keeps code to a minimum and all the children components stay in sync.

Hide and Show Toggle

In the app I’ve been creating, I used state and an if statement to help me toggle the visibility of some checkboxes.

Manipulating a checkbox with component state.

It was hard, to begin with, getting used to sorting my code into components, figuring out how state worked to toggle the visibility of checkboxes and seeing my HTML embedded within code I’d never come across before (Later on, I found out it was actually JSX. It helps structure code in a more familiar way for developers, for example, the tags which I recognised as being HTML).

JSX in action. It looks like HTML but with a sprinkle of javascript.

I’ve only scratched the surface with what I’ve been doing these past few days and there’s so much more for me to learn!

In university, I was tasked with creating my own app in MIT App Inventor which, if you’ve never heard of it, works similarly to Scratch. Rather than typing out your code, you fit blocks together to get your app to do something.

I created a language learning app that, let’s just say, App Inventor really struggled to handle the sheer number of blocks I’d put together, so much so, that I couldn’t continue it cause the lag was awful! Despite that, I enjoyed making it and have been wanting to find a better alternative so I can continue it in my spare time.

After 4 days of intense React, I’d say it’s a fitting alternative and will definitely continue learning!

Tutorials I used: 

Tic tac toe – https://reactjs.org/tutorial/tutorial.html

SpaceX (using Graphql, React and Apollo) – https://www.youtube.com/watch?v=SEMTj8w04Z8&t=593s