ser. React components use a syntax extension
called JSX to represent that markup. JSX looks a lot like HTML, but it is a
bit stricter and can display dynamic information.

If we paste existing HTML markup into a React component, it won’t always work:

App.js

App.js

Reset  [ Fork
](https://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-
react-app "Open in CodeSandbox")

    
    
    export default function TodoList() {
      return (
        // This doesn't quite work!
        <h1>Hedy Lamarr's Todos</h1>
        <img
          src="https://i.imgur.com/yXOvdOSs.jpg"
          alt="Hedy Lamarr"
          class="photo"
        >
        <ul>
          <li>Invent new traffic lights
          <li>Rehearse a movie scene
          <li>Improve spectrum technology
        </ul>
    
    

Show more

If you have existing HTML like this, you can fix it using a [ converter
](https://transform.tools/html-to-jsx) :

App.js

App.js

Reset  [ Fork
](https://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-
react-app "Open in CodeSandbox")

    
    
    export default function TodoList() {
      return (
        <>
          <h1>Hedy Lamarr's Todos</h1>
          <img
            src="https://i.imgur.com/yXOvdOSs.jpg"
            alt="Hedy Lamarr"
            className="photo"
          />
          <ul>
            <li>Invent new traffic lights</li>
            <li>Rehearse a movie scene</li>
            <li>Improve spectrum technology</li>
          </ul>
        </>
      );
    }
    
    

Show more

##  Ready to learn this topic?

Read **[ Writing Markup with JSX ](/learn/writing-markup-with-jsx) ** to learn
how to write valid JSX.

[ Read More  ](/learn/writing-markup-with-jsx)

* * *

##  JavaScript in JSX with curly braces

JSX lets you write HTML-like markup inside a JavaScript file, keeping
rendering logic and content in the same place. Sometimes you will want to add
a little JavaScript logic or reference a dynamic property inside that markup.
In this situation, you can use curly braces in your JSX to “open a window” to
JavaScript:

App.js

App.js

Reset  [ Fork
](https://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-
react-app "Open in CodeSandbox")

    
    
    const person = {
      name: 'Gregorio Y. Zara',
      theme: {
        backgroundColor: 'black',
        color: 'pink'
      }
    };
    
    export default function TodoList() {
      return (
        <div style={person.theme}>
          <h1>{person.name}'s Todos</h1>
          <img
            className="avatar"
            src="https://i.imgur.com/7vQD0fPs.jpg"
            alt="Gregorio Y. Zara"
          />
          <ul>
            <li>Improve the videophone</li>
            <li>Prepare aeronautics lectures</li>
            <li>Work on the alcohol-fuelled engine</li>
          </ul>
        </div>
      );
    }
    
    

Show more

##  Ready to learn this topic?

Read **[ JavaScript in JSX with Curly Braces ](/learn/javascript-in-jsx-with-
curly-braces) ** to learn how to access JavaScript data from JSX.

[ Read More  ](/learn/javascript-in-jsx-with-curly-braces)

* * *

##  Passing props to a component

React components use _props_ to communicate with each other. Every parent
component can pass some information to its child components by giving them
props. Props might remind you of HTML attributes, but you can pass any
JavaScript value through them, including objects, arrays, functions, and even
JSX!

App.js  utils.js

App.js

Reset  [ Fork
](https://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-
react-app "Open in CodeSandbox")

    
    
    import { getImageUrl } from './utils.js'
    
    export default function Profile() {
      return (
        <Card>
          <Avatar
            size={100}
            person={{
              name: 'Katsuko Saruhashi',
              imageId: 'YfeOqp2'
            }}
          />
        </Card>
      );
    }
    
    function Avatar(