Forem: La Doppia Esse

How to use the spread operator (...) in React

La Doppia Esse — Wed, 01 Mar 2023 01:47:49 +0000

Introduction

Stumbled upon three dots or an ellipsis in JavaScript and wondered what on earth it means?

Allow me to formally introduce you to the spread operator! A handy JavaScript feature that makes your code simpler, compact, and more pleasant to write. The spread syntax might seem odd at first, but if you have the fundamentals of JavaScript down, it might be easier to learn than you think.

In this post, I’ll teach you all about it and show you how to use spread with React. This is what we will cover:

📍 What is the spread operator?
📍 The spread operator syntax

If you already know what the spread operator is, you can jump here:

📍 How to use the spread operator to spread props in a React component
📍 How to use the spread operator to update state in React
📍 Pros and cons of using the spread syntax to spread props

What is the spread operator?

Introduced with ES6 (the revision of JavaScript valid from 2015), the spread operator allows you to expand - or spread - arrays and objects into multiple elements. This can be useful when copying arrays or objects, or when working with a number of arguments or properties. In the context of React, the spread operator can be used to spread an object of props onto an element in a React component, making it easier to pass down props to child components.

Examples of the Spread Operator

The spread operator is denoted by three dots. Let’s have a look at some use cases for the spread syntax.

Creating shallow copies of arrays

If we want to create a shallow copy of an array, we can easily do that using the spread operator. A shallow copy of an array allows you to work with the data in the copy without affecting the original array.

const airbnbExperiences = [
    "Walk in the woods",
    "Local cooking class", 
    "Guided tour"
];

// creating a shallow copy of the array using the spread syntax

const airbnbExperiences = [...airbnbExperiences];

// console.log(airbnbExperiences); 

/* 
["Walk in the woods", 
 "Local cooking class", 
 "Guided tour of the city"]
*/

Copying an array isn’t something you need to do every day, but let’s build on this syntax with the next example!

Concatenating arrays

Another situation where the spread operator comes in handy is when we need to concatenate two arrays or more arrays.

const airbnbExperiences = [
  "Walk in the woods",
  "Local cooking class",
  "Guided tour of the city",
  ];

const moreAirbnbExperiences = [
  "Night diving",
  "Volcano hike",
  "Language class",
  ];

// concatenating the two arrays into a new one:

const allAirbnbExperiences = 
  [...airbnbExperiences, 
   ...moreAirbnbExperiences];

console.log(allAirbnbExperiences);

/*
["Walk in the woods", 
 "Local cooking class", 
 "Guided tour of the city", 
 "Night diving", 
 "Volcano hike", 
 "Language class"]
*/

Adding elements to an object

Similarly, we can spread the elements of an object and even add new elements using the spread syntax. This is a very powerful feature of the spread syntax and you will likely use it again and again in your daily Javascript chores!

const airbnbListings = {
  exp1: {
    host: "Mario",
    exp: "Walk in the woods",
    location: "Norway",
  },
  exp2: {
    host: "Gloria",
    exp: "Local Cooking Class",
    location: "Italy",
  }
};

const updatedAirbnbListings = {
  ...airbnbExperiences,
  exp3: {
    host: "Tom",
    exp: "Night diving",
    location: "Mexico",
  },
};

console.log(updatedAirbnbListings);

/* 
    {
   exp1: {
    host: "Mario",
    exp: "Walk in the woods",
    location: "Norway",
      },
   exp2: {
    host: "Gloria",
    exp: "Local Cooking Class",
    location: "Italy",
      },
   exp3: {
        host: "Tom", 
        exp: "Night diving", 
        location: "Mexico"
        }
  }
*/

Spreading an array to function arguments

We can also use the spread syntax to spread the elements of an array as separate arguments when calling a function:

const expPrice = [29, 39, 9, 114] 

console.log (Math.min(...expPrice)) // 9

In this example, the function Math.min() returns the lowest number within the expPrice array. We are spreading the expPrice array into its arguments, as the Math.min() function takes a series of values and not an array.

If you got the gist of how we can use the spread operator, let’s move to some practical use cases in React!

How to use the spread operator to spread props in a React component

The spread syntax can be very useful in React components, especially when dealing with props. To thoroughly understand this section, you need to be familiar with React components, their parent-child relationships, and props. If you struggle to understand props or you simply want to refresh your knowledge, we wrote this thorough tutorial on props!

