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.
React components let you split the UI into independent, reusable pieces, and think about each piece in isolation. Components can refer to other components in their output. This lets us use the same component abstraction for any level of detail. A button, a form, a dialog, a screen, etc. In React apps, all of these are commonly expressed as components.
Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called "props") and return React elements describing what should appear on the screen.
🏅 The goal of this step is to practice with JSX and creating components.
- Rendering elements with JSX
- Handling special element attribute names
- Adding inline styles
- Creating and composing React components
- Configuring components via passing props
In App.js, convert the HTML markup for a Giphy search result to JSX and render within the App component.
Reminder: The style attribute in JSX takes an object.
(If at any point you get stuck, you can take a peek at the answers)
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.
Within the App component, extract variables for the data fields and use them within the JSX:
const App = () => {
const title = "I'm Ready Lets Go GIF by Leroy Patterson"
const url =
'https://giphy.com/gifs/leroypatterson-cat-glasses-CjmvTCZf2U3p09Cn0h'
const previewUrl =
'https://media2.giphy.com/media/CjmvTCZf2U3p09Cn0h/giphy-preview.mp4?cid=376dcdd944vhe2rsqwiiqnrfkuh6v7qw9cuermk7bsxburuv&rid=giphy-preview.mp4'
const rating = 'G'
return (
<main>
<h1>Giphy Search!</h1>
{}
</main>
)
}Extract the JSX markup for the Giphy search result card into a Result component and pass the variables as props to <Result />.
- Rendering Elements
- Introducing JSX
- JSX in Depth
- JSX Tips and Gotchas for Beginners
- Components and Props
- Typechecking with PropTypes
- Custom Prop Types
- React without JSX
- Babel REPL
- Inline Styles
Go to Step 2 - State.