01-jsx

Step 1 - JSX

JSX is syntactic sugar for the plain JavaScript function React.createElement(). React elements are the smallest building blocks of React apps that describe what you want to see on the screen.

Unlike browser DOM elements, React elements are plain objects, and are cheap to create. ReactDOM takes care of updating the DOM to match the React elements.

🏅 The goal of this step is to practice with JSX.

NOTE: One might confuse elements with a more widely known concept of "components." We will look closer at creating and composing components in the Step 6. Elements are what components are "made of."

If you run into trouble with the tasks or exercises, you can take a peek at the final source code.

🐇 Jump Around

Concepts | Tasks | Exercises | Elaboration & Feedback | Resources

⭐ Concepts

• Rendering elements with JSX
• Handling special element attribute names
• Adding inline styles

📝 Tasks

In src/workshop/App.js, replace null with JSX markup. For example:

const App = () => {
  return <main>Giphy Search!</main>
}

You will need to import React in order use JSX.

import React from 'react'

const App = () => {
  return <main>Giphy Search!</main>
}

export default App

Add nested JSX markup. For example:

const App = () => {
  return (
    <main>
      <h1>Giphy Search!</h1>
      <p>This is a paragraph of text written in React</p>
    </main>
  )
}

Add attributes to the nested JSX markup. For example:

const App = () => {
  return (
    <main>
      <h1>Giphy Search!</h1>
      <p>This is a paragraph of text written in React</p>
      <aside>
        <input type="text" id="input" placeholder="Fill me in please" />
      </aside>
    </main>
  )
}

Try adding classes to JSX markup, or a <label> to connect inputs:

const App = () => {
  return (
    <main>
      <h1>Giphy Search!</h1>
      <p className="text-center">
        This is a paragraph of text written in React
      </p>
      <label htmlFor="input">
        Input label
        <input type="text" id="input" placeholder="Fill me in please" />
      </label>
    </main>
  )
}

There is a slightly different syntax to pass variables to props:

const App = () => {
  const contents = 'This is a paragraph of text written in React'
  const inputId = 'input'
  const numItems = 3

  return (
    <main>
      <h1>Giphy Search!</h1>
      <p className="text-center">{contents}</p>
      <label htmlFor={inputId}>
        Input label
        <input
          type="text"
          id={inputId}
          placeholder={`Search ${numItems} items`}
        />
      </label>
    </main>
  )
}

Lastly, add inline styles to some elements by passing an object to the style prop:

const App = () => {
  return (
    <main>
      <h1 style={{ fontSize: '5em' }}>Giphy Search!</h1>
      <p className="text-center" style={{ backgroundColor: 'lightgrey' }}>
        This is a paragraph of text written in React
      </p>
      <label htmlFor="input">
        Input label
        <input
          type="text"
          id="input"
          placeholder="Fill me in please"
          style={{ color: 'darkblue', marginTop: 30 }}
        />
      </label>
    </main>
  )
}

💡 Exercises

• Create two const variables, GIPHY_SRC (this url) and GIPHY_LINK (this url)
  • Render an image with its src as GIPHY_SRC
  • Link the image to its page using GIPHY_LINK and open a new window
• 🤓 BONUS: Render a <p>
  • Create

    const attrs = {
      id: 'main-text',
      className: 'text-center',
      style: { color: 'blue' },
      children: 'Hello',
    }

  • Add everything in attrs to the <p> without adding them individually
• Remove all the practice JSX, leaving the skeleton of our Giphy search app:

  const App = () => {
    return (
      <main>
        <h1>Giphy Search!</h1>
      </main>
    )
  }

🧠 Elaboration & Feedback

After you're done with the exercise and before jumping to the next step, please fill out the elaboration & feedback form. It will help seal in what you've learned.

👉🏾 Next Step

Go to Step 2 - Query Field.

📕 Resources

• Rendering Elements
• Introducing JSX
• JSX in Depth
• React without JSX
• Babel REPL
• Inline Styles

❓ Questions

Got questions? Need further clarification? Feel free to post a question in Ben Ilegbodu's AMA!