Lambda School Week 4

The fourth of a weekly series documenting my experiences at Lambda School.

This week in Lambda School we were introduced to React. React is a JavaScript library for building user interfaces. It is best understood as the View in the Model-View-Controller (MVC) pattern.

React allows you to create encapsulated components that manage their own state. These components can be reused in multiple places and allow you to create complex UI’s while still working with manageable amounts of code segregated by component.

Part of the reason I enrolled into Lambda was to become a better developer. To hone my skills particularly my front end skills. This week, Lambda delivered and it delivered big time!

This week was difficult for me. It’s always hard when learning new things. At times, I felt overwhelmed but I’m beginning to pick it up. I’m by no means 100% proficient but I’m getting there.

We began this week learning the basics of components in React and then were introduced to React Bootstrap. React Bootstrap gives you the UI elements of Bootstrap but adapted to the React library.

What is a React component?

A React component is a JavaScript function that can take in an object called “props” (which stands for properties) as an argument and returns a React element.

There are two types of components.

Components can be either functional components or class components. The simplest way to think about functional components is that they never change. Functional components take in props and render the them. Class components not only can take in props but are also stateful. Being stateful means they have an object which is mutable. They can alter their state based on inputs and user interactions.

A class components’ state is defined as an object whose properties determine how a component would behave in any situation. A great analogy, I found here, is to consider water and ice. When the temperature of water drops below 0° it will become ice. Solid and liquid are the states of water depending on the temperature. In our analogy, temperature would be an input and the state would be the form the water takes being either solid or liquid.

Lifecycle Methods

React components are re-rendered when their state changes. To handle these changes we were introduced to a few methods that handle the lifecycle of the React components this week. I’m going to quickly describe the two I found most important but you can read about others here.

componentWillMount: This method only runs once before the first render of a component. Because it runs prior to the first render props and initial state are the only thing we have defined. We can start performing calculations or processes based on the prop values. It gives us a chance to handle configuration, update our state, and in general prepare for the first render.

componentDidMount: This method runs once the component is mounted. This is where you would do all the fun stuff like make API calls etc…