Describing the UI – ReactSupport Ukraine 🇺🇦🇺🇦 Help Provide Humanitarian Aid to Ukraine.ReactSearch⌘CtrlKLearnReferenceCommunityBlogGET STARTEDQuick StartTutorial: Tic-Tac-ToeThinking in ReactInstallationStart a New React ProjectAdd React to an Existing ProjectEditor SetupReact Developer ToolsLEARN REACTDescribing the UIYour First ComponentImporting and Exporting ComponentsWriting Markup with JSXJavaScript in JSX with Curly BracesPassing Props to a ComponentConditional RenderingRendering ListsKeeping Components PureAdding InteractivityResponding to EventsState: A Component's MemoryRender and CommitState as a SnapshotQueueing a Series of State UpdatesUpdating Objects in StateUpdating Arrays in StateManaging StateReacting to Input with StateChoosing the State StructureSharing State Between ComponentsPreserving and Resetting StateExtracting State Logic into a ReducerPassing Data Deeply with ContextScaling Up with Reducer and ContextEscape HatchesReferencing Values with RefsManipulating the DOM with RefsSynchronizing with EffectsYou Might Not Need an EffectLifecycle of Reactive EffectsSeparating Events from EffectsRemoving Effect DependenciesReusing Logic with Custom HooksIs this page useful?Learn ReactDescribing the UIReact is a JavaScript library for rendering user interfaces (UI). UI is built from small units like buttons, text, and images. React lets you combine them into reusable, nestable components. From web sites to phone apps, everything on the screen can be broken down into components. In this chapter, you’ll learn to create, customize, and conditionally display React components.
In this chapter
How to write your first React component
When and how to create multi-component files
How to add markup to JavaScript with JSX
How to use curly braces with JSX to access JavaScript functionality from your components
How to configure components with props
How to conditionally render components
How to render multiple components at a time
How to avoid confusing bugs by keeping components pure
Your first component
React applications are built from isolated pieces of UI called components. A React component is a JavaScript function that you can sprinkle with markup. Components can be as small as a button, or as large as an entire page. Here is a Gallery component rendering three Profile components:
App.jsApp.js ResetForkfunction Profile() {
return (
<img
src="https://i.imgur.com/MK3eW3As.jpg"
alt="Katherine Johnson"
/>
);
export default function Gallery() {
return (
<section>
<h1>Amazing scientists</h1>
<Profile />
<Profile />
<Profile />
</section>
);
Show more
Ready to learn this topic?Read Your First Component to learn how to declare and use React components.Read More
Importing and exporting components
You can declare many components in one file, but large files can get difficult to navigate. To solve this, you can export a component into its own file, and then import that component from another file:
Gallery.jsProfile.jsGallery.js ResetForkimport Profile from './Profile.js';
export default function Gallery() {
return (
<section>
<h1>Amazing scientists</h1>
<Profile />
<Profile />
<Profile />
</section>
);
Ready to learn this topic?Read Importing and Exporting Components to learn how to split components into their own files.Read More
Writing markup with JSX
Each React component is a JavaScript function that may contain some markup that React renders into the browser. 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.jsApp.js ResetForkexport 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:
App.jsApp.js ResetForkexport 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 to learn how to write valid JSX.Read More
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.jsApp.js ResetForkconst 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 to learn how to access JavaScript data from JSX.Read More
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.jsutils.jsApp.js ResetForkimport { getImageUrl } from './utils.js'
export default function Profile() {
return (
<Card>
<Avatar
size={100}
person={{
name: 'Katsuko Saruhashi',
imageId: 'YfeOqp2'
}}
/>
</Card>
);
function Avatar({ person, size }) {
return (
<img
className="avatar"
src={getImageUrl(person)}
alt={person.name}
width={size}
height={size}
/>
);
function Card({ children }) {
return (
<div className="card">
{children}
</div>
);
Show more
Ready to learn this topic?Read Passing Props to a Component to learn how to pass and read props.Read More
Conditional rendering
Your components will often need to display different things depending on different conditions. In React, you can conditionally render JSX using JavaScript syntax like if statements, &&, and ? : operators.
In this example, the JavaScript && operator is used to conditionally render a checkmark:
App.jsApp.js ResetForkfunction Item({ name, isPacked }) {
return (
<li className="item">
{name} {isPacked && '✔'}
</li>
);
export default function PackingList() {
return (
<section>
<h1>Sally Ride's Packing List</h1>
<ul>
<Item
isPacked={true}
name="Space suit"
/>
<Item
isPacked={true}
name="Helmet with a golden leaf"
/>
<Item
isPacked={false}
name="Photo of Tam"
/>
</ul>
</section>
);
Show more
Ready to learn this topic?Read Conditional Rendering to learn the different ways to render content conditionally.Read More
Rendering lists
You will often want to display multiple similar components from a collection of data. You can use JavaScript’s filter() and map() with React to filter and transform your array of data into an array of components.
For each array item, you will need to specify a key. Usually, you will want to use an ID from the database as a key. Keys let React keep track of each item’s place in the list even if the list changes.
App.jsdata.jsutils.jsApp.js ResetForkimport { people } from './data.js';
import { getImageUrl } from './utils.js';
export default function List() {
const listItems = people.map(person =>
<li key={person.id}>
<img
src={getImageUrl(person)}
alt={person.name}
/>
<p>
<b>{person.name}:</b>
{' ' + person.profession + ' '}
known for {person.accomplishment}
</p>
</li>
);
return (
<article>
<h1>Scientists</h1>
<ul>{listItems}</ul>
</article>
);
Show more
Ready to learn this topic?Read Rendering Lists to learn how to render a list of components, and how to choose a key.Read More
Keeping components pure
Some JavaScript functions are pure. A pure function:
Minds its own business. It does not change any objects or variables that existed before it was called.
Same inputs, same output. Given the same inputs, a pure function should always return the same result.
By strictly only writing your components as pure functions, you can avoid an entire class of baffling bugs and unpredictable behavior as your codebase grows. Here is an example of an impure component:
App.jsApp.js ResetForklet guest = 0;
function Cup() {
// Bad: changing a preexisting variable!
guest = guest + 1;
return <h2>Tea cup for guest #{guest}</h2>;
export default function TeaSet() {
return (
<>
<Cup />
<Cup />
<Cup />
</>
);
Show more
You can make this component pure by passing a prop instead of modifying a preexisting variable:
App.jsApp.js ResetForkfunction Cup({ guest }) {
return <h2>Tea cup for guest #{guest}</h2>;
export default function TeaSet() {
return (
<>
<Cup guest={1} />
<Cup guest={2} />
<Cup guest={3} />
</>
);
Ready to learn this topic?Read Keeping Components Pure to learn how to write components as pure, predictable functions.Read More
What’s next?
Head over to Your First Component to start reading this chapter page by page!
Or, if you’re already familiar with these topics, why not read about Adding Interactivity?NextYour First ComponentHow do you like these docs?Take our survey!©2023Learn ReactQuick StartInstallationDescribing the UIAdding InteractivityManaging StateEscape HatchesAPI ReferenceReact APIsReact DOM APIsCommunityCode of ConductMeet the TeamDocs ContributorsAcknowledgementsMoreBlogReact NativePrivacyTermsOn this pageOverviewYour first component Importing and exporting components Writing markup with JSX JavaScript in JSX with curly braces Passing props to a component Conditional rendering Rendering lists Keeping components pure What’s next?