* [ You Might Not Need an Effect  ](/learn/you-might-not-need-an-effect "You Might Not Need an Effect")
    * [ Lifecycle of Reactive Effects  ](/learn/lifecycle-of-reactive-effects "Lifecycle of Reactive Effects")
    * [ Separating Events from Effects  ](/learn/separating-events-from-effects "Separating Events from Effects")
    * [ Removing Effect Dependencies  ](/learn/removing-effect-dependencies "Removing Effect Dependencies")
    * [ Reusing Logic with Custom Hooks  ](/learn/reusing-logic-with-custom-hooks "Reusing Logic with Custom Hooks")

Is this page useful?

[ Learn React ](/learn)

#  Describing the UI

React 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 ](/learn/your-first-component)
  * [ When and how to create multi-component files ](/learn/importing-and-exporting-components)
  * [ How to add markup to JavaScript with JSX ](/learn/writing-markup-with-jsx)
  * [ How to use curly braces with JSX to access JavaScript functionality from your components ](/learn/javascript-in-jsx-with-curly-braces)
  * [ How to configure components with props ](/learn/passing-props-to-a-component)
  * [ How to conditionally render components ](/learn/conditional-rendering)
  * [ How to render multiple components at a time ](/learn/rendering-lists)
  * [ How to avoid confusing bugs by keeping components pure ](/learn/keeping-components-pure)
  * [ Why understanding your UI as trees is useful ](/learn/understanding-your-ui-as-a-tree)

##  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.js

App.js

Reset  [ Fork
](https://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-
react-app "Open in CodeSandbox")

    
    
    function 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 ](/learn/your-first-component) ** to learn how
to declare and use React components.

[ Read More  ](/learn/your-first-component)

* * *

##  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.js  Profile.js

Gallery.js

Reset  [ Fork
](https://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-
react-app "Open in CodeSandbox")

    
    
    import 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 ](/learn/importing-and-exporting-
components) ** to learn how to split components into their own files.

[ Read More  ](/learn/importing-and-exporting-components)

* * *

##  Writing markup with JSX

Each React component is a JavaScript function that may contain some markup
that React renders into the brow