DEV Community: Jin Wu

React Components

Jin Wu — Thu, 19 Mar 2020 16:49:42 +0000

Before we begin, it's important to know that the parent components are able to send down properties to it's children component(s).

The simplest way to create a component of React is to use functional components. Functional components are just regular functions in JavaScript.

Above are examples of writing a functional component. One is a regular function and the other is an arrow function. When using a functional component, you have to pass in an argument in order to get access to the properties you want to receive from the parent. In my examples, I used props as the argument.

Now lets move onto a slightly more complex way of creating a React component via the class component.

The example shown above will return the same results as the functional component examples. Some of the differences between the two is that class components are more complex under the hood and you don't need to pass in an argument to gain access to the parents properties. You can just call this.props.name to get the return value.

In functional components, the argument can be anything. But in class components, you have to use props.

One very important difference between functional and class components is the ability to use state. Functional components are just basic functions of JavaScript and doesn't have it's own state. Class components on the other hand does. State will be very important when you want to update something in your React app.

Props are read-only. If you want to be able to update information on your component, I suggest you use a class component. Of course, there are ways around it by lifting the state up to the parent component and then pass it down to the functional component via props. The parent component will most likely be a class component to gain access to state.

The React docs are a great resource if you want to learn more about state, lifting state, and inverse data flow.

React Documentation

Events in JavaScript

Jin Wu — Sun, 23 Feb 2020 21:12:12 +0000

An event in JavaScript is when something triggers an action on the web page. An example of that "something" can be clicking on a word and then the "action" can be changing the color of the word.

Events can occur when a user loads up a page, clicks on a button, press a key, etc. These are all examples of user-generated events. In order for the web page to know you want to create an event, you need to let JavaScript know what trigger to "listen" for. Luckily for us, JavaScript have a function that is created for the purpose of listening for those triggers.

addEventListener()

This function takes in two arguments, the event to listen for and the second argument being the what action(s) to take once that event is triggered.

In the code above, the event is triggered when you click on something and then it will display the "Don't click on me" message each time it is clicked on.

But wait, how does it know when or where to run this function?

It's simple! You just need to do a little bit of DOM Manipulation. If you want to learn more about basic DOM Manipulation or get a quick refresh, see link below for more information.

A Beginners Guide To DOM Manipulation

Let's use this page as an example to show how it works. I will be using the built-in console of Google Chrome to demonstrate this example.

Chrome DevTools

First, find the object you want to manipulate. We can do that by opening the web browser console.

Windows: Control + Shift + J
Mac: Command + Option + J

Once the DevTools is opened up, click on the arrow button circled above and then click on the title of this blog to inspect the element.

You should get something similar to the image above back. That will be the object we'll be manipulating and adding an event to.

Now we move onto the console tab and start writing code to find the title. One way of finding the title is with querySelector(). To use this function, you need to pass in the class name of the HTML tag that the title is in and then querySelector() will return the first HTML tag that matches the search.

you can also pass in an id name when using querySelector() but for this example, it's under a class name so we passed in the class name.
getElementByClass() is another way.

Once that's all done, we can finally start adding event(s) to make the web page more interactive. In my example, I saved my search to a variable findTitle.

Now, all I have to do is call the addEventListener() that I created earlier to the findTitle variable. Every time you click the title, it will return the message "Don't click on me".

if you're really bored, just click it 50 times like I did.

Okay, let's do something more interesting than clicking it and seeing increment of the same message. Let's change the color of the title to a different color when you click on it.

Instead of having it console.log() a message, we can change it to changing the color of the style.

When you click on the title now, you should see the title with red font now. You can add more actions to it such as changing the style of the font, size, etc.

Event triggers aren't limited to just a click of the mouse. There are many others such as key press, scrolling, and etc.

Other Event Triggers

One thing to note is that these changes are client-sided and won't affect how this web page is saved on the server. Once you refresh this page, the color of the font will revert back to its default color.

Intro to Enumerables

Jin Wu — Sun, 09 Feb 2020 20:38:59 +0000

When it comes to looping through arrays or hashes, Ruby provides the users with many different methods or options to work with. As you may see later in this blog, there are methods that are named differently but does the same thing.

1) Each

The .each method allows you to iterate over each element in that array. To do something with that array, you need to pass in a block. A block is basically the line of code that you want to execute on each element of the array. For the case below, it would be the code between the "do" and "end".

.each method will return the original array

If you want it to return a modified array, you would need to add a few more lines of codes such as setting a new variable equal to an empty array and then in each iteration, add the modified element into that empty array. At the very end, you have to call the variable you've made previously in order to return the array with the modified elements.

One thing to note is that .each is a very primitive method. There are methods that can allow you to do the same thing but in less lines of codes.

2) Map / Collect

.map allows you to do the same thing as .each but instead of returning the original array, it returns the modified array.

Got the same result as .each but without the additional lines to set up the empty array and adding the modified elements into the empty array.

If you don't want to .map for some reason such as not liking the word "map", you can use .collect instead. It does the exact same thing as .map but is just named differently.

3) Reduce / Inject

A simple way of looking at .inject or .reduce is that they will sum up the numbers in a given array. What it actually does is that it takes an accumulator, in this case "sum" and iterates over each element "num" and return the sum of the two. At the end, it returns the value of the final iteration.

When you call .inject or .reduce by itself, the default value is 0.

4) Find / Detect

When you want to find a SINGLE element in an array, .find is the method to go. The .find method will return the FIRST element that matches the argument in the block.

You can also use .detect to get the same results. Same method, different names.

5) Select

.select in Ruby is known as filter in other languages. It's similar to .find in terms of looking for elements in an array that matches the argument in the block. The difference is .select, returns ALL of the elements that matches the argument and not just the first.

6) Reject

A filter method that is the opposite of the .select method. This method returns the an array of the elements that does NOT match the arguments.

.reject is a nice method to know if you're too lazy to change the argument in .select

It all comes down to personal preference of how you like to get things done.