DEV Community: Ahmet Meliksah Akdeniz

React | Fetch Data with useEffect Hook

Ahmet Meliksah Akdeniz — Sat, 17 Sep 2022 14:01:56 +0000

Hello folks, today I will be talking about useEffect hook in React.

Previosly I've written about about useState hook if you want to read that; part 1 and part 2

So, what's useEffect? In short, we use this hook to tell React that our component needs to do something after each render. React will keep that (useEffect function) in mind, and trigger it after performing DOM updates. This can be used in many scenarios, but today I will use it for fetching data.

Fist, I will explain how it works, then I will use it for fetching data.

This is index.js component:

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

App.js component:

import { useEffect } from "react";

// css is from boiler plate (code that comes with React), I didn't code anything for styling
import "./App.css";

function App() {
  useEffect(() => {
    console.log(`useEffect comes AFTER page render`);
  });

  console.log(`Page is rendered`);

  return (
    <div className="App">
      <h1> useEffect </h1>
    </div>
  );
}

export default App;

If you go to console, you should see Page is rendered on top of useEffect comes AFTER page render because useEffect runs after each render. Now, this is out of the way, let's talk about dependency list in useEffect a bit. I will add a counter that only increments the value in App.js file.

Here's App.js again:

import { useState, useEffect } from "react";

// css is from boiler plate (code that comes with React); however, I added a bit too :D
import "./App.css";

function App() {
  const [counter, setCounter] = useState(0);

  useEffect(() => {
    console.log(`useEffect come AFTER page render`);
  });

  const increment = () => {
    setCounter((prevVal) => prevVal + 1);
  };

  console.log(`page is RENDERED`);

  return (
    <div className="App">
      <h1> useEffect </h1>
      <h2> {counter} </h2>
      <button onClick={increment} className="btn">
        Increment
      </button>
    </div>
  );
}

export default App;

In short, the code above has a button that increments value of counter. I don't want to be repetitive, so if you've got no clue about useState you can check this. It helps understand how increment function works

However, if you go to console on the browser, you will notice each time the value changes, useEffect hook gets triggered.

The reason for that is useEffect is called after every render except if you add a second argument; depency list. If you want to fire useEffect only in initial render, then you've got to add an empty array as a second argument like so:

useEffect(() => {
    console.log(`ONLY INITIAL RENDER`);
  }, []);

As you can see from the image above, it's rendered only once. OK... But what's the use of this thing that renders only once? This will prevent us from falling into an infinite loop when calling a function in useEffect, and for this example that function will be fetching data.

For now I will use a classic; https://jsonplaceholder.typicode.com.

Time to share the whole code and explain it in small chunks:

import { useState, useEffect } from "react";

// css is from boiler plate (code that comes with React); however, I added a bit too :D
import "./App.css";

function App() {
  const [users, setUsers] = useState([]);

  const fetchUsers = async () => {
    const response = await fetch("https://jsonplaceholder.typicode.com/users");
    const users = await response.json();

    setUsers((prevUsers) => (prevUsers = users));
    console.log(users);
  };

  useEffect(() => {
    fetchUsers();
  });

  return <div className="App"></div>;
}

export default App;

First, we need to import useEffect and useState like so; import { useState, useEffect } from "react";.

const fetchUsers = async () => {
    const response = await fetch("https://jsonplaceholder.typicode.com/users");
    const users = await response.json();

    setUsers((prevUsers) => (prevUsers = users));
    console.log(users);
  };

The function above should be asynchronous because we can never anticipate when the data will come, and without data we shouldn't be executing lines below (at least not without error handling), so I used async, await syntax. As you can see, I fetched data from jsonplaceholder.typicode.com (obviously, used the exact "path" to get data) by using this line of code const response = await fetch("https://jsonplaceholder.typicode.com/users");. However, to work with that data, I got to convert it to a json, so I converted it to json like so; await response.json(). Finally, put that json into a variable called users.

Note:
Do not confuse users variable that I use with users variable that I used in hook (const users VS. const [users, setUsers]). Remeber, there's scope in JavaScript. So, users variable that's inside of fetchUsers function is not accessible outside of that function.

Finally, the code above sets users (in fetchUsers function) variable to const [users, setUsers] hook by this
code setUsers((prevUsers) => (prevUsers = users));.

Note:
useState hook automatically receives previous value as argument, and I like being explicit when I updat value of state. So, I explicitly write prevVal = data when I set new data to it. If it was a counter, I would've written setCounter((prevCount)=> prevCount + 1). However,setUsers(users) would also work.

We could use axios to make fetching easier, but this is a really simple example, so I didn't bother using it. Keeping axios for later

The problem with the code above is that it will drag us down to an infinite loop. Why? Because useEffect runs after each render. Let me show the code again

const fetchUsers = async () => {
    const response = await fetch("https://jsonplaceholder.typicode.com/users");
    const users = await response.json();

    setUsers((prevUsers) => (prevUsers = users));
    console.log(users);
  };

  useEffect(() => {
    fetchUsers();
  });

Code above will run fetchUsers function after initial render. Then, fetchUsers function will get data, and page will re-render. After that useEffect will run again. So, data will be fetched again, then useEffect will run again and so on. To avoid this, we add second argument which is an empty array, so this useEffect runs only on initial render.

useEffect(() => {
    fetchUsers();
  }, []);

OK, so we fetched data, now let's use it. It will be an extremely simple usage though, I added this to the bottom of App component only:

return (
    <div className="App">
      {users.map((user) => {
        return (
          <div key={user.id}>
            <h2> {user.name} </h2>
          </div>
        );
      })}
    </div>
  );

