What Did I Just Make

export default () => <div>It's working!</div>

The one line of code you added to the index.js file represents the main function of your application.

  • export means a different file could load index.js and use this function.
  • default means this is the "main" function to use when loaded.
  • <div></div> are HTML tags (technically called "JSX" when written inside of JavaScript). These mark where elements start and end.
  • It's working this is text inside of the tags.

Create a Component

At the top of index.js, create a Hello component using the following code:

const Hello = () => <div>Hi there!</div>

Use the Hello Component in Your Main Component

Replace it's working with an instance of your component:

export default () => <div><Hello/></div>

Your entire index.js file should now look like the following:

const Hello = () => <div>Hi there!</div>

export default () => <div><Hello/></div>

Say Hello to Yourself

Components receive props that you display inside the Component.

The name="John" below:

<Hello name="John"/>

Is passed into the Hello component as props. Then you display the name using {props.name}:

const Hello = props => <div>Hi {props.name}!</div>

index.js should now look like the following:

const Hello = props => <div>Hi {props.name}!</div>

export default () => <div><Hello name="John"/></div>

Your webpage at http://localhost:3000 should now display:

Hi John!

results matching ""

    No results matching ""