Eric Wong

Software Crafts-person

1 minute read

Oh, the woe of not having any idea what to write about after a busy month break.

I’ve been meaning to refine my react chops by writing an app with it. That being said, I really want to take my time learning the ins-and-outs so that I understand the nuances of the library itself.

Design

I’ve been meaning to present a bunch of information that’s commonly found in text books on to the web. I have a few requirements in mind:

  • I want to describe the roles surrounding a Roman Catholic Latin Mass liturgy
  • I want to be able to disect various parts of the Mass from the various roles to provide a different perspective
  • I want to make components as reusable as possible
  • I want to bootstrap and provide a minimum viable product to demo to friends

With these tenets in mind, let’s begin.

Starting off

Let’s start by creating the template, installing dependencies, and running the application.

npx create-react-app eginwong-react-throwaway
cd eginwong-react-throwaway
npm install
npm start

startup The customary startup screen.

A few react basics:

  • all components are capitalized because HTML lays ownership over the lowercase keywords
  • think to lift state out of lower-level components
  • In React, however, it is a convention to use on[Event] names for props which represent events and handle[Event] for the methods which handle the events. - https://reactjs.org/tutorial/tutorial.html
  • recommendation is not to mutate state but to clone the object, helps with performance
  • functional components are less tedious to write than react ones -> don’t need to worry about this
  • keys are important for react to know what to update when re-rendering, component cannot inquire about its key
  • classes have state
  • don’t update state directly, use setState({})
  • draw pictures, create component hierarchy, build static version first (don’t use state), who mutates the state should own it
  • amazing walkthrough https://reactjs.org/docs/thinking-in-react.html

Anyway, sorry for not much content this time around. More real life stuff happening but I’ll try to continue to post as soon as I have internet at my new place.

You May Also Enjoy