What is React createPortal?

In React, createPortal is a method that allows developers to render a React component into a container that exists outside of the parent component hierarchy. This is particularly useful when building user interfaces that require the rendering of elements outside the main content flow of the page, such as modal dialogs, tooltips, and dropdown menus.

The syntax for using createPortal is straightforward. You can use it by importing the method from the react-dom package, and passing in the component that you want to render, along with a reference to the container where you want to render it. Here's an example:

In this example, we're using createPortal to render a MyModal component into a container with the ID of modal-root. This container can be located anywhere in the HTML of the web page, and the MyModal component will be rendered inside of it, outside of the main content flow of the page.

Accessibility Benefits of React createPortal

One of the key benefits of using createPortal is that it can help improve accessibility in your React application. When using createPortal, the focus is automatically shifted to the new component when it's rendered, making it clear to users that they are interacting with a separate element on the page. This can help prevent confusion for users who rely on assistive technologies, like screen readers or keyboard navigation.

In addition to this, createPortal also helps prevent accessibility issues that can arise when using traditional CSS techniques to position elements outside of the main content flow. For example, if you use absolute positioning to display a modal dialog, the dialog may not be visible to users who are navigating the page with a keyboard. createPortal avoids this issue by rendering the modal outside of the main content flow, but still keeping it part of the React tree.

How is createPortal Different from createRoot?

While createPortal and createRoot are both methods provided by React to help developers manage the rendering of components, they have different use cases and behaviors.

As mentioned earlier, createPortal is used to render a React component into a container that exists outside of the parent component hierarchy. This is useful when you need to render UI components outside the main content flow of the page.

On the other hand, createRoot is used to render a React tree into a container that is not yet attached to the DOM. This is useful for server-side rendering, where you need to generate HTML markup on the server and send it to the client. It's also useful for pre-rendering components that will be mounted later in the application lifecycle.

Here's an example of how to use createRoot to render a React component:

In this example, we're using createRoot to render a MyComponent component into a container with the ID of root. This container doesn't exist yet in the DOM, so we use createRoot to create it and then render the component inside of it.

It's important to note that createRoot is only available in React version 18 and later, so if you're using an earlier version of React, you won't be able to use this method.

Conclusion

In summary, createPortal and createRoot are two powerful methods provided by React to help developers manage the rendering of components. createPortal is used to render components outside of the main content flow of a web page, which can help improve accessibility and prevent issues with positioning elements using traditional CSS techniques. On the other hand, createRoot is used to render a React tree into a container that is not yet attached to the DOM, which is useful for server-side rendering and pre-rendering components.

By using these methods, you can create more robust and efficient user interfaces in your React applications.

If you found it useful, like, subscribe, and share the knowledge.

If this is your first time reading my blog and you want to know more about me, make sure you subscribe and follow me on Twitter.

Some Background

Before I started working as a web developer, I worked on many other things. Most of them required physical effort of some kind. When I was a carpenter, I used to lift heavy stuff most of the time, and working in a mall or as a waiter, I used to expend a lot of hours on my feet.

Also, I worked out way more than I do now. For instance, when I was living in Spain, I played football (⚽) every weekend and twice a week I trained.

In my middle 20's my weight was around 70kg. As I said, I used to exercise a lot.

Web development and Pandemic

We, as web developers, are sitting down most of the time. And this might not be a problem if you have other activities, like going to the gym or hurrying after that train or bus to get to the office. Because working out is not just lifting weight, but moving your body.

That routine changed for me in March 2020. With the first lockdown we lived in Israel, I started working from home. That meant no more hurrying to catch a train or bus to get to the office. If I used to do around 9k steps per day, it dropped to 1k per day.

Although I tried a few times to start running in the evenings, it didn't endure, and 11 months later I found myself with my back hurting and 91kg of weight.

Real Problem

One day I couldn't sit down because my back was hurting and I worked all day standing up. I remember the next day also my legs were hurting and I had to take the day off.