Props is an object, and as we have just seen, an object can be spread into its multiple key-value pairs using the spread operator.

Let’s build a small app to display data about Airnb Experiences. We start by building a component called AirbnbListing, which receives props. In this case, props is an object containing information about the user:

host
experience
location
price

export default function AirbnbListing(props) {
  return (
    <div>
      <p>Host: {props.host}</p>
      <p>Experience: {props.experience}</p>
      <p>Location: {props.location}</p>
      <p>Price: {props.price}</p>
    </div>
  );
}

In our App, we can render the AirbnbListing component. Now, how do we pass the props to the component? We have two chances:

1. Declaring the props one by one ⏰

//Scenario 1: declare every prop

import AirbnbListing from "./components/AirbnbListing";

const props = {
  host: "Mario",
  experience: "Walk in the woods",
  location: "Norway",
  price: 29,
};

export default function App() {
  return (
    <div>
      <AirbnbListing
        host={props.host}
        experience={props.experience}
        location={props.location}
        price={props.price}
      />
    </div>
  );
}

2. Using the spread syntax to pass the whole props object in one easy go! ⚡

//Scenario 2: using the spread operator

import AirbnbListing from "./components/AirbnbListing";

const props = {
  host: "Mario",
  experience: "Walk in the woods",
  location: "Norway",
  price: 29,
};

export default function App() {
  return (
    <div>
      <AirbnbListing {...props} />
    </div>
  );
}

What we render is exactly the same.

If you have followed so far, congratulations! 🎉 Spreading props in React is not an easy concept and you may have wondered: if what we render is the same, should I actually use the spread operator? This is what we are tackling next.

Pros and cons of using the spread syntax to spread props

There are some pros and cons to using the spread syntax in React components.

On one hand, it can save a lot of time and typing when you have a large number of props that you need to pass to a component, making the code less verbose.

On the other hand, spreading props obscures the properties we are passing to a component: to see them, we would need to shift to the file where props are declared, therefore making it difficult to see at a glance what props are being passed to a component.

Note: in our code example, the props are declared in the same file for clarity, but this is not usually the case.

Ultimately, it is a matter of how you feel more comfortable. It is best to stick with the accepted standard of the company or the React project you are working for.

The Verdict

In this article we have seen how useful the spread operator can be when working with props in React. When used together with other methods, such as the .map method, it can save precious time and make the code more concise. Still, it's always important to strike a balance between conciseness and readability! Use it at your own discretion and critically evaluate the specific situation.

I hope you enjoyed the article! See you next time 💯

Demystifying Linked Lists in JavaScript

La Doppia Esse — Wed, 14 Dec 2022 22:48:54 +0000

When I first encountered linked lists when learning JS, I felt hopeless. As a beginner, I really struggled to understand what they are used for and why we could not just use an array! As I didn’t want to leave a big gap in my knowledge, I took some time to demystify all about linked lists. This post is the result of such a process. I learnt, and I hope you will learn too:

What linked lists are and what they are made of
Differences between linked lists and arrays
Common uses of linked lists
Code example
Is a blockchain a linked list?

What are linked lists?

Linked lists are a common data structure in computer science. To be clear, an array is also a data structure, not a data type (for example, objects or booleans, or integers). Linked lists are made up of nodes, which are individual objects that contain two elements:

Some data
A reference to the next node called pointer

We can imagine that in a linked list nodes are connected to each other in a chain-like structure.

An important note here. Every linked list contains a head, which is a pointer to the first node of the list. The head does not contain any data itself. At the end of the linked list, we find a tail: as opposed to the head, the tail contains data, but it has no reference to the next node - because there is no next node!

In JavaScript (and I guess in other programming languages) linked lists look like deeply nested objects (see the code snippet below).

The difference between linked lists and arrays

The main difference between linked lists and arrays is that arrays are more of a static data structure, whereas linked lists are more of a dynamic data structure. I say ‘more of a’ static data structure because as you likely know, we can indeed modify the content of an array with methods such as push(), pop(), shift(), unshift(), and many more. Still, the addition or removal of data in a linked list is much more flexible than in an array.

When inserting or deleting elements, linked lists are more efficient than arrays because they do not require any shifting or resizing of the data in the list. In an array, inserting or deleting an element at the beginning or middle of the list requires shifting all of the other elements in the array to make room for the new element or to fill the gap left by the deleted element.