The code above, maps over users array and displays names of users in h2 tag. Logic behind the code above is similar to logic here. If that's not clear, please read this. Other than that, since list rendering is not topic of this blog post, I won't be covering that.

Final code looks like this:

import { useState, useEffect } from "react";

// css is from boiler plate (code that comes with React); however, I added a bit too :D
import "./App.css";

function App() {
  const [users, setUsers] = useState([]);

  const fetchUsers = async () => {
    const response = await fetch("https://jsonplaceholder.typicode.com/users");
    const users = await response.json();

    setUsers((prevUsers) => (prevUsers = users));
    console.log(users);
  };

  useEffect(() => {
    fetchUsers();
  }, []);

  return (
    <div className="App">
      {users.map((user) => {
        return (
          <div key={user.id}>
            <h2> {user.name} </h2>
          </div>
        );
      })}
    </div>
  );
}

export default App;

Alright that was it for today, we briefly talked about useEffect hook. The source that I used if React documentation by the way.

useState | One of the Most Common Hooks that You Will Be Using in React -Objects as State Values

Ahmet Meliksah Akdeniz — Mon, 12 Sep 2022 03:50:01 +0000

Hello folks, today I will continue talking about useState hook in React. Previously, we've covered what it's, how to use it, and we gave some use cases with data types such as strings and arrays. In this post, I will be talking about how to work with objects using useState hook. Click here to read previous part

Here's the whole code, afterwards I will explain it in small chunks:

import { useState } from "react";

const JobUpdaterComp = () => {
  const [person, setPerson] = useState({
    name: "Ahmet Meliksah",
    age: 24,
    job: "customer representetive",
  });

  const updateJob = () => {
    setPerson({ ...person, job: "junior React developer" });
  };

  return (
    <div>
      <h1>Name: {person.name} </h1>
      <h1>Age: {person.age} </h1>
      <h1>Occupation: {person.job} </h1>

      <button
        onClick={updateJob}
        style={{
          padding: "1rem",
          borderRadius: "1rem",
          border: "none",
          backgroundColor: "rebeccaPurple",
          color: "white",
          cursor: "pointer",
        }}
      >
        Update Occupation
      </button>
    </div>
  );
};

export default JobUpdaterComp;

import { useState } from "react"; first of all, import useState from React. After that, create a value called person, and assign an object to it like so:

const [person, setPerson] = useState({
    name: "Ahmet Meliksah",
    age: 24,
    job: "customer representetive",
  });

In object above, we've got name, age and job keys. And say, we want to update the 'job' key in this object. Do you think this is the right solution?

const updateJob = () => {
    setPerson({ job: "junior React developer" });
  };

Code above will update the 'job' key. However, it will remove name and age keys. Why? Because setPerson is a function that updates person's value. Once it's written as setPerson({ job: "junior React developer" });, we update job and update as if other keys do not exist. That's why, when updating objects in state if we want to preserve other keys (most of the time we do want to preserve them), we need to write them again. Or we can destructure, well I will destructure as usual, like so:

const updateJob = () => {
    setPerson({ ...person, job: "junior React developer" });
  };

In the code above, { ...person, job: "junior React developer" } this part means; give me everything in 'person' object as they're, except 'job' key. Update job key to "junior React developer"

Code below, does the exact same thing as code above:

const updateJob = () => {
    setPerson({name: "Ahmet Meliksah", age: 24, job: "junior React developer" });
  };

Yes, when objects are this small, it's somewhat ok not to destructure ({...person}). Unfortunately, most of the time this is not the case.

Our final part of code:

return (
    <div>
      <h1>Name: {person.name} </h1>
      <h1>Age: {person.age} </h1>
      <h1>Occupation: {person.job} </h1>

      <button onClick={updateJob}>
        Update Occupation
      </button>
    </div>
  );

As you see, I access to object by this syntax object.key ({person.name}, {person.age}, {person.job}). Bear in mind, objects cannot be rendered in React, thus we've to use this syntax (object.key) in order to get object values. Finally, we've got a button that triggers updateJob function on click (onClick).

To sum it up, be careful with objects in states because we want to preserve other keys. So, when updating them, use destructuring method.

useState | One of the Most Common Hooks that You Will Be Using in React

Ahmet Meliksah Akdeniz — Sun, 11 Sep 2022 21:21:44 +0000

Hello folks, today I will be talking about useState hook in React. Why do we need it? Because useState tracks state in a function component. Whenever data changes, we use useState hook.

Above, I said function component. So, first I will prove useState hook is a function. Copy and paste the code below:

import { useState } from "react";

const ErrorExample = () => {
  console.log(useState);
};

Explanation of code above:
import { useState } from "react"; imported useState function from React. It has to be written exactly like that ({ useState }) because we're importing a specific function from react, otherwise it won't work.

After this open console on your browser (right click on page and click on inspect), you will see this:

So, useState is a function, what does it return?
Invoke the function in console.log, do this console.log(useState());.

As you can see, useState returns an array. First element is a value and second one is a function. We will control the value by using the function inside of this array.

The first element of the array is undefined, the reason for that it doesn't have a default value yet. We can give any type of value we want to this first element (array, object, number, string, boolean... anything really).

I clicked on it to show what f represents

So, how do we give value to that? Even though this is not the only way, I assign values like this
const [value, setValue] = useState(some value | string, array, number); because it's easier using destructuring from JavaScript, and it looks identical to this [undefined, f] return from useState. In my head, I coded it as the first one is value and the second one is the function.

So, here we go, I will explain the code below line by line:

import { useState } from "react";