After an x-ray and a visit to the doctor, I was diagnosed with a herniated disc. Lucky me was still in an early stage so with physiotherapy and exercise I could avoid surgery.

Conclusion

I tweeted this the other day and I think it wraps up everything I want to say.

For a good work-life balance, stay active and healthy.

Picture by Jon Tyson

It's well known that modern web applications fit in a div.

Ok, React uses #root and Vue uses #app but they just do the same, which is inject the JavaScript code into that div. So here it comes the question:

What if I have an element I want to display as a sibling of the #app element in the html?

Sometimes we have a loader or a modal (aka popup) component that is not part of the app, but anyway, it will be injected inside the #app element. Thus, the html will look like this:

<html>
  <body>
    <div id="app">
      <!-- Other injected HTML here -->
      <div class="loader">
        <!-- HTML for the loader goes here -->
      </div>
    </div>
  </body>
</html>

Let's teleport!

To use the teleport component in your app, you need to first, add a sibling to the #app element in the html.

<html>
  <body>
    <div id="app"></div>
      <!-- built files will be auto injected -->
    <div class="loader"></div>
      <!-- loader component will be injected here -->
  </body>
</html>

Once you've done that, go to your .vue file and use the teleport component:

<template>
  <teleport to=".loader" v-if="showLoader">
    <Loader />
  </teleport>
  <!-- The logic of your component goes below -->
</template>

And that's it. Now, when the showLoader condition is met, the loader will show in the specified html element. Notice that I used a CSS selector so if the element was an id, I could have done it like this: <teleport to="#loader" v-if="showLoader">

If you found it useful, please like, subscribe, and share the knowledge.

You might like what I share on my Twitter too.

Definition of trim, "To cut away unnecessary parts from something." - Oxford Dictionary.

Sometimes, validating forms in JavaScript can be a tedious task for a developer. You have to check many things. For instance, that the values given are of the type you expect them to be (string, number, object...), that they are not undefined or null. And after all that validation, you realize that a user typed an empty string. 🤦‍♂️

One of the most common issues about empty strings a developer can face is the one that has spaces.

console.log(myInput)
> '      '  // 👈 Empty String

How can you prevent this from happening? In JavaScript, there are five different methods (actually there are three and two aliases) you can use. Let's check what they do.

Use Case

In a login form, you have an input where the user needs to enter a username like the one below.

👆 Did you notice the whitespace at the beginning and the end of the input?

If we have a look at our code, the input would be like this:

<input class="username" placeholder="Enter Username" type="text">

And the JavaScript like this:

const userNameInput = document.querySelector('.username')

console.log(userNameInput)
> '   Eliahu Garcia Lozano   '

Time to get rid of the whitespaces 🧹.

TrimStart and TrimLeft

These two will remove the whitespace from the beginning of a string.

console.log(userNameInput.trimStart())
> 'Eliahu Garcia Lozano   '
console.log(userNameInput.trimLeft())
> 'Eliahu Garcia Lozano   '

TrimEnd and TrimRight

These two will remove the whitespace from the end of a string.

console.log(userNameInput.trimEnd())
> '   Eliahu Garcia Lozano'
console.log(userNameInput.trimRight())
> '   Eliahu Garcia Lozano'

With these methods, we either removed the whitespace from the beginning or the end of a string but, what if you need to remove the whitespace from both sides?

trimStart and trimEnd are methods while trimLeft and trimRight are aliases of those methods.

Chaining the methods

You can use them together to get the desired result.

console.log(userNameInput.trimStart().trimEnd())
> 'Eliahu Garcia Lozano'
console.log(userNameInput.trimRight().trimLeft())
> 'Eliahu Garcia Lozano'

Ok, maybe it is a little bit ugly I know. Let's check the last method, actually the one I use.

Trim

Just like chaining methods, trim will remove the whitespace from left and right; plus, your code will look cleaner. 😅