Common uses of linked lists

Using an array instead of a linked list will depend on the specifics of the application we are building. Linked lists are commonly used to:

Storing the data of a list or queue, where elements are added and removed in a particular order. If you are into NFTs, you are probably familiar with software that manage queues of users. Simply put, as one user gets to the checkout page, another one is allowed to enter the queue. The user at the checkout page will be removed from the linked list, whereas the new user will be inserted at the beginning of the linked list.
Implementing an undo/redo system where each action performed by the user is stored in a linked list and can be undone or redone by moving backward or forward in the list. This is a feature we use every single day in text editors and so many other software. Blessed ctrl/cmd + Z (and ctrl/cmd + shift + Z)!

Curious to see what a linked list looks like? Let’s write the code for a simple one.

// Define the Node class. Each Node object has two properties:
// - data: the data stored in the node
// - next: a reference to the next node in the list
class Node {
  constructor(data) {
    this.data = data;
    this.next = null;
  }
}

// Define the LinkedList class. Each LinkedList object has two properties:
// - head: a reference to the first node in the list
// - length: the number of nodes in the list
class LinkedList {
  constructor() {
    this.head = null;
    this.length = 0;
  }

  // Define a method for adding a new node to the end of the list
  append(data) {
    // Create a new node
    const newNode = new Node(data);

    // If the list is empty, set the new node as the head
    if (this.head === null) {
      this.head = newNode;
    } else {
      // Otherwise, find the last node in the list and set its next property
      // to point to the new node
      let current = this.head;
      while (current.next !== null) {
        current = current.next;
      }
      current.next = newNode;
    }

    // Increment the length of the list
    this.length++;
  }
}

// Create a new LinkedList instance
const list = new LinkedList();

// Add some nodes to the list
list.append('first');
list.append('second');
list.append('third');
list.append('fourth');


console.log(list)

/* 
LinkedList 
{head: {data: "first", 
     next: {data: "second", 
         next: {data: "third", 
             next: {data: "fourth", 
                next: null}
                }
            }
        }, 
    length: 4}
*/

In LinkedList, the only method is append (data), which allows to append a new node. Other methods to manage the linked list are commonly included, e.g., to insert a node at the beginning or to remove a node at a certain index of the linked list.

Is a blockchain a linked list?

If you have ever heard of a blockchain before, you most likely know that it is made up of interconnected blocks. A block stores information (for example transactions) and is linked to the previous and the next one, therefore forming a chain of blocks. While both linked lists and blockchains involve the concept of linking data together, the way that they do so is different. Linked lists are used to store and manipulate data in a linear sequence: as in the queue to buy NFTs, the linked list is dynamically updated and nodes (representing buyers) can be added or removed. On the other hand, blockchains are used to create a secure, ever-growing, and immutable record of data: blocks cannot be removed as nodes in linked lists. Do not confuse the nodes of a linked list with the nodes of a blockchain. The latter are the computers that help secure the networks.

In brief: blockchains are not linked lists, although they both involve the concept of linking some kind of data together.

That's a wrap!

Questions? Leave them below in the comments. I hope this article helped you to better understand linked lists.

If you liked it, leave a follow on Twitter - I am looking forward to connecting with fellow beginner developers!

An introduction to React component props

La Doppia Esse — Mon, 28 Nov 2022 20:59:19 +0000

Props are short for properties and are one of React's most fundamental concepts! Since all React apps use props in one way or another it's essential you have an unshakable understanding of what they are and how to use them.

Due to their unique behavior, props can be confusing and difficult to understand when you're first learning React. Don't worry though! We spent weeks assembling this comprehensive guide full of realistic examples and illustrations (there is even a prop quiz!) to help you on your way.

In this article, you are going to learn:

📍 What props are
📍 Why they are important
📍 How to receive them in a component
📍 The difference between props and HTML attributes
📍 How to destructure props
📍 How to pass props of other data types, such as booleans and numbers

Let's start by taking a closer look at React component and their relation to props.

What is a React component?

Let’s start with an example from a website everyone is familiar with - YouTube. Although it is not built with React, YouTube still uses the concept of components.

In React, a component is an independent and reusable bit of code that makes up the building blocks of any React-built app.

Imagine that you’re tasked to rebuild the YouTube homepage. Having a close look at it, you would easily notice that it is made of repeated elements:

For example, we have a Videotile component. It is made by a thumbnail image, the title of the video, the name of the channel, the view count, and the timestamp:

At first, you might be tempted to code each videotile separately, with its own data - a practice commonly referred to as hard coding.

However, more than 3 million videos are uploaded to YouTube every single day. Surely YouTube developers aren’t spending their time coding up a new Videotile instance every time someone uploads a new video!

Instead, they coded a single Videotile component that can automatically receive the information it needs to display.

At this point, you have figured out that it would be way better to code a single videotile component and, somehow, make it reusable. To make it reusable, the videotile component has to receive data every time a new video is uploaded. Furthermore, the videotile must update itself when, for example, the view count increases and when the timestamp changes.

That’s where props come in. Props allow us to make a component truly reusable, dynamically passing information between components as per our needs.

Writing JSX

To make use of props, it is important to understand how to write JSX code.

JSX is a syntax extension of JavaScript. It allows us to describe how the user interface (i.e., what HTML elements) should look like by seamlessly integrating JavaScript code within HTML tags and vice versa.

Let’s consider a simple component called App that renders an H1 element.

function App() {
  const title = "Mr."
  const lastName = "Whiskerson"
  return (
    <h1>Hello {title} {lastName}!</h1>
  )
}

ReactDOM.render(<App />, document.getElementById("root"))

Inside the component, we declare two variables: title and lastName.

When we’re inside JSX, curly braces give us a chance to “escape” back out of JSX and insert regular JavaScript values and expressions.

If we were to just put <h1>Hello title lastName!</h1>, it would think we wanted the literal text title and lastName to be in the H1 tag. Surrounding those JS values with curly braces ensures the variables get evaluated for their values before inserting them into the text of the header.

Props in action - let’s create a contact component

Okay - I assume that you now understand how props work in principle: it is better to have a flexible component that can receive information instead of a component that contains hard-coded information, making it non-reusable. With props, we can reuse components by passing in dynamic values instead of having to re-create those components with hard-coded data.

Next, let’s make our first component.

First, we will look at the inefficient way to code one (and explain how it is inefficient!), before refactoring it into a component that uses props.

The component we will code is a contact card for cats! I hope you like cats as much as we do (Scrimba's mascot is a cat named Pumpkin 😺!)


// Components in React must always begin with capital letter
export default function App() {
  return (
    <div className="contacts">
      <div className="contact-card">
        <img src="./images/mr-whiskerson.png" />
        <h3>Mr. Whiskerson</h3>
        <div className="info-group">
          <img src="./images/phone-icon.png" />
          <p>(212) 555-1234</p>
        </div>
        <div className="info-group">
          <img src="./images/mail-icon.png" />
          <p>mr.whiskaz@catnap.meow</p>
        </div>
      </div>

      <div className="contact-card">
        <img src="./images/fluffykins.png" />
        <h3>Fluffykins</h3>
        <div className="info-group">
          <img src="./images/phone-icon.png" />
          <p>(212) 555-2345</p>
        </div>
        <div className="info-group">
          <img src="./images/mail-icon.png" />
          <p>fluff@me.com</p>
        </div>
      </div>

      <div className="contact-card">
        <img src="./images/felix.png" />
        <h3>Felix</h3>
        <div className="info-group">
          <img src="./images/phone-icon.png" />
          <p>(212) 555-4567</p>
        </div>
        <div className="info-group">
          <img src="./images/mail-icon.png" />
          <p>thecat@hotmail.com</p>
        </div>
      </div>

      <div className="contact-card">
        <img src="./images/pumpkin.png" />
        <h3>Pumpkin</h3>
        <div className="info-group">
          <img src="./images/phone-icon.png" />
          <p>(0800) CAT KING</p>
        </div>
        <div className="info-group">
          <img src="./images/mail-icon.png" />
          <p>pumpkin@scrimba.com</p>
        </div>
      </div>
    </div>
  );
}

Once we add some CSS (that is why the divs have className), this is what we render:

Why was this an inefficient way to code a component?

In the App component, all the contact data is hard-coded! As we gather new cat contacts in our database, we have two options:

Keep hardcoding data into our contact cards, losing valuable time 🚫
Harvest the power of React and make a reusable component with props! ✅
I hope we are on the same page - let’s go for the second option 🙂

First of all, we need to create a custom Contact component. As we can see in the code snippet below, the data is still hardcoded, but we will take care of that very soon.

export default function Contact() {
  return (
    <div>
      <div className="contact-card">
        <img src="./images/mr-whiskerson.png" />
        <h3>Mr. Whiskerson</h3>
        <div className="info-group">
          <img src="./images/phone-icon.png" />
          <p>(212) 555-1234</p>
        </div>
        <div className="info-group">
          <img src="./images/mail-icon.png" />
          <p>mr.whiskaz@catnap.meow</p>
        </div>
      </div>

      <div className="contact-card">
        <img src="./images/fluffykins.png" />
        <h3>Fluffykins</h3>
        <div className="info-group">
          <img src="./images/phone-icon.png" />
          <p>(212) 555-2345</p>
        </div>
        <div className="info-group">
          <img src="./images/mail-icon.png" />
          <p>fluff@me.com</p>
        </div>
      </div>

      <div className="contact-card">
        <img src="./images/felix.png" />
        <h3>Felix</h3>
        <div className="info-group">
          <img src="./images/phone-icon.png" />
          <p>(212) 555-4567</p>
        </div>
        <div className="info-group">
          <img src="./images/mail-icon.png" />
          <p>thecat@hotmail.com</p>
        </div>
      </div>

      <div className="contact-card">
        <img src="./images/pumpkin.png" />
        <h3>Pumpkin</h3>
        <div className="info-group">
          <img src="./images/phone-icon.png" />
          <p>(0800) CAT KING</p>
        </div>
        <div className="info-group">
          <img src="./images/mail-icon.png" />
          <p>pumpkin@scrimba.com</p>
        </div>
      </div>
    </div>
  );
}

Now, we can set our App component to render multiple instances of our custom Contact component.

export default function App() {
  // App returns 4 instances of the Contact component
  return (
    <div className="contacts">
      <Contact
        image="./images/mr-whiskerson.png"
        name="Mr. Whiskerson"
        phone="(212) 555-1234"
        email="mr.whiskaz@catnap.meow"
      />
      <Contact
        image="./images/fluffykins.png"
        name="Fluffykins"
        phone="(212) 555-2345"
        email="fluff@me.com"
      />
      <Contact
        image="./images/felix.png"
        name="Felix"
        phone="(212) 555-4567"
        email="thecat@hotmail.com"
      />
      <Contact
        image="./images/pumpkin.png"
        name="Pumpkin"
        phone="(0800) CAT KING"
        email="pumpkin@scrimba.com"
      />
    </div>
  );
}

Does this syntax look familiar? It should!

HTML elements have attributes. For example, an img (image) tag can take the src (source) attribute. Or an a (anchor) tag can take an href attribute that receives a link.

To give an anchor tag a link, we use the href attribute; to give the component a value, we use props!

We can think of props like custom attributes for our custom React components. In the code snippet above, Contact is our custom component, whereas image, name, phone, and email are props.

Even though the syntax is similar, HTML attributes and props are quite different: for example, where HTML attributes can only take strings as values, props in React can take any kind of JavaScript data type as a value. But more on that later!

Receiving props in a component

Now we are all set up to receive properties in our Contact component. An important note here: props can be used to pass data from a parent component (in this case, App) to a child component (in this case, Contact):

It is not possible to use props the other way around, i.e., to pass data from a child component to a parent component, as the flow of information in React is one way.

There are ways to work around this limitation of one-way data flow in React, but they’re outside the scope of this article. If you want to have a deeper understanding of how this can be achieved, you can start here.

As the component is a function called Contact, we can receive an argument - and that argument is props.

In our case, props is an object that contains 4 key-value pairs: image, name, phone, and email are the keys, whereas the values are specified in the App for each instance of the Contact component.

As we are entering JavaScript, we need some curly braces.

Instead of src="./images/mr-whiskerson.png", we can now write src={props.image}. In this way, we are not hard coding the value (the location of the image), but we are using the value of the props.image object!

In the same way:

name="Mr. Whiskerson” → name={props.name}
phone="(212) 555-1234" → phone={props.phone}
email="mr.whiskaz@catnap.meow" → email={props.email}

We can already see that our Contact component is neater, less verbose, and it does not contain any cat-specific information - basically, we made it reusable, which is what React props are all about!

// receiving props in a component

export default function Contact(props) {
  return (
    <div className="contact-card">
      <img src={props.image} />
      <h3>{props.name}</h3>
      <div className="info-group">
        <img src="./images/phone-icon.png" />
        <p>{props.phone}</p>
      </div>
      <div className="info-group">
        <img src="./images/mail-icon.png" />
        <p>{props.email}</p>
      </div>
    </div>
  );
}

Prop quiz!

Still reading? Congratulations on making it this far! 💯

Take a small break and have a sip of coffee ☕, because it’s time for a little prop (heh heh) quiz!

Would you be able to answer these questions? Take some moments to think about the answer before clicking Show answer:

1. What do props help us accomplish?

Answer: Simply put, props help us to make a component more reusable.

2. How do you pass a prop into a component?

Answer: You can pass props into a component using this syntax:

<MyAwesomeHeader title="???" />

MyAwesomeHeader will be the name of the custom component, whereas title will be a property of the component.

3. Can I pass a custom prop (e.g. `blahblahblah={true}`) to a native HTML element (e.g. `<div blahblahblah={true}>`)? Why or why not?

Answer: No, because the JSX we use to describe native DOM elements will be turned into real DOM elements by React. And real DOM elements only have the properties/attributes specified in the HTML specification (which doesn't include properties like blahblahblah).

4. How do I receive props in a component?

Answer:

`export default function MyAwesomeHeader(props) {

return (
    <header>
        {props.title}
    </header>   
)

5. What data type is props when the component receives it?

Props are objects.

Destructuring props

The feature of destructuring was introduced in ES6, the version of JavaScript introduced in 2015. Given that props are objects, they can be destructured as any other object in JS.

In the React world, you are going to come across object destructuring a lot, so we are going to break it down. Let’s take for example a variable cat with two properties, firstName and lastName.

// declaring an object with two properties

const cat = {
  firstName: "Mr.",
  lastName: "Whiskerson",
};

// destructuring the object with two properties
const { firstName, lastName } = cat;

console.log(lastName); // -> "Whiskerson"
console.log(cat.lastName); // -> "Whiskerson"

After destructuring it, we can write firstName instead of cat.firstName, thus slightly improving the readability. Both of them will still return the same value.

Following on our example of the cat contact card, props is an object with four properties: an image, a name, a phone number, and an email address. We can destructure props in the following way:

//non-destructured props

export default function Contact(props) {
    return (
        <div className="contact-card">
            <img src={props.image}/>
            <h3>{props.name}</h3>
            <div className="info-group">
                <img src="./images/phone-icon.png" />
                <p>{props.phone}</p>
            </div>
            <div className="info-group">
                <img src="./images/mail-icon.png" />
                <p>{props.email}</p>
            </div>
        </div>
    )
}

// destructured props

export default function Contact({ image, name, phone, email }) {
  return (
    <div className="contact-card">
      <img src={image} />
      <h3>{name}</h3>
      <div className="info-group">
        <img src="./images/phone-icon.png" />
        <p>{phone}</p>
      </div>
      <div className="info-group">
        <img src="./images/mail-icon.png" />
        <p>{email}</p>
      </div>
    </div>
  );
}

Note that instead of props.image, now that we destructured props, we must write image only.

Using prop destructuring is ultimately a personal choice. In a scenario where the object has many properties, it may be reasonable to avoid destructuring at the cost of repeating the props keyword every time that a prop is used.

On the other hand, when we do not have a lot of props as in our cat contact card, using destructuring could be helpful to highlight the props that are used in the component by improving the readability of the code.

Passing in non-string props

The concept of props is very similar to the concept of HTML attributes, and with HTML attributes we always pass a string as the value (i.e., src="./image.png"). It is tempting to think that you could only pass string values for props…but nope, we are in JavaScript world and we can pass everything we want - a boolean, a number, or even an object or a function.

Passing in a non-string prop is pretty straightforward and uses a trick that we have already seen in this article: the use of curly braces.

Imagine that we want to include in our Contact component an isAvailable prop that we could later use to show or hide the contact card according to the cat’s availability to meet 🤣. In addition, we want to know how old the cat is, which we can indicate using a number.

// passing non-string props

export default function App() {
  return (
    <div className="contacts">
      <Contact
        img="./images/mr-whiskerson.png" // string
        name="Mr. Whiskerson"
        phone="(212) 555-1234"
        email="mr.whiskaz@catnap.meow"
        isAvailable={true} // boolean
        age={7} // number
      />
    </div>
  );
}

By surrounding the boolean value or the number with curly braces, JSX interprets it as, respectively, a boolean and a number.

As a teaser, it is also possible to pass functions as props. This feature is incredibly useful because, by passing a callback function as props, we can pass data from child to parent components!

The verdict

The concept of props is at the core of React, and every React developer should have a proper (pun intended!) understanding.

In this article, we have learned what props are, how they are used to code reusable components, how to pass data between components, and some useful tricks such as destructuring and passing non-string props.

By now, I hope you feel confident enough to use props in your day-to-day React practice!

If you want to practice more with props, I suggest checking out the Learn React Course at Scrimba. It is free, taught by a great instructor, and has plenty of challenges and projects that will help you to learn React in an interactive way.

5 reasons most self-taught web developers burnout and quit

La Doppia Esse — Fri, 09 Sep 2022 11:34:56 +0000

Learning to code by yourself is hard, and the path is often not as straightforward as we imagined. Unforeseen challenges come up daily, and without the right motivation and support, it's easy to fall into despair.

The scary truth? Most self-taught developers quit early from burnout before they even start building projects or applying for jobs 😲

In this article, we will go through the challenges, the pitfalls self-taught developers commonly face, and what steps you can take to keep learning and stay motivated.

As a self-taught developer myself, I quit twice before getting it right! Coming from a PhD in Life Sciences, with no previous programming knowledge and way above the average age of a college freshman, I started again from the ground up. I made the best out of my failures and learned valuable lessons along the way.

1. Lack of purpose

When I started to learn web development for the first time, I had no clear purpose.

I thought I could make a quick buck building websites and dove head first into web development. After an initial honeymoon phase of writing vanilla HTML, CSS, and JavaScript, it got more challenging, and I slowly lost motivation. Making money was not a strong enough reason for me.

To find your purpose, ask these questions:

Why do I want to learn web development?
Do I want to build something on my own or rather be part of a team?
What am I most passionate about web development?
Am I a more technical or visual type of person?

Once you set a goal, finding a path and identifying the right learning resources for you becomes easier.

If you want to be a front-end developer, maybe you should not start with PHP, for example. Instead, I would recommend you learn HTML, CSS, JavaScript, and React with Scrimba's Frontend Developer Career Path.

Defining your purpose will boost motivation during the difficult moments you encounter and help you stay focused to achieve your long-term goals.

2. Self-doubt

As a self-taught developer, it is normal to doubt yourself, especially at the beginning.

If you've ever asked yourself one of these questions, you are not alone:

Am I smart enough to learn programming by myself? 🤔
Who will ever hire me? 🤔
Am I too old? 🤔

When we cannot find an answer to these questions, we tend to give up after the initial momentum.

With enough practice and motivation, anyone - from any background - can learn web development.

Dan was an air conditioning technician and landed his first job after 7 months of self-study.
John got a developer job after having worked as a guitar teacher.
Robert got his first job as a developer at 33!

If you are questioning if you're good enough, remember that everyone started somewhere - and very few people are outstandingly smart!

You have probably noticed this yourself. When you started your first job, you likely were not as skilled as you are now.

Did you study at university? I bet your first exam did not feel as good as the last one.

If you are willing to put in the effort and consistency, you can't be in a worse place than you were yesterday. Celebrate every little win and acknowledge your progress.

3. Not thinking like a programmer

One of the most challenging concepts to wrap your head around is how to "think like a programmer." It's an abstract concept, so let's look at two specific things you can try to improve your mindset and approach to code.

Don't memorize or copy-paste code.

Most self-taught developers make two common mistakes at the beginning.

First, they tend to memorize most of the code they are learning, only to find out that they can't remember anything useful.

The second issue that self-taught developers commonly encounter is getting stuck into a copy-paste loop: they follow the tutorial, think they understand and copy-paste the code in their text editor. Wrong 🙅🏻‍♂️! In the long term, copy-pasting code is as detrimental as memorizing code!

Breaking down complex problems

I was making these mistakes myself until I found a book that changed my way of learning called Think like a programmer by Anton Spraul.

In the book, he clarifies that problem-solving is much more critical than any language's syntax - documentation is always available. It is much better to acquire an ''algorithmic mindset'' and know where to look or what to use to solve problems rather than memorizing syntax for a specific problem. You should be a librarian, not an encyclopaedia of code!

Writing code yourself allows you to understand the nitty-gritty and maximize your learning. I recently took the habit of writing pseudo-code before every project I undertake. It helps to feel like I'm building something myself and gives me the boost of confidence I need to get to the end.

Most importantly, learning programming takes time: persistence and practice are the keys to success 🏆.

Allow yourself time to acquire foundational knowledge and do your best to apply it constantly.

4. Lack of support and community feeling

Many people start studying programming as a way to shift careers or to pursue a new interest. It is likely that not so many people around you are doing the same.

I first started to code with a 10$ online course. We had a community Facebook group that was poorly taken care of and soon transformed into a spam links dumpster. The only course teacher was most of the time unavailable to answer questions. Having no one around I could relate to when I was overwhelmed and frustrated was discouraging and one of the reasons why I initially gave up.

Nowadays, more and more e-learning platforms realize the importance of a thriving community.

If you are looking for an inclusive and welcoming community for aspiring junior developer I recommend the Scrimba community. Alternatively, look around!

Here are what I think make a supportive community that help you avoid burnout:

Members spread positivity and are recognized for their engagement
Teachers and community managers are available to answer your questions
Feedback from members is well-received and valued
Events are organized (for example, coding challenges or giveaways)
Spam and aggressive behaviors are kept at bay
Local, offline meet-ups are organised when possible

Also, reach out to your developer friends or acquaintances - there is a high chance that you know at least a couple - and ask them questions!

You will notice that the developer community is very open and willing to help people that are starting out

Joining local and online communities will make the journey to become a developer and land a job much more enjoyable!

5. Lack of an online coding presence and a portfolio

Another common mistake beginner developers make is keeping their awesome projects on their computers, and once they are ready to apply for jobs, they realize that they have nothing to show.

You have spent hours building a wonderful website, a shining Chrome extension or a JavaScript Pomodoro timer. Why on Earth wouldn't you share it with others?

This way, people - including your next employer - can see you have been actively learning, building, and sharing with others.

There are several ways to do that:

Upload your projects on GitHub and keep them up-to-date.
Share your progress on a YouTube channel or your blog.
Have a portfolio website - you can learn how to build one with this free Scrimba course.

The verdict

Becoming a self-taught developer is a windy journey, and it is common to struggle and feel overwhelmed.

Setting up a clear purpose or goal and shifting your learning mindset is essential to overcoming these challenges. No matter where in the journey you are, you will always face self-doubt and encounter issues: in this regard, joining a local or online community of developers will make you feel comfortable and less lonely.

Finally, show off your hard work and share your projects with the world. Motivation and persistence will be your two best companions.

Forem: La Doppia Esse

How to use the spread operator (...) in React

Introduction

What is the spread operator?

Examples of the Spread Operator

Creating shallow copies of arrays

Concatenating arrays

Adding elements to an object

Spreading an array to function arguments

How to use the spread operator to spread props in a React component

1. Declaring the props one by one ⏰

2. Using the spread syntax to pass the whole props object in one easy go! ⚡

Pros and cons of using the spread syntax to spread props

The Verdict

Demystifying Linked Lists in JavaScript

What are linked lists?

The difference between linked lists and arrays

Common uses of linked lists

Is a blockchain a linked list?

An introduction to React component props

What is a React component?

Writing JSX

Props in action - let’s create a contact component

Receiving props in a component

Prop quiz!

1. What do props help us accomplish?

2. How do you pass a prop into a component?

3. Can I pass a custom prop (e.g. blahblahblah={true}) to a native HTML element (e.g. <div blahblahblah={true}>)? Why or why not?

4. How do I receive props in a component?

5. What data type is props when the component receives it?

Destructuring props

Passing in non-string props

The verdict

5 reasons most self-taught web developers burnout and quit

1. Lack of purpose

2. Self-doubt

3. Not thinking like a programmer

Don't memorize or copy-paste code.

Breaking down complex problems

4. Lack of support and community feeling

5. Lack of an online coding presence and a portfolio

The verdict

3. Can I pass a custom prop (e.g. `blahblahblah={true}`) to a native HTML element (e.g. `<div blahblahblah={true}>`)? Why or why not?