const ErrorExample = () => {
  const [title, setTitle] = useState("this title is gonna be updated");

  const changeTitle = () => {
    title === "this title is gonna be updated"
      ? setTitle("useState works!")
      : setTitle("this title is gonna be updated");
  };

  return (
    <div>
      <h2>useState error example</h2>
      <h4>{title}</h4>
      <button onClick={changeTitle}>Change title</button>
    </div>
  );
};

export default ErrorExample;

First, import { useState } from "react"; import useState from React. Assign some value to 'title' using useState and 'setTitle' is the function that we will change 'title' later const [title, setTitle] = useState("this title is gonna be updated"); In this case, initial value of 'title' is "this title is gonna be updated" (a string).

const changeTitle = () => {
    title === "this title is gonna be updated"
      ? setTitle("useState works!")
      : setTitle("this title is gonna be updated");
  };

Code above starts with a ternary operator. It's basically the same as this:

if (title === "this title is gonna be updated") {
    setTitle("useState works!")
} else {
    setTitle("this title is gonna be updated")
}

That means, if title is equal to "this title is gonna be updated", change its value by using setTitle function to "useState works!" (setTitle("useState works!")). Else (if title's value does not equal to "this title is gonna be updated"), then change its value back to "this title is gonna be updated" (setTitle("this title is gonna be updated")).

Final chunk of our code:

return (
    <div>
      <h2>useState error example</h2>
      <h4>{title}</h4>
      <button onClick={changeTitle}>Change title</button>
    </div>
  );

<h4>{title}</h4> 'h4' tag receives its value from const [title, setTitle] = useState("this title is gonna be updated");. Finally, button element fires changeTitle function when it's clicked (onClick={changeTitle}).

Working With Arrays in useState Hook

Now we know a bit about useState, let's target certain data types those might be a bit confusing. Thus, I will go over arrays and objects.

First, I will share the whole code:

import { useState } from "react";

// data
const data = [
  {id: 0, name: 'Micheal'},
  {id: 1, name: 'Ahmet'},
  {id: 2, name: 'Daniel'},
]

const ContactList = () => {
  const [contacts, setContacts] = useState(data);

  const removeContacts = () => {
    setContacts([]);
  };

  const removeContact = (id) => {
    const filteredContacts = contacts.filter((contact) => contact.id !== id);
    setContacts(filteredContacts);
  };

  return (
    <div>
      {contacts.map(({ id, name }) => {
        return (
          <div style={{ display: "flex" }} key={id}>
            <h3 className="item">{name}</h3>
            <button className="btn" onClick={() => removeContact(id)}>
              Remove item
            </button>
          </div>
        );
      })}

      <button className="btn" onClick={removeContacts}>
        REMOVE ALL CONTACTS
      </button>
    </div>
  );
};

export default ContactList;

Now, let's talk about the code in small chunks, but this time I won't be explaining each and every single line in order not to get repetitive.

const data = [
  {id: 0, name: 'Micheal'},
  {id: 1, name: 'Ahmet'},
  {id: 2, name: 'Daniel'},
]

Above, we've got an array of objects which holds some data. Keys in those objects are id and name. Most of the time the data will be ready, and we won't have to deal with giving ids, but this is just an example

const [contacts, setContacts] = useState(data); assigned contacts's value to data array.

  const removeContacts = () => {
    setContacts([]);
  };

I will be using removeContacts function to remove everything in the contacts array (remmeber, contacts come from data and data is an array). Well, since we re-assing a value by using setContacts([]) function, assigning an empty array will remove everything in the array. Hence, removeContacts function will remove everything from the array by converting to an empty array.

Next, rmeoveContact. As its name suggests, it's created to remove only one contact:

const removeContact = (id) => {
    const filteredContacts = contacts.filter((contact) => contact.id !== id);
    setContacts(filteredContacts);
  };

removeContact(id) function takes a parameter - id. When 'Remove Item' button is clicked, it will bring that particular 'id' and filter (remove) it. Since, I've given contact parameter in filter method, each 'data' (we've got data array) will be represented as contact. Logic behind this code; contacts.filter((contact) => contact.id !== id), this compares if contact.id and id are not the same. Then, it returns items those have different ids.

Finally, we've got a big return, here it's:

return (
    <div>
      {contacts.map(({ id, name }) => {
        return (
          <div style={{ display: "flex" }} key={id}>
            <h3>{name}</h3>
            <button onClick={() => removeContact(id)}>
              Remove item
            </button>
          </div>
        );
      })}

      <button onClick={removeContacts}>
        REMOVE ALL CONTACTS
      </button>
    </div>
  );

The code above maps through contacts array. Ummm... what the heck is this contacts.map(({ id, name }) I destructured what comes from contacts array right away. If you've got no clue what that is check this article from MDN Web Docs.

If I didn't destructure it, say, I did it like this contacts.map((contact) => { return () }), then when I want to refer to contact, I would've have to refer it as key={contact.id} and <h3>{contact.name}</h3>. On the other hand, because of I've destructured it, I can refer like so; key={id} and <h3>{name}</h3>. In short, I do my best to avoid dots (in my code) for some reason... personal preference.

There we go, time to talk about buttons:

<button onClick={() => removeContact(id)}>
              Remove item
 </button>

As you can see in the code above, we've got an onClick event listener that goes for removeContact(id) function. So, this is where we get the id from. Wait, how does it get the id??? This is how contacts.map(({ id, name }). Recall, we've destructured it that way.

Finally,

<button className="btn" onClick={removeContacts}>
        REMOVE ALL CONTACTS
</button>

Code above calls removeContact function on click. It simply re-assings our data array to an empty array.

I would go keep writing, but this post is getting too long compared to my other posts. So, in the next part I will be talking about using objects as initial values with hooks

Vue.js Basics Part 9 | Slots

Ahmet Meliksah Akdeniz — Thu, 08 Sep 2022 03:09:15 +0000

Today, I will be talking about slots in Vue.js.

This is part 9 of my Vue.js Basics series, to read part 8, please click here (spoiler! Part 8 is about emit)

Parent components have another way of passing data to child components; via slots:

<script>
import ChildComp from './ChildComp.vue'

export default {
  components: {
    ChildComp
  },
  data() {
    return {
      msg: 'from parent'
    }
  }
}
</script>

<template>
  <ChildComp> {{msg}} </ChildComp>
</template>

That {{msg}} there, is a slot. First, let me talk about the code line by line. import ChildComp from './ChildComp.vue' import child component. Register it in components option like so:

components: {
    ChildComp
  },

Last part of our script tag is data which holds only a data of string type msg: 'from parent'. After that we've got
<ChildComp> {{msg}} </ChildComp>. Remember when we use components in Vue, we only used them like this <ChildComp />. However, here we put something in between them like so; <ChildComp> {{msg}} </ChildComp>. So, whatever gets in between component tags are slots. Hence, syntax is this <ComponentName> I AM A SLOT :) </ComponentName>

