React to learning

As I continue my journey to becoming a developer, I start to realize that no matter what I do or how fast I learn, I will never be up to date with the world. There is always something changing or something new that is being created. Coding, as it is, is an ever-changing concept that will never be static.

As Javascript, HTML and CSS start to feel familiar, I am thrown a curveball with React. React, a front-end library or “framework” for Javascript and although young, is the preferred tech by many developers today due to being able to break down UI development into components that are easier managed, maintained and reused. What this means is that it allows for quicker rendering and easier processes to debug and fix.

React uses a virtual DOM whereas Javascript uses real DOM. It allows the developer to update an app without hindering performance or memory through mirroring the real DOM and updating any changes made to the code.

One of the great things about React as mentioned, is that you break down your development into components. You can think of each component as a “global function” that you will import into your main or parent component. When creating a component, you want to name it the same as your function you just wrote + .js. React will read .js and understand that this is a component, it wouldn’t work otherwise. You also need to export that component so you can import and use it in other components. In Javascript, where you would use “document.createElement” to create a <div></div>, you just return that in your component with React.

On the first picture, the left hand column, you will see each of the components, App.js, Article.js, Comment.js. Index.js in this case is rendering App.js which contains both Article and Comment.

The hierarchy of React is that you have a parent component, usually the App component, that will render the app’s global UI. Under that parent component, you have children components that you pass data to through the use of props. You can keep adding on by giving the children components their own children.

When you open up the ReactDevTools, you will see the structure and what is passed down as props, in our case “posts” is the prop. App is shown as a parent of Header, About and ArticleList and ArticleList a parent to Article.

Props are a type of object used to pass down stored data and used when you are looking to make your data flow dynamic. For sibling components to have access to the same data, it must be defined and passed down from the common ancestry component or the parent component of the two, aka Inverse Data Flow. But once that prop is passed, it can then be passed down again to another child component if needed.

Here on line 2, we are grabbing the blogData from the blog.js. As you see in blogData, there is a property “posts” that we are passing down to ArticleList. Without de-structuring, we have to use assign our prop “posts” equal to “blogData.posts” so that our component knows which data to access.

In this example, the prop is passed down just as a “prop” so when you are referring to the data, you would use prop.(property).

Continuing with the same example above, posts is passed down so that we can access that data to “map” through so we can get data from each post of blogData. As you can see, we are then passing down the data again to Article but instead of using “post” now as the prop, we are de-structuring it in the Article component as a parameter inside {} so instead of typing out post.title or post.date, we can just pass in title and data.

Or you can use it this way, which is what I prefer, and de-structure (extract the value of an array or property of an object) the prop with “{}” in the argument or parameter.

As I attempt to understand React, I start to feel like I am at the bottom of a mountain trying to climb to the top as there are so many things to learn about it. Things like the {useState} or {useEffect} Hooks and “.filter” or “.map” methods are also used on a daily. The “.filter”, as its name suggest, allows you to return a new array that passes the test provided by the function. The “.map” will map through an array and return the list of items it contains.

The {useState} and {useEffect} Hooks are different. These must be imported from React to be used in a component. The {useState} Hook returns an array with 2 values: [the current state/ initial value, and the setter function to update the state]. The setter function is used to trigger a re-render of the component by updating the initial state value.

{useState} is being imported on line 1 and line 5 is an example, foods is the variable that we set the initial state of “spicyFoods” to and setFoods is the hook to update that state. Lines 16–19 will update our initial state by keeping the array of spicyFoods, shown on the right side, and adding a new object of “newFood”.

When you use the {useEffect} Hook, you are telling React that you want the component to do something every time it renders.

Like {useState}, we also import {useEffect} to use in our component.

In this example, we are fetching the data on render. The empty [] is passed as a second argument to stop the hook from re-rendering, otherwise you would have an infinite loop. Depending on what the hook is used for, you may have one or multiple mutable state or property.

These are just a few basic examples of what React is and what it can do. The crazy thing is as soon as you think you are getting comfortable, there is more for you to learn. Just how React is a framework for vanilla Javascript, there is a newer framework that works on React but we can save that for Next time! ….

Links

A Quick Guide to Components

Next.js by Vercel - The React Framework

https://medium.com/@nickgastis1/setting-state-in-react-ebc6b24cb19