React, the Perfect Remedy

For my final project with Flatiron, I created Placemat, a catering coordinator’s best friend. Prior to my journey in software development, I oversaw a catering operation for two high volume restaurants in New York City. Had I had a program like Placemat, it would have made my job a breeze. I was excited to merge my former career path and my future career path. This app utilizes React and Redux to add clients to your rolodex, and allows you to create events for each individual client. You can easily keep track of your client’s events with ease.

React is a JavaScript library for building user interfaces. If you are on the fence of whether or not to dive down the React rabbit hole, may I strongly encourage you to do so. It was one of the most popular frontend libraries of 2020, React has almost 3 million users and a massive developer community. React is compatible with a wide range of platforms, from the web to mobile devices .One of the best features in React are the various types of components.

React makes it painless to create interactive User Interfaces. Components let you split the User Interface into independent and reusable chunks.This allows you to focus on one chunk at a time, rather than being overwhelmed with every element at a time. Components accept inputs called “Props” and return React elements that render what should appear on screen. React has a few different classifications to their components: pure, functional, and class. I’ll get to explaining each of these components.

Components can refer to other components in their output. This lets us use the same component abstraction for any level of detail. A button, a form, a dialog, a screen: in React apps, all those are commonly expressed as components. — Reactjs.org

…

CLASS:

You could utilize class components across your entire application and you would have no errors.However, this is not best practice because class components have a series of checks. Class components could be very simple, but become more complex as you implement the React lifecycle methods.

FUNCTIONAL:

A functional component is essentially a JavaScript/ES6 function that returns a React element (JSX). These types of components rely less on the logic behind it, and more so on what is being displayed on the client’s end. In other words, it will not render anything like we do in the other components. Because it is not extending to component, it can only receive props as an argument. It cannot store to state.

PURE:

Using a pure component in React is a great idea if your component won’t require and fine-tooth combing. Pure components performs a shallow comparison of old and new props. It does not have the lifecycle method shouldComponentUpdate(). The syntax of pure components is very similar to class components. We import { PureComponent } instead of { Component } from ‘react’.