PRJ – 1

Monday 3/08: 12:45AM – 4PM
Tuesday 4/08: 12:30AM – 4PM

When I returned on Monday I learned that the sort I did on the lists on Friday were on the right track but not quite right. I was calling the sort method on a prop which you don’t want. ES6 allows you to clone an array with the … syntax.

I finished adding an extra input field which I had started on Friday. Apart from not having refactored the duplicate CSS into a styled component, I had done this correctly with Jesse’s help for some of the database migration.

My next task was to refactor an existing application, it relies on another old React application which consists of a bunch of styled components. It uses these styled components for…. you guessed it, styling the UI of the application. The code inside these styled components was actually very useful and I didn’t need to rewrite anything, I just had to move the code it used into the applications own styled components. This taught me about styled components which I haven’t used before. Styled components allow you to do your CSS using React Components. Simply put, they are pre-styled React components. Since they are React components they can take props, this allows you to change styling based on props which is a very powerful feature and prevent you from having to write duplicate CSS.

I also learned about React hooks, the new ones. I was quite confused when I first looked at their React front-ends because I wasn’t seeing any life-cycle hooks I was used to. Eg ComponentWillMount. I learned that they have essentially been replaced by useState and useEffect primarily. (Although there is also custom hooks and useRef ). useState is used for setting the state of a component when it renders. useEffect is used for performing side effects. Side effects can be things such calling an API, manually changing the DOM etc. You can learn more about React Hooks here.

On Tuesday I completed the refactoring and moved onto fixing a delete button that doesn’t work on products with a same table reference in the database.