Here's our child component:

<template>
  <slot />
</template>

All we need to do to use slots is just using <slot /> tag. If you you want a fallback in case there's no slot from parent, then you can do it like so; <slot> I'am a fallback :) </slot>.

Today I've talked about slots in Vue which is another way to send content from parent to child component. By doing this I finished the Vue tutorial.

Next, I'm planning to do a portfolio website (it's only one-page)

Vue.js Basics Part 8 | Emit

Ahmet Meliksah Akdeniz — Wed, 07 Sep 2022 03:38:32 +0000

Today, I will be talking about emit in Vue.js.

This is part 8 of my Vue.js Basics series, to read part 7, please click here

Emit is the opposite of props. That means, we send (emit) events from child component to parent component. So, how it works:

<script>
export default {
  emits: ['response'],
  created() {
    this.$emit('response', 'hello from child')
  }
}
</script>

<template>
  <h2>Child component</h2>
</template>

As you can see from the code above, we use emits: array to emit something. After that we use the created(){} property.
this.$emit('response', 'hello from child') this takes multiple arguments: first, event name; second, any additional arguments are passed to the event listener. So, when we use emit in parent component, we do that by using @ (v-on:).

Here's parent component:

<script>
import ChildComp from './ChildComp.vue'

export default {
  components: {
    ChildComp
  },
  data() {
    return {
      childMsg: ''
    }
  }
}
</script>

<template>
  <ChildComp @response="(x) => childMsg = x"/>
  <p>{{ childMsg }}</p>
</template>

First, we import the component like so:import ChildComp from './ChildComp.vue', remember syntax import <something> from <path>. Afterwards, register imported component in components option. Here, we've a data that has key property of childMsg, and its value is an empty string initially. However, since we emit something from child component, we can receive that with @something. Since we coded
emits: ['response'] and this.$emit('response', 'hello from child'), we receive by using @response

"(x) => childMsg = x" this line of code assigns childMsg data's value to x parameter in this arrow function. And it comes from child component this.$emit('response', 'hello from child'). Remember, the first argument is the event name, other arguments are passed in arguments to event listener, so it passes 'hello from child'.

To sum it up, today we talked about how to pass events from chiled to parent component. Next, I will be talking about slots in Vue.

Vue.js Basics Part 7 | Props

Ahmet Meliksah Akdeniz — Wed, 07 Sep 2022 02:51:42 +0000

Today, I will be talking about props in Vue.js.

This is part 7 of my Vue.js Basics series, to read part 6, please click here

As I mentioned in my previous post, we can reuse Vue components. But, why would we want to reuse the same thing? Because we can send data dynamically and loop over the data to make it look like as it's something else. However, today I will talk only about how to send props from parent to child component.

Here is the code from parent component:

    <script>
    import ChildComp from './ChildComp.vue'

    export default {
    components: {
        ChildComp
    },
    data() {
        return {
        greeting: 'Hello from parent'
        }
    }
    }
    </script>

    <template>
    <ChildComp :msg="greeting"/>
    </template>

First, we import the component like so:import ChildComp from './ChildComp.vue', remember syntax import <something> from <path>. Afterwards, register imported component in components option.

components: {
    ChildComp
  },

Then, we've got data which only has the value of greeting: 'Hello from parent', notice it's a string. We will have to register this prop with its data type in child component. If you've got questions about data types, please read this

Lastly, in our parent component we've got <ChildComp :msg="greeting"/>. :msg="greeting" this is the 'prop'. Remember? : stands for v-bind:. So, we bind the prop, and in this case we pass in greeting from our 'data'.

Here's our child component:

    <script>
    export default {
    props: {
        msg: String
    }
    }
    </script>

    <template>
    <h2>{{ msg || 'No props passed yet' }}</h2>
    </template>

As you can see from the code above, we've got a new property called props. That's where props are registered. Recall, we used :msg='' in our parent component, that :msg prop comes from here. Its data type is string because we made it string here (msg: String).

Finally, on the bottom we've got <h2>{{ msg || 'No props passed yet' }}</h2> this line of code. This part is actually JavaScript. In short, || this or operator displays whatever satisfies the condition. In this case, it displays whatever is truthy. Before we pass props from parent component to child component, msg will be falsy. So, code will display 'No props passed yet' (because this is truthy). However, when props passed from Parent component, it will display greeting in data from parent (because there will be a string in this case, and it's truth), and that is 'Hello from parent'.

To sum it up, today we talked about how to pass props from parent to child component. To do that, we register props (props: {}) in child component; give props names and data types (props: { msg: String }). Finally, give them values in parent component (greeting: 'Hello from parent'), and pass them as props from parent to child component (<ChildComp :msg="greeting"/>).

