Day 3 of React — As a Beginner

Things I’ve learned on day 3…

Photo by Dell on Unsplash

Things I’ve Accomplished Today:

1. Continued my practice on Components.
2. Learned and practiced about Props.

Continued My Practice On Components

Important Things About Components:

• You can pass/assign variables to an image tag using curly braces. However, if you want to pass an object you must you double curly braces like👇

// For passing variables as attributes... ( use single curly braces { ... } )
const name = "Sriniketh";
<p>{name}</p>

// For passing objects...( use double curly braces {{ ... }} )
<p style={{
 backgroundColor: 'red';
 color: 'white';
}}> This is a Text... </p>

• Note that I’ve used camelCase for the “background-color” property.
• Here’s the complete code so you can understand it better.

export default function Avatar() {
  const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
  const description = 'Gregorio Y. Zara';
  return (
    <img
      className="avatar" // String
      src={avatar} // JS Logics and Variables
      alt={description} // JS Logics and Variables
    />
  );
}

• JSX attributes inside quotes are passed as strings.
• Curly braces let you bring JavaScript logic and variables into your markup.
• They work inside the JSX tag content or immediately after = in attributes.
• {{ and }} is not special syntax: it’s a JavaScript object tucked inside JSX curly braces.

Props (shorter form for Properties)

• React uses a camelCase convention for prop names. For example, you’ll write tabIndex instead of tabindex.
• Here are the snapshots of those codes I’ve created using React.

Name Component — For rendering “Names” of the persons which I’ve stored in an array as you’ll see afterwards.

Name Component

Modal Component — For rendering “modal-like” component.

Modal Component

App Component — Main Component used for rendering the Modal Component which itself renders the Name Component.

One more thing to note is that I’ve also have wrote “CSS” files for Modal, Name, and App Components as well. It’s not that big of a deal so that’s why I’ve not included them here…

App Component

Here’s the output of everything that I’ve coded:

Final Output of My React Application

There you have it. This is what I’ve accomplished today with React. I am really making progress you know!

I hope you find this blog helpful. If you liked it, then feel free to “clap” this blog and “comment” what you’ve liked in this blog by using the “highlighting” feature.

Thanks for keeping your eyeballs on this blog so far!

I’ll publish my progress in learning TypeScript on Day 2 tomorrow so stay tuned!

Byee…🤗👋