Learn

JSX elements can have attributes, just like HTML elements can.

A JSX attribute is written using HTML-like syntax: a name, followed by an equals sign, followed by a value. The value should be wrapped in quotes, like this:

my-attribute-name="my-attribute-value"

Here are some JSX elements with attributes:

<a href='http://www.example.com'>Welcome to the Web</a>;

const title = <h1 id='title'>Introduction to React.js: Part I</h1>;

A single JSX element can have many attributes, just like in HTML:

const panda = <img src='images/panda.jpg' alt='panda' width='500px' height='500px' />;

Instructions

1.

Declare a constant named p1.

Set p1 equal to a JSX <p></p> element. Write the word foo in between the <p></p> tags.

2.

On the next line, declare a constant named p2.

Set p2 equal to another JSX <p></p> element. Write the word bar in between the <p></p> tags.

3.

Give the first <p></p> an id attribute of 'large'.

Give the second <p></p> an id attribute of 'small'.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Already have an account?