console.log(userNameInput.trim())
> 'Eliahu Garcia Lozano'

Validating the input

In many places I've seen this kind of string validation:

if (userNameInput !== "") {
  // do something
}

The problem with this is that the user may enter whitespace.

Now that we know how to trim the value of the input, let's see how to implement it in our form validation.

if (userNameInput.trim() !== "") {
  // do something
}

Do you see the difference?

Conclusion

We saw how to remove the whitespace from just the beginning or the end of a string as from both sides at the same time.

Remember:

• .trimStart() & .trimLeft() will remove whitespace from the left.
• .trimEnd() & .trimRight() will remove whitespace from the right.
• .trim() will remove whitespace from both the left and the right side.

From now on, Trim Your <Inputs>! (if you didn't before).

If you found it useful, please like, subscribe, and share the knowledge.

You might like what I share on my Twitter too.

Cover Picture by Isra E on Unsplash

Introduction

In my last post, I talked about Destructuring Assignment In A Function Parameter and why it is handy when you have optional parameters in a function and don't want to pass undefined or null.

With that been said, what if you have a function where all the parameters are required? Again, since ES2015 (aka ES6) this can be easily implemented. Let's dive in.

Use Case

If you take a Tip Calculator project as an example, you probably will need always the same parameters:

1. Bill Amount.
2. Number of People.
3. Service Quality.

The function you'll need would look like this 👇

function calculateTip(totalBill, numOfPeople, serviceQuality) {
  // Your validation here
  // Your code here
}

console.log(calculateTip(50, 2 , 0.2))
// 5.00

Inside the function, you'll have to do all the calculations AND all the validation; plus, most of the time I go with the same friend (2 people) and leave the standard tip (20%).

In this case, the only parameter that will be changing all the time will be the bill amount.

So, let's give numOfPeople and serviceQuality a default parameter:

function calculateTip(totalBill, numOfPeople = 2, serviceQuality = 0.2) {
  // Your code here
}

console.log(calculateTip(50))
// 5.00
console.log(calculateTip(75))
// 7.50

Now, just when someone else is joining, or we want to leave a different tip percentage, it will be necessary to pass the rest of the arguments.

Conclusion

You don't really need to check if the argument in a function is undefined, you can create a default value for it.

When a different value is provided, the default value will be overwritten.

If you found it useful, please like, subscribe, and share the knowledge.

You might like what I share on my Twitter too.

Use Case

We all have this Utils.js file in our projects where we have all kinds of functions that will be used all over the project. Imagine you have a To-Do app and one of those functions was addTodoItem and you had to call this function in different places.

Function declaration would look like this:

function addTodoItem(title, description, dueDate) {
  // Your code here
}

Before calling the function, see the characteristics for each parameter:

• Title => required.
• Description => !required.
• DueDate => !required.

Let’s add a few items to the list now.

addTodoItem('Shopping List', 'eggs, milk', '30-11-2020')
> { title: 'Shopping List', description: 'eggs, milk', dueDate: '30-11-2020' }
addTodoItem('Call Mom')
> { title: 'Call Mom' }
addTodoItem('Pay Bills', undefined, '01-12-2020')
> { title: 'Pay Bills', dueDate: '01-12-2020' }

If we pay attention to the last example, we can see that on the first day of the month I need to pay my bills. 🤣

Jokes aside, we see that I had to pass the second value as undefined because the function is expecting the description as the second parameter.

For this specific example, if I wanted to pass a dueDate, first I would have to check whether the description is undefined or not before I call the addTodoItem function.

Here is where using destructuring will be very helpful.

This is how the addTodoItem would look now. 👇

function addTodoItem({title, description, dueDate}) {
  // Your code here
}

Let’s add again the same items as before.

addTodoItem({ title: 'Shopping List', description: 'eggs, milk', dueDate: '30-11-2020' })
> { title: 'Shopping List', description: 'eggs, milk', dueDate: '30-11-2020' }
addTodoItem({ title: 'Call Mom' })
> { title: 'Call Mom' }
addTodoItem({ title: 'Pay Bills', dueDate: '01-12-2020' })
> { title: 'Pay Bills', dueDate: '01-12-2020' }

If you pay attention to the last item added, you’ll see that there was no need on adding the undefined for the description. Just title and dueDate.

Bonus!

There is more: not only do you not need to pass undefined anymore, but you can even change the order of how you pass the arguments and it will still work.

addTodoItem({ description: 'eggs, milk', dueDate: '30-11-2020', title: 'Shopping List' })
> { title: 'Shopping List', description: 'eggs, milk', dueDate: '30-11-2020' }
addTodoItem({ title: 'Call Mom' })
> { title: 'Call Mom' }
addTodoItem({ dueDate: '01-12-2020', title: 'Pay Bills' })
> { title: 'Pay Bills', dueDate: '01-12-2020' }

Conclusion

That’s it! We saw how to use destructuring when declaring a function and how to call that function and provide the arguments.

Remember that you can get rid of the undefined or null since the order of the arguments doesn’t matter.

PS. Remember to pay your bills. 🤣

If you found it useful, please like, subscribe, and share the knowledge.

You might like what I share on my Twitter too.

Let's be honest, outdated copyright disclaimers on a website looks bad. Looks like the website it's unmaintained on many levels. On the other hand, you don't want to manually update it every 1st of January on every website you own right? Let me help you automate this task with 2 lines of code. If you want to know more about the importance of updating your copyright dates I found this post with a more in-depth explanation.

First, let's create a basic HTML template where we will have our copyright disclaimer at the footer:

<body>
  <header>Lorem ipsum dolor sit</header>

  <main>Lorem ipsum dolor sit amet consectetur adipisicing elit.</main>

  <footer>Copyright © <span id="copyright"></span>, My Company Name</footer>

  <script src="app.js"></script>
</body>

And then, our javascript will look like this:

const copyright = document.querySelector('#copyright')

copyright.innerHTML = new Date().getFullYear()

That's it, you are cover now. 😎

Bonus tip:💡

In case you need a range of years instead of a single year in your copyright disclaimer, you can easily tweak the above code.

<footer>Copyright © <span id="copyright">2010 - </span>, My Company Name</footer>

const copyright = document.querySelector('#copyright')

copyright.innerHTML += new Date().getFullYear()

Thank you for reading, if you like my content, you can always find me on Twitter @eligarlo.

With my salary, we had enough to cover the monthly expenses but my wife decided to start working so I could study. Pregnant and with our son…she found a kinder garden where she could work and also take our son.

Hi there 👋, after the first two posts of VueJs, The Series 🚀, I wanted to post something about me and my journey into tech.

To give you some context, I'm Eliahu, you can find me on Twitter @eligarlo, I'm from Spain and currently based in Israel. I speak 3 languages (Spanish, English, Hebrew) but my reading and writing skills in Hebrew are just OK (with the help of Google Translate😅). I'm 33 years old, married, and father of two wonderful kids. I never had a blog before, this is literally the third post I've ever written in my life! I invite you to keep reading and enjoy my journey.

From Spain

I lived in Spain until the age of 24. I quit studying when I was 18, at that time I thought that studying wasn't for me 😂. I started working as a carpenter. I always loved to build things, to see that, taking parts that apparently don't belong together, I could build something useful. Unfortunately, this job did not endure much and after trying as a salesman, the 2008 crisis hit, and I decided to leave Spain.

Through England

In Spain, you have everything, beaches, mountains, hot and cold weather, you name it. It's not very common to live in another country or to travel to different countries as a Spaniard. It is not in the culture (probably for my parent's friends I'll still be the one that lives in Israel).

So, I left Spain and took a flight to Bristol, UK, and then a bus to Wells, Somerset. I was like this guy moving from the town to the city. Even though Wells is known to be the smallest city in England, my thoughts were that the world was bigger than what I had imagined.

My English was like Manuel's from Fawlty Towers, but I had a contract with a local hotel to start working as a waiter in their restaurant. As my English improved, I started getting more tasks to do, at some point I ended up covering some shifts as a receptionist.

I met awesome people from different countries, staff, and customers. This helped me to better understand other cultures and not feel like that boy coming from the town. I even got to do an Interrail 🚂 trip from Amsterdam to Vienna, through Berlin, Warsaw, Krakow, and Prague.

After a year and a half, I was ready to move on.

To Israel

I always wanted to live in Israel and I arrived in 2012 full of energy. Originally, I thought speaking English was gonna be good enough but unfortunately that wasn’t the case.

The first two years were good, I really enjoyed myself but after that, I got my nationality and had to start working (like a real job👔).

In 2015, I went to one of those agencies that find you a place to work. Due to my lack of the local language, the only position I could find was cleaning in a school. It was not the best job in the world but at least I started working at 10 am so I could go to sleep late 🦉. That same year I met my wife and got married, she is also Spaniard but from a different city. When the school closed for summer vacation, I decided I had to find something else.

During that summer I worked in a cafe, and although I learned some Hebrew there, the salary wasn't great, so I went to the next opportunity. I took a job as an animal caretaker in a laboratory of the Hebrew University, Jerusalem.

The job there was basically taking care of the animals (mice🐭, rats🐀 , and rabbits 🐇), feed them, and clean their cages.

In 2016, whilst working at the lab, my first son was born. I worked there for over a year and then started having problems with my back due to the workload.

The next stop was ticket controller on the light rail 🚆. In this job, I picked up Hebrew much quicker as I was always out on the street and talking with lots of people.

Deep Thoughts

In January 2018, I realized I needed a BIG CHANGE. My wife was expecting again (our daughter).

I was working shifts on the light rail, but for years I had had the fear that I wouldn’t be enough, enough to provide for my growing family and enough for myself.

I'm a quick learner, I learned English and Hebrew on the fly, no lessons. I started thinking I could do better, I needed to do better.

⬇Start talking about code here⬇

With the above said, let's talk about some code.

I have this friend (with time he became my mentor) that told me that he was a web developer, to be honest, I always liked nice effects on websites and things like that but never thought about what was behind it. I started playing around with the basics for a couple of months and then decided I needed a place to go to boost my learning (my respect for people I see nowadays learning online, alone).

So, I went to the John Bryce academy asking about a course in web development and they offered me a Full Stack Course of one year. I didn't have the money, I didn't have the time, but I had the motivation and a wonderful wife!

With my salary, we had enough to cover the monthly expenses but my wife decided to start working so I could study. Pregnant and with our son (he was staying home with her), she found a kinder garden where she could work and also take our son. Their day was like leaving home before 7 am and back home at almost 6 pm.

In May 2018, after going to a taster session to find out if I could understand the language (Hebrew), I decided I would go for it. My days were tough, my shifts at work were from 7 am to 5 pm, and I had lessons twice a week from 6 pm until 10 pm. It got better when I started getting homework and semester projects 😂. I didn't have an office at home, just my laptop, and no fancy setup. I remember putting a desk in our room, and the back of my chair was against the bed and my knees against the desk.

We were like zombies, and we barely saw each other part from weekends, but I was getting pretty good grades and I realized after 30 years, I had finally found my passion. I could (and still do) talk about code all day, learn new stuff and enjoy everything I am learning.

Landed My First Job

About half a year after I started learning, my friend (mentioned above) talked to me about an opening position they had at his company. His boss called me, we talked, I was so nervous I talked too much😅, but they hired me. No exam, nothing, just the trust of this friend that I could do the job. To this day, that is coming back to me as impostor syndrome. I see many people struggling to get that first job, and for me, it was just a quick phone call.

So, I signed a contract with them for a couple of months, that's what the original offer was. I learned things I wouldn't learn in the course. I learned new technologies, how to work with a team, build web pages from simple mock-ups given by the designer, and much much more!

At the end of the contract, due to company policy, I had to leave, BUT the boss saw that I was delivering and growing very fast, so he hired me as a contractor and I was able to work there for the whole year.

I was working up to 4 days a week, sometimes just 3 (which was fine during the time I was still studying), but my contract was renewed every two months. I was very happy working there but I decided to start looking for a full-time job.

I started simple, passing my CV to friends. I'm a low profile (or that I thought). One came back with an interview over the phone, where I had to record myself while answering questions on the phone. I passed that first step of the interview and went to a face to face interview with the hiring manager. I've read many tips on what to do before an interview, the one I give you is, think about the interview as if you were chatting with a friend, this gave me confidence, thinking that the person in front of me was not judging me but wanted to know me better.

I passed this step too and I was given an exam, a home assignment, and code review after I finished it. After the code review, I got to the final step! Passed the HR interview, then got an offer that I accepted 🍾🥂. This was December 2019.

Even though I am working full time I continue learning and building my side projects. I have started to become more active in the Twitter tech community and started blogging as well.

Thank you for reading, if you have any questions or would like to know me better, you can always find me on Twitter @eligarlo.

Spoiler alert🚨: In case you missed VueJs - Getting Started go and check it out.

What is Interpolation?

When we talk about interpolation, aka "String Interpolation", we talk about the "Mustache" syntax we saw in the previous episode, {{ }}.

There are 4 types of interpolations:

1. Text
2. JavaScript Expressions
3. Raw HTML
4. Attributes

Text

We already saw it when we had this HTML.

<div id="app">
  <h1>{{ title }}</h1>
</div>

Let's also bring our Vue instance for reference.

new Vue({
  el: "#app",
  data: {
    title: "I'm Interpolating!"
  }
})

We see that Vue is accessing the data property inside our Vue instance, is grabbing the title and 'binding' it's value inside our {{ title }}. That's it, there is nothing else to see here. 👀

JavaScript Expressions

Vue supports JavaScript expressions, so basically we can throw any JavaScript code inside.

<div id="app">
  <div>2 * 2 = {{ 2 * 2 }}</div>
  <div>Today is {{ new Date().toDateString() }}</div>
  <!-- It also works with ternary expressions -->
  <div>And the output is: {{ foo ? 'bar' : 'baz' }}</div>
</div>

The output of the ternary? 🤷‍♂️

It will be baz because foo is undefined in our Vue instance, so is evaluated as false.

⚠Attention⚠, Vue will bind only one single expression, so the following code won't run.

<div id="app">
  <div>{{ let myVariable = 'be' }}</div>
  <div>{{ if (foo) { return 'bar' } }}</div>
</div>

The code above won't work because neither is JavaScript Expressions.

Raw HTML

Until here we saw that whatever was inside our Mustache {{ }} was text, or interpreted as text, but what about if we want to bind some HTML? Imagine that we have a JSON where we have stored the content of the website, or we fetch it from the back-end. Most of the time, we will store the content as plain text, but sometimes we might get HTML instead.

For this, we will need to use the v-html directive. Don't worry, for now, we'll cover what directives are.

For the purpose of these tutorial let's put that HTML in our title :

new Vue({
  el: "#app",
  data: {
    title: "<h1 style='color: blue;'>I'm Interpolating!</h1>"
  }
})

In our HTML now we don't need to grab the {{ title }} inside the h1 tag.

<div id="app">
  {{ title }}
</div>

As explained before, Vue will interpret this as text so the output will be 👇

What we need to do in order to see our HTML as HTML is the following:

<div id="app">
  <span v-html="title"></span>
</div>

We used an HTML tag, in this case, a span, inside its opening tag we added our directive v-html, and as a value, we passed our title. What Vue will do is to pass that value of title inside the span. Let's see if this time worked 👇

Attributes

As we saw with the v-html, there are times when we need to pass certain values to our HTML, for that, we use directives. Imagine we have to put a dynamic id, inside of a div in our HTML. For this, we can use the v-bind directive. Again, don't worry, directives will be cover in future episodes of this series.

The syntax is quite similar as the previous example.

<div id="app">
  <span v-bind:id="dynamicId"></span>
</div>

Look how we add :id after v-bind to tell Vue that what we want will be this <span id="1"></span>, well if dynamicId had the value of 1 😅

And we can do more with v-bind. Imagine we have a button that we want to show as disabled. All we have to do is to add :disabled at the end of v-bind. But for this, we won't give a value that Vue can interpret as a string. Vue needs to know if we want this button to be disabled, YES or NO, so will check if the value is true or false.

<div id="app">
  <button v-bind:disabled="isButtonDisabled">Sign In</button>
</div>

In our case, isButtonDisabled is undefined, so Vue won't even render the attribute disabled, and this will happen if the value is also null or false.

Conclusion

In this episode we covered the following:

1. We can do interpolations as plain Text with Mustache syntax {{ }}.
2. Inside the Mustache syntax we can have JavaScript Expressions.
3. To render Raw HTML we need the v-html directive.
4. We can dynamically change Attributes with the v-bind directive.

GitHub repo for the code used in this episode.

Did you enjoy this article? Don't be selfish, go on and share the knowledge!

You can also find me on Twitter @eligarlo.

“To get started with Vue, all you need is familiarity with HTML and JavaScript. With these basic skills, you can start building non-trivial applications within less than a day”- VueJs Docs

Hi vue and welcome to VueJs, The Series 🚀

In this first episode we are going to cover the following topics:

1. Getting Vue In Our Machine.
2. Setting Up Our Environment.
3. Conclusion

Getting Vue In Our Machine

We have a few different ways to install vue as you can see here but for the purpose of this tutorial I'll be using CDN.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Don't use this CDN for production.

Setting Up Our Environment

We will need an index.html and app.js files.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- VueJs Import -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>VueJs - Getting Started</title>
</head>
<body>
    <div id="app">
        <h1>{{ title }}</h1>
    </div>

    <script src="app.js"></script>
</body>
</html>

Your index.html should look like this ☝

1. Imported VueJs CDN.
2. Created a div with an id of app.
3. Inside app created a title.

Let's go over 2 and 3 for a second:

• The div will be under control of the Vue instance.
• Title uses the special syntax that Vue will recognize and interpolate from our Vue instance.

Your app.js should look like this 👇

new Vue({
  el: "#app",
  data: {
    title: "Hello World!"
  }
})

Hold your 🏇🏇, WHAT?

We created our Vue instance with new Vue() that takes an object as an argument.

Then we have the el and data properties. All properties (there are more and we will see them in this series) have reserved names that Vue will recognize.

In the el property we need to pass the html element that we want the Vue instance to take control.

In the data property we store all the data we want to use in our Vue instance. Think of the properties store inside the data object as variables, you can have strings, booleans, arrays... In our case the data property is the string Hello world, very creative right?

Ok, so let's open our html file and see what we got there.

Congratulations, we created our first VueJs app! 🎉🥳

Conclusion

In this episode we covered the following:

1. We installed the VueJs framework using CDN.
2. We created our html template and use the special {{ }} syntax.
3. We created our Vue instance and explain about the el and data properties.

TODO: Build this Hello World app by your own but this time instead of using a CDN, installing Vue in a different way.

Here is again the link for the other installation options.

GitHub repo for the code used in this episode.

Did you enjoy this article? Don't be selfish, go on and share the knowledge!

You can also find me on Twitter @eligarlo.