2.5: interpolation

Good React developers are all about writing streamlined code. There is a tendency to do all JSX(HTML), CSS, and JavaScript in the same file. Being streamlined using arrow functions is common, and knowing string interpolation is important as well, especially when writing JSX code. Let's just review a little before forging ahead.

Tools needed for the job:

1. `

2. $

3. {yourvariable}

Here are some examples:

const username = 'Kenn';

console.log(`${username} is the true JS Wizard!`);

Here's another examle. This is called a template literals - which breaks things into more than one line, and it's handy with HTML.

console.log(`Hey students,
What bugs can
${username}
fix 
for you today`);

It's very common to see interpolation with an object in React. Check it out:

const person = {
    username: 'Kenn',
    profession: 'Secret Agent'
}

console.log(`${person.username}, ${person.profession}`, 'extraordinaire'); //Kenn, Secret Agent, Extraordinaire

Get some practice with interpolation. You will see it a lot in weeks to come.