Even Carrot Top didn’t have this many props
This week has delved deeper into React and all that goes with it. Through experimentation and classwork, I found a very useful way to pass props. Typically, props are passed down to child elements. But there are ways to pass props and other information back up to parent elements. This was quite useful when trying to make my components more modular. Each modular component could have props and a method passed down to it. Do what it needed to do, and have its own props passed back up the chain for the parent component to work with. Once I figured out the syntax, it worked like a dream.
render() in React is considered a stage in the lifecycle for class components. It is the stage where the appropriate information and components get put into the virtual DOM and then passed into the browsers DOM. To put it another way, it’s where the HTML gets compiled into something the browser can display. All the functions, methods, and JSX runs and returns HTML elements that are passed into the DOM. Then whenever a component updates, it renders that specific part again and passes it into the virtual DOM which then updates that part of the DOM.
setState() is an asynchronous function. When setState() is called on an existing state it created a pending transition in the call stack. Because of this, the new state isn’t often available inside the same synchronous method or function. Being asynchronous create a better user experience and improves performance since the app isn’t waiting on the state to run. Typically a new state will trigger a re-render so waiting on that can stall out the experience.
There are two type of components. Controlled and Uncontrolled. A controlled component can maintain its own state and can pass it along as a prop. Whereas a uncontrolled component gets its state through the DOM usually in the form of a prop. The controlled version allows for an easier control of various states like those found in forms. But it can become crowded with a large number of inputs to track.
The JavaScript even loop has come up several times before. And the concept of how it works it pretty simple in theory. It is a constantly running process that coordinates the tasks between the call stack and the callback queue. To explain that further, picture a series of functions as people waiting in line at airport security. The line they stand in is called, you guessed it, the queue. And the security gate is the call stack. But they are very inefficient. Only one passenger can go through at a time. There is a security guard that tells the next person in line when to go. They are the even loop. They watch to make sure that the previous person has gone all the way through and the gate is empty before they let the next person through. If the queue is empty, they can take a break until the next person arrives.
ReactJS has the ability to name, rename, and access class names on HTML elements. But it doesn’t call it “class”, it calls it “className”. It has to do this for one specific reason. “class” is a reserved name for JavaScript. Meaning that that word has a very specific meaning and set of functions that go with it. Naming something or using it otherwise will throw an error. So ReactJS came up with “className” as a workaround. This is now a reserved word for React. But it allows a developer to manipulate the class attributes inside JSX and still have it compile into JavaScript without errors.