That's it for part 7. Next, I will be going through emits in Vue.

Vue.js Basics Part 6 | Components

Ahmet Meliksah Akdeniz — Tue, 06 Sep 2022 19:21:24 +0000

Components

Today, I will be talking about components in Vue.js.

This is part 6 of my Vue.js Basics series, to read part 5, please click here (spoiler! Part 5 is about watch property)

We will need components when creating web applications most of the time. Why? Because it's easier to produce and maintain this way.
So, we've got parent and child components. I will share an image first, then explain on it, so it'll be easier to understand.

As you can see from the image above, we've got several components. This image is from Medium. Most of the time, main component is App.js. That's where we bring all our components together. Then, we've got smaller components for topbar, hero, cards, card and so on. Bottom of the image, you can see 'Card component', and 'Cards component'. This means, we can reuse components that we create in Vue. Imagine the information in the cards come from an API, all we need to do is sending props and looping 'card component' so we can have them dynamically. I will talk about props in a later post.

Let's see how this works in code. I'm still coding in Vuejs tutorial by the way.

<script>
  import ChildComp from './ChildComp.vue'
export default {
  components: {
    ChildComp
  }
}
</script>

<template>
  <ChildComp />
</template>

Code above is 'App.vue' file. To use a child component, we need to import it first. Like so; import ChildComp from './ChildComp.vue'. Syntax is like this import something from path. So, we can name it however we want to name it, but path must be exact, otherwise it won't work. Naming that makes sense is best practice, so please don't name it whatever you want to name it even though technically you can

After importing our child component, we need to register it in components object as code above has done. Finally, we can use our child component <ChildComp /> like this, syntax is <ComponentName />.

Obviously, to import and use something, we need to have that something. So, here's our child component's code

<template>
  <h2>A Child Component!</h2>
</template>

That's it for part 6, we talked about components in Vue.js.

Next, I will be going through props in Vue.

Vue.js Basics Part 5 | Watch Property

Ahmet Meliksah Akdeniz — Mon, 05 Sep 2022 19:45:02 +0000

Today, I will be talking about watch property in Vue.js.

This is part 5 of my Vue.js Basics series, to read part 4, please click here (spoiler! Part 4 is about template refs)

What are watchers? The answer is hidden in the question. Watchers watch any data or computed property and execute code based on value changes. Below, I made a small program that executes some code (alerts the user) at a certain value. First, I will explain the code below line by line, and then I will talk about where we can use watchers. Before details, I've written a counter that increments and decrements value.

<script>
  export default {
    data() {
      return {
        count: 0
      }
    },
    watch: {
      count(newCount) {
        if(newCount === 5) {
          alert("count is five!")
        }
      }
    }
  }
</script>

<template>
  <h1>Count : {{ count }}</h1>
  <button @click="count++">Increase</button>
  <button @click="count--">Decrease</button>
  <p v-if="count < 5"> Less than 5! </p>
  <p v-else-if="count > 5"> Greater than 5! </p>
  <p v-else="count === 5"> Count is 5! </p>
</template>

So, we've got count that's got an inital value of 0. All it does is keeping track of what number we're at. Below that we've got the watchproperty. Look carefully! count value that is in data object, is now a 'function' in watch object. Their names must match, otherwise watch property won't know what it's 'watching'.

watch: {
      count(newCount) {
        if(newCount === 5) {
          alert("count is five!")
        }
      }
    }

So, the code above 'watches' for count data's value to equal to (===) 5 to execute the code in the if block. watchers automatically receive new value as the argument. Thus, new value of count is the argument here. Once newCount hits 5, alert("count is five!") this code gets executed. It simply prompts an alert that says "count is five!".

Time for template part of our code:

<h1>Count : {{ count }}</h1>
  <button @click="count++">Increase</button>
  <button @click="count--">Decrease</button>
  <p v-if="count < 5"> Less than 5! </p>
  <p v-else-if="count > 5"> Greater than 5! </p>
  <p v-else="count === 5"> Count is 5! </p>

When buttons are clicked, they increment and decrement count respectively. Last three lines makes conditional rendering based on value of count. To know more about conditional rendering please go here | scroll down a bit to get to conditional rendering.

Okay? But why are we doing this?

When you want to add class to a certain element or component on your Vue app when the value of something gets changed by the user, you can use watchers.
When calling API response (fetching data e.g.) to change application data.
When applying transitions

Watchers Vs. Computed

Computed props are cached, so only when value changes, they're recalculated. By contrast, watchers are executed every time.

That's it for part 5, we talked about watch property, and difference between a computed property and a watch property in Vue.js.

Next, I will be going through components in Vue.

Vue.js Basics Part 4 | Lifecycle and Template Refs

Ahmet Meliksah Akdeniz — Sat, 03 Sep 2022 04:20:25 +0000

Today, I will be talking about ref attribute in Vue.js.

This is part 4 of my Vue.js Basics series, to read part 2, please click here (spoiler! Part 3 is about computed property)

We use ref attribute when we need to manually work with the DOM. Perhaps, the most common use case is forms, especially when we want to focus on input when the page is 'mounted' (loaded).

'Mounted' is one the lifecycle hooks in Vue. What are lifecycle hooks? In short, each Vue component goes through a series of steps when it's created. Some of the most common ones are updated and unmounted.

Why lifecycle hoooks? Because they give us opportunities to add our own code at specific stages (when page is loaded/rendered, updated, unmounted and e.g.).

What does mounted attribute do? mounted hook is used after the component has finished the initial rendering. That means whatever we put inside mounted will be run immediately after the component 'mounts' (after first render).

