Key React Concepts for the Emoji Search App

This lesson reviews key React concepts needed for the implementation.

Components

In React, a component is a reusable piece of UI. We will create React function components for our app. The main component is App, and we will also create an EmojiCard component for displaying each emoji. Each component returns JSX (React’s syntax) describing its UI. Components can maintain their own state (with hooks like useState) and handle events.

We will nest components: App will contain many EmojiCard instances. This makes our code modular and clear.

State and Hooks

React uses hooks (like useState and useEffect) in function components to manage data. For example, we will use useState to keep track of the search text (searchTerm) and the list of emojis (emojis). Updating this state will automatically re-render the UI.

We’ll also use useEffect to fetch emoji data from the API when the app loads (as a side effect). In short, state lets React remember values between renders, and hooks are functions that give us this and other React features.

React’s declarative model (JSX + state) makes it straightforward: you define what the UI should look like for a given state, and React handles the rendering efficiently.

Fetch API

To retrieve emoji data, we will use the browser’s Fetch API, a modern interface for making HTTP requests. The Fetch API “provides an interface for fetching resources (including across the network)”.

We will call fetch(url) (or use axios as an alternative) inside a useEffect hook to asynchronously load emoji data. The fetch call returns a Promise; when it resolves, we parse the JSON and update our React state with the emoji list. This is how our app gets data from the public emoji API.