Let’s dig a little deeper
React is growing on me. It’s been a little slow to get there. But now I’m able to see and put together how it create dynamic elements. Although I feel like there is still a long road to being completely comfortable with it.
One of the important things I learned this week are props and how to use them better. Before now, I’ve heard of props, I’ve seen them called in various examples. But I didn’t really get what they did or how they worked. But after some of the projects we worked on this week and some of the extra work I did on my own I see it now. There is still a lot to learn about them but I think I am starting to get it.
State are props are two very different things. But they can work together in a lot of ways. State is created like part of a key/value object and stores information that the component can use. The state can change or be updated in order manipulate the component and the app. It can be a number, string, boolean, array, or another object. It can be anything a standard object can be. Props, or properties, on the other hand are values that get passed down to child components. Typically when the child object is rendered. Then that new component can access those props to affect different aspects of itself including its own state.
ReactDOM and React are two parts of the whole, but not the same. ReactDOM is the module that actually renders the components into the browsers acutal DOM. It takes the virtual DOM and updates the browser DOM to match. But React is the set of tools that is used to put everything together. It’s the collection of methods and functions that are called to create and manipulate your content.
React.createClass is one of those methods. But it’s one that doesn’t get used as much as it did in the past. Since ES6 became the standard, class constructors are part of the basic code. Before then, creating a class took a little more work. And that’s where React.createClass came in. Although the syntax is a little different, it does the same job. One of the biggest differences between the two is having to bind this inside a class constructor method. But with the additional and push for standardizing of functional components, .createClass sees less and less use.
Let’s step back to JavaScript for moment. Event Delegation is a new concept for me. And I think I understand it a little. But the basic idea is to create a single event handler that can work for multiple child elements that function similarly. For example, when you click on one of several a child elements inside a parent, the event bubbles up to that parent but carries with it the ID of the child. From there the parent event handler performs a response based on the ID of the child element. If you click on another child it happens again with that child ID and something else may happen. This prevents the need for multiple event handlers or listeners to be happening at the same time for a similar group of elements.
Each day, I’m learning about many new ideas and features for coding. Although I find them all exciting ,I often bore my wife by trying to show her the neat stuff I’ve figured out. But she sits and listens to me ramble on about them. I often find the current thing I’m working with the be the most exciting. Right now it’s React, soon it will be Redux. Who know what it will be after that but I’m sure it will be something. The biggest challenge is not to get too focused on one thing at a time. I need to constantly be thinking about how the new things I learn can be applied to my capstone concept. Not to mention any personal projects I would like to complete one day. Every time I learn something new, it’s the perfect answer to whatever I’m trying to do. But that may not always be true. I need to keep in mind that I may already know the perfect answer and new isn’t always betters. But then again, maybe it is.