Let's get back to ref. So, how to use it?
Like so:

<template>
  <p ref="p">hello</p>
</template>

First of all, add ref attribute to element that you want to reference. ref="p", 'ref=' indicates reference, and 'p' indicates how you refer to it. I will throw in the code below, so it will be more understandable

<script>
export default {
  mounted() {
    this.$refs.p.innerHTML = "yooo"
  }
}
</script>

In mounted hook (and in any lifecycle hooks), we have access to objects using the this keyword, otherwise, Vue won't know what we're referring to. this.$refs.p.innerHTML = "yooo" with this line of code, we go to ref and choose p (remember ref="p") and change its innerHTML value to something else.

To sum it up, today we briefly talked about lifecycle hooks and template reference (ref) in Vue.js

Vue.js Basics Part 3 | Computed Property

Ahmet Meliksah Akdeniz — Thu, 01 Sep 2022 20:49:14 +0000

Today, I will be talking about computed property in Vue.js. First, I will code this tutorial from vuejs.org. Afterwards, I will touch the differences between methods and computed properties in Vue.js (not in detail).

This is part 3 of my Vue.js Basics series, to read part 2, please go to here

Here's the whole code:

<script>
let id = 0

export default {
  data() {
    return {
      newTodo: '',
      hideCompleted: false,
      todos: [
        { id: id++, text: 'Learn HTML', done: true },
        { id: id++, text: 'Learn JavaScript', done: true },
        { id: id++, text: 'Learn Vue', done: false }
      ]
    }
  },
  computed: {
    hideCompletedTodos() {
      return this.hideCompleted ? this.todos.filter(item => !item.done) : this.todos
    }
  },
  methods: {
    addTodo() {
      this.todos.push({ id: id++, text: this.newTodo, done: false })
      this.newTodo = ''
    },
    removeTodo(todo) {
      this.todos = this.todos.filter(item => item.id !== todo.id)
    },
    toggleHideCompleted() {
      this.hideCompleted = !this.hideCompleted
    }
  }
}
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo" />
    <button>Add Todo</button>
  </form>
  <ul>
    <li v-for="todo in hideCompletedTodos" :key="todo.id">
      <input type="checkbox" v-model="todo.done">
      <span :class="{ done: todo.done }">{{ todo.text }}</span>
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
  <button @click="toggleHideCompleted">
    {{ hideCompleted ? 'Show all' : 'Hide completed' }}
  </button>
</template>

<style>
.done {
  text-decoration: line-through;
}
</style>

Time to read to read code above in small chunks!

export default {
  data() {
    return {
      newTodo: '',
      hideCompleted: false,
      todos: [
        { id: id++, text: 'Learn HTML', done: true },
        { id: id++, text: 'Learn JavaScript', done: true },
        { id: id++, text: 'Learn Vue', done: false }
      ]
    }
  },

In our data(){} property we've got newTodo for text key property in our todos array. hideCompleted key for hiding completed todos, this is a boolean value (true or false). Its task is to hide completed todos if it's true, and show all todos regardless of they're completed or not whhen it's false. Finally, we've got an array of objects that stores our todos. As you notice, we've got a new key (done:) in our objects. That's to alter styling for tasks those are done, later on that one.

Next, computed property:

computed: {
    hideCompletedTodos() {
      return this.hideCompleted ? this.todos.filter(item => !item.done) : this.todos
    }
  },

hideCompletedTodos() function returns something based on hideCompleted's boolean value (true or false). If hideCompleted is true, it filters items those item.done properties are false. In other words, we will have only item.done with falsy values left because item => !item.done this code returns items those item.done values are falsy. : this.todos this code says, else (if hideCompleted is not true), then return todos array altogether.

A bit more about computed. At first glance, computed may look like as if it's the same with methods, but it's not. First of all, computed re-renders only the changed element, on the other hand, methods re-render everything. This becomes a performance issue. To solve this use computed, a computed property tracks reactive state as dependencies, and caches the result. Once when the dependencies change, it updates. However, methods property updates even if the result doesn't change.

Time to get back to our code

methods: {
    addTodo() {
      this.todos.push({ id: id++, text: this.newTodo, done: false })
      this.newTodo = ''
    },
    removeTodo(todo) {
      this.todos = this.todos.filter(item => item.id !== todo.id)
    }
  }
}

addTodo() function adds (actually 'pushes') a new object to the todos array. Finally, it sets this.newTodo to an empty string, so we won't see [object Object] weird thing in the input once the form (we will talk about it soon) is submitted.

removeTodo(todo) function takes a parameter - todo. When 'X' button is clicked, it will bring that particular 'todo' ({ id: id++, text: 'Learn HTML', done: true }... one of these) and filter (remove) it. Since, I've given item parameter in filter method, each to do will be represented as item. Logic behind this code; this.todos.filter(item => item.id !== todo.id), this compares if item.id and todo.id are not the same. Then, it returns items those have different ids.

What the heck does this mean? So, when we click on 'X' button, it returns an object with an id key. As you know filter method iterates over arrays. So, it iterates over todos array, and returns items those ids don't match todo.id that comes from the item parameter. part of this code is done, not let's talk about the template part.

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo" />
    <button>Add Todo</button>
  </form>
  <ul>
    <li v-for="todo in hideCompletedTodos" :key="todo.id">
      <input type="checkbox" v-model="todo.done">
      <span :class="{ done: todo.done }">{{ todo.text }}</span>
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
  <button @click="hideCompleted = !hideCompleted">
    {{ hideCompleted ? 'Show all' : 'Hide completed' }}
  </button>
</template>

@submit.prevent prevents forms from refreshing pages when form is submitted. Then, we've got an input tag that is two-way-binded to newTodo data. v-model: is responsible for syncing newTodo data and addTodo() function. Outside of our form we have got a list tag.

Here's how v-for works in a list tag:
As you see there's todo in hideCompletedTodos. Yes, we've got todos array, but what is todo? It's a local variable that will be alive only in this

tag because it's created in it. That means, todo is not accesible outside of

in this case. So, we've got an array of objects, by using v-for, we iterate over objects in hideCompletedTodos array. So, todo represents each object in hideCompletedTodos array. Since todo is a local variable, we can name it however we wish, but understandable naming is one of the best practices. For instance, if I had an array of books, I would have coded it as <li v-for="book in books" :key="book.id"> ... </li>.

quick reminder

hideCompletedTodos() {
      return this.hideCompleted ? this.todos.filter(item => !item.done) : this.todos
    }

The code above returns filtered todos array or todos array in its original form, that's why <li v-for="todo in hideCompletedTodos" :key="todo.id"> v-for loop is like this. So, hideCompletedTodos is either filtered (based on objects done value property) todos array or untouched todos array.

<input type="checkbox" v-model="todo.done"> to understand this part, I will share part of the code.

<style>
.done {
  text-decoration: line-through;
}
</style>

In short, the code above has a CSS class .done that outs line through text. This code v-model="todo.done" binds todo's done property with done CSS class. So, when the checkbox has a tick in it, .done CSS class is added, and a line goes through the text.

How do we get specific todo from the list by removeTodo(todo)? This is how:

<li v-for="todo in hideCompletedTodos" :key="todo.id">
<button @click="removeTodo(todo)">X</button>
</li>

As you can notice, todo is a local variable that represents each object in hideCompletedTodos ('hideCompletedTodos' returns filtered todos or original todos array, remmeber?) By using @click method we trigger removeTodo(todo) function that takes its parameter from todo local variable. Their names have to match because todo local variable is the argument for removeTodo(todo)

<button @click="hideCompleted = !hideCompleted">
    {{ hideCompleted ? 'Show all' : 'Hide completed' }}
  </button>

The code above changes state of hideCompleted. hideCompleted is a boolean value, so the code above turns it to the opposite of the current value.

That's it for part 3, we talked about computed properties, and difference between a computed property and a method property in Vue.js.

Next, I will be going through Life Cycle and Template Refs, and maybe Watchers.

Vue.js Basics Part 2 | v-for - List Rendering

Ahmet Meliksah Akdeniz — Tue, 30 Aug 2022 16:01:02 +0000

This is part 2 of my Basic Vue series. For part 1 click here. Anyways, let's continue

v-for - List Rendering

This code will be a bit long. First, I will share the whole code, after that I will break it down into small chunks.

<script>
// give each todo a unique id
let id = 0

export default {
  data() {
    return {
      newTodo: '',
      todos: [
        { id: id++, text: 'Learn HTML' },
        { id: id++, text: 'Learn JavaScript' },
        { id: id++, text: 'Learn Vue' }
      ]
    }
  },
  methods: {
    addTodo() {
      this.newTodo = {id: id++, text: this.newTodo}
      this.todos.push(this.newTodo)
      this.newTodo = ''
    },
    removeTodo(todo) {
      this.todos = this.todos.filter(item => item.id !== todo.id)
    }
  }
}
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo">
    <button>Add Todo</button>    
  </form>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
       {{todo.id}} | {{ todo.text }}
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
</template>

Let's get it into smaller pieces

data() {
    return {
      newTodo: '',
      todos: [
        { id: id++, text: 'Learn HTML' },
        { id: id++, text: 'Learn JavaScript' },
        { id: id++, text: 'Learn Vue' }
      ]
    }
  }

To begin with, we need a unique id for each element in the array. So, we create a variable that starts counting from 0 let id = 0. In Vue (and also React), each element must be tracked by their unique keys (:key='').

To add a new todo, we have newTodo: '' that has an empty string as its initial value. We have an array of objects
(todos:[{}, {}, ...]), and each object has key values of id and text. We increment id for each object, so we don't need to hard code.

As we keep reading code above from top to bottom, we will see methods, there're two methods in this todo list; addTodo() and
removeTodo()

addTodo() {
      this.newTodo = {id: id++, text: this.newTodo}
      this.todos.push(this.newTodo)
      this.newTodo = ''
    },

With addTodo() function we access to todos array and push a new object inside of it. Since todos is an array of objects we must pass in an object when pushing, otherwise it won't work. After pushing we again assign an empty string to this.newTodo, so the old added value won't remain inside the input. Otherwise, you will see this [object Object].

Now let's remove our todos

removeTodo(todo) {
       this.todos = this.todos.filter(item => item.id !== todo.id)
    }

We create a function that takes todo as its parameter. Todo is the one that picks a todo to remove when the X button is clicked. Onto inside of our code block.

First, I will explain the right side of the assignment operator (=). We filter our todos array. The .filter()method takes one parameter; item. The item parameter loops over each element of the array and compares if the current item is not equal to todo (that is clicked by the user). We get a hang of todo by clicking on the X button. So, item => item.id !== todo.id removes the clicked item.

Finally, last chunk of our code:

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo">
    <button>Add Todo</button>    
  </form>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
       {{todo.id}} | {{ todo.text }}
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
</template>

@submit.prevent prevents forms from refreshing pages when form is submitted. Then, we've got an input tag that is two-way-binded to newTodo data. v-model: is responsible for syncing newTodo data and addTodo() function. Outside of our form we have got a list tag.

Here's how v-for works in a list tag:

As you see there's todo in todos. Yes, we've got todos array, but what is todo? It's a local variable that will be alive only in this

tag because it's created in it. That means, todo is not accesible outside of

in this case. So, we've got an array of objects, by using v-for, we iterate over objects in todos array. So, todo represents each object in todos array. Since todo is a local variable, we can name it however we wish, but understandable naming is one of the best practices. For instance, if I had an array of books, I would have coded it as <li v-for="book in books" :key="book.id"> ... </li>.

Vue.js Baiscs Part 1

Ahmet Meliksah Akdeniz — Tue, 30 Aug 2022 15:45:51 +0000

In this Vue.js series I will dig in to Vue documentation. First, I will go over the Vue tutorial.

Since I'm working on browser with Vue for now, this tutorial will not include how to set up Vue.js

Using Script and Template Tags - Declarative Rendering

In script tags we write our JS code and script of the file that extends to HTML. We use states from here and make changes on our HTML.

You will see data(){} below, that's where we store our data. It must return something, otherwise it won't work. We can use values in our data() inside our <template> tags, that is where HTML stays.

<script>
export default {
  data () {
    return {
      msg: "Hello Vue!" // msg is property key || "Hello Vue!" is property value
    }
  }
}
</script>

<template>
  <h1> {{msg}} !</h1>
</template>

To use values in data, we need to type our property keys msg in this case in double curly-bracets (a.k.a. mustache syntax)

Bind Attributes

In the code below, I simply have a property key called titleClass and it has property value of "title". title gets its styling from style tags. Shine your CSS skills in style tags :)

<script>
export default {
  data() {
    return {
      titleClass: "title",
    };
  },
};
</script>

<template>
  <h1 v-bind:class="titleClass">Change the color of this title</h1>
</template>

<style>
.title {
  color: red;
}
</style>

Shorthand for v-bind is :

To bind attributes in Vue, we use v- prefix. So, to bind attributes we need to use v-bind: code that comes after colon : is the argument.

Event Listeners

Use v-on: to use event listeners in Vue. I'm lazy, do we have a shortcut? Sure, it's @. So, instead of typing v-on:click, you can type @. This time, I will go with shortcut version of v-on:

<script>
export default {
  data() {
    return {
      count: 0
        }
    },
    methods: {
      increment() {
        this.count++
      }
    }
  }
</script>

<template>
  <!-- make this button work -->
  <button @click="increment">count is: {{ count }}</button>
</template>

The code block above has a button. It calls the increment method when clicked (@ or v-on:click remember?). When you want to access your property keys in data(){} you must use the this keyword to get it in your methods. Otherwise, Vue won't know what you're referring to. That's because I'm coding in options style, and won't bother to get into detail about that here :)

v-on and v-bind, or just use v-model - Form Bindings

In the code below, to type something inside an input and to render (get the value on your screen) its value we need a combination of v-on: and v-bind. With v-bind: we access the value of text, and with v-on: we call the onInput method that takes event as a parameter. To get the value we simply need something.target.value. Our parameter is event e, so to say e.target.value to get the value inside input. More, text property key (which is an empty string initially) will be assigned to the value inside the input.

<script>
export default {
  data() {
    return {
      text: "",
    };
  },
  methods: {
    onInput(e) {
      this.text = e.target.value;
    },
  },
};
</script>

<template>
  <input v-bind:value="text" v-on:input="onInput" placeholder="Type here" />
  <p>{{ text }}</p>
</template>

However, Vue.js makes things simpler for us and gives us the v-model: which combines v-bind: and v-on:. With v-model:, we do not need to call the function explicitly. Here it's:

<script>
export default {
  data() {
    return {
      text: "",
    };
  },
  methods: {
    onInput(e) {
      this.text = e.target.value;
    },
  },
};
</script>

<template>
  <input v-model="text" placeholder="Type here" />
  <p>{{ text }}</p>
</template>

In other words, I removed v-on: completely and changed v-bind with v-model=.

Conditional Rendering

Use v-if="" v-else="" and if you have more conditions v-else-if for conditional rendering. If the condition is not satisfied, Vue doesn't render it. And that's the main difference between v-if and v-show. v-show renders in any case.

<script>
export default {
  data() {
    return {
      awesome: true,
    };
  },
  methods: {
    toggle() {
      this.awesome = !this.awesome;
    },
  },
};
</script>

<template>
  <button @click="toggle">toggle</button>
  <h1 v-if="awesome">Vue is awesome!</h1>
  <h1 v-else>Svelte are coming!</h1>
</template>

If awesome is true render <h1 v-if="awesome">Vue is awesome!</h1>, else render <h1 v-else>Svelte are coming!</h1>

Before I finish part, I want to talk about this line this.awesome = !this.awesome. This means, next value will be opposite of the current value when event listener is triggered. If current value is falsy, next value will be truthy and vice versa.

To sum it up, in this part we talked about declarative rendering (mustache syntax), bind attributes (v-bind), event listeners (v-on), form bindings (v-model), conditional rendering (v-if, v-else, v-else-if)

This is the end of part 1, I will go over v-for in the next part.

};

toggle

Vue is awesome!

Svelte are coming!




If `awsome` is `true ` render `<h1 v-if="awesome">Vue is awesome!</h1>`, else render `<h1 v-else>Svelte are coming!</h1>`

Before I finish part, I want to talk about this line `this.awesome = !this.awesome`. This means, next value will be opposite of the current value when event listener is triggered. If current value is falsy, mext value will be truthy and vice verca.

To sum it up, in this part we talked about declarative rendering (mustache syntax), bind attributes (v-bind), event listeners (v-on), Form Bindings (v-model), conditional rendering (v-if, v-else, v-else-if)

This is the end of part 1, I will go over `v-for` in the next part.