Feelings are impermanent

Full post

Advertisements

Adding Material UI to my React app

Yesterday I thought about using Bootstrap in my React app. However, to use it with React, Bootstrap has a different library called react-bootstrap (bootsrap v 3) or reactstrap (bootstrap v4). They contains React UI components. At first I thought I could use the main Bootstrap library (maybe I can) but I better do React way and these React Bootstrap libraries use different syntax than the main library. So I change back to Material UI.

While researching about React UI libraries, this post showed up #1 in Google search. And here’s an interesting stats found in the comments.

Today, I added Material UI to my React app successfully. I haven’t learnt about theming. I just got the basic layout setup with default styling. I’m focusing on functionality at the moment.

I’ll continue to integrate with the backend API, which I wrote in Node & Express JS.

Adding UI library to my React app

Today I tried to add Material UI to my React app by following a tutorial series on YouTube. I refactored my app completely. But it isn’t a good idea because data structure in the tutorial and data structure in my app are not the same and I don’t have experience with JavaScript objects and extracting certain properties of an element and making a new array in map function. What’s more, the tutorial uses a different syntax of ReactJS and some var names are the same so it made me confused.

I’ll just rollback to a previous commit & use Bootstrap since I’m proficient in it. I’ll stick to the syntax style used in the course I’m learning on Udemy instead.

Learning React & Redux

In learning React & Redux, there’re certain principles, which form foundation and therefore should be learnt first. These are:

  • The Single Immutable State Tree
  • Describing State Changes with Actions
  • Pure and Impure Functions
  • The Reducer Function

The first 4 lessons from the following tutorial explain them in simple and clear way:

Getting Started with Redux

Solving npm errors

I’m following MERN Stack Front to Back by Traversy Media on Udemy.

Front-end client refused to run after I moved the project to another directory.

Removing node_modules folder and running “npm install” in Terminal solved the issue.