Join us for React Conf on May 15-16.

[ Learn more. ](https://conf.react.dev/)

[ React  ](/)

Search  ` ⌘ ` ` Ctrl ` ` K `

[ Learn ](/learn)

[ Reference ](/reference/react)

[ Community ](/community)

[ Blog ](/blog)

[ ](https://github.com/facebook/react/releases)

#  React

The library for web and native user interfaces

[ Learn React ](/learn) [ API Reference ](/reference/react)

##  Create user interfaces from components

React lets you build user interfaces out of individual pieces called
components. Create your own React components like  ` Thumbnail ` , `
LikeButton ` , and  ` Video ` . Then combine them into entire screens, pages,
and apps.

###  Video.js

    
    
    function Video({ video }) {  
    
    
      return (  
    
    
        <div>  
    
    
          <Thumbnail video={video} />  
    
    
          <a href={video.url}>  
    
    
            <h3>{video.title}</h3>  
    
    
            <p>{video.description}</p>  
    
    
          </a>  
    
    
          <LikeButton video={video} />  
    
    
        </div>  
    
    
      );  
    
    
    }

My video  Video description

Whether you work on your own or with thousands of other developers, using
React feels the same. It is designed to let you seamlessly combine components
written by independent people, teams, and organizations.

##  Write components with code and markup

React components are JavaScript functions. Want to show some content
conditionally? Use an ` if ` statement. Displaying a list? Try array ` map() `
. Learning React is learning programming.

###  VideoList.js

    
    
    function VideoList({ videos, emptyHeading }) {  
    
    
      const count = videos.length;  
    
    
      let heading = emptyHeading;  
    
    
      if (count > 0) {  
    
    
        const noun = count > 1 ? 'Videos' : 'Video';  
    
    
        heading = count + ' ' + noun;  
    
    
      }  
    
    
      return (  
    
    
        <section>  
    
    
          <h2>{heading}</h2>  
    
    
          {videos.map(video =>  
    
    
            <Video key={video.id} video={video} />  
    
    
          )}  
    
    
        </section>  
    
    
      );  
    
    
    }

##  3 Videos

First video  Video description

Second video  Video description

Third video  Video description

This markup syntax is called JSX. It is a JavaScript syntax extension
popularized by React. Putting JSX markup close to related rendering logic
makes React components easy to create, maintain, and delete.

##  Add interactivity wherever you need it

React components receive data and return what should appear on the screen. You
can pass them new data in response to an interaction, like when the user types
into an input. React will then update the screen to match the new data.

###  SearchableVideoList.js

    
    
    import { useState } from 'react';  
    
    
      
    
    
    function SearchableVideoList({ videos }) {  
    
    
      const [searchText, setSearchText] = useState('');  
    
    
      const foundVideos = filterVideos(videos, searchText);  
    
    
      return (  
    
    
        <>  
    
    
          <SearchInput  
    
    
            value={searchText}  
    
    
            onChange={newText => setSearchText(newText)} />  
    
    
          <VideoList  
    
    
            videos={foundVideos}  
    
    
            emptyHeading={`No matches for “${searchText}”`} />  
    
    
        </>  
    
    
      );  
    
    
    }

example.com  /  videos.html

#  React Videos

A brief history of React

Search

##  5 Videos

[ ](https://www.youtube.com/watch?v=8pDqJVdNa44) ### [ React: The Documentary
The origin story of React  ](https://www.youtube.com/watch?v=8pDqJVdNa44)

[ ](https://www.youtube.com/watch?v=x7cQ3mrcKaY) ### [ Rethinking Best
Practices  Pete Hunt (2013)  ](https://www.youtube.com/watch?v=x7cQ3mrcKaY)

[ ](https://www.youtube.com/watch?v=KVZ-P-ZI6W4) ### [ Introducing React
Native