Tom Occhino (2015)  ](https://www.youtube.com/watch?v=KVZ-P-ZI6W4)

[ ](https://www.youtube.com/watch?v=V-QO-KO90iQ) ### [ Introducing React Hooks
Sophie Alpert and Dan Abramov (2018)  ](https://www.youtube.com/watch?v=V-QO-
KO90iQ)

[ ](https://www.youtube.com/watch?v=TQQPAU21ZUw) ### [ Introducing Server
Components  Dan Abramov and Lauren Tan (2020)
](https://www.youtube.com/watch?v=TQQPAU21ZUw)

You don’t have to build your whole page in React. Add React to your existing
HTML page, and render interactive React components anywhere on it.

[ Add React to your page  ](/learn/add-react-to-an-existing-project)

##  Go full-stack  
with a framework

React is a library. It lets you put components together, but it doesn’t
prescribe how to do routing and data fetching. To build an entire app with
React, we recommend a full-stack React framework like [ Next.js
](https://nextjs.org) or  [ Remix ](https://remix.run) .

###  confs/[slug].js

    
    
    import { db } from './database.js';  
    
    
    import { Suspense } from 'react';  
    
    
      
    
    
    async function ConferencePage({ slug }) {  
    
    
      const conf = await db.Confs.find({ slug });  
    
    
      return (  
    
    
        <ConferenceLayout conf={conf}>  
    
    
          <Suspense fallback={<TalksLoading />}>  
    
    
            <Talks confId={conf.id} />  
    
    
          </Suspense>  
    
    
        </ConferenceLayout>  
    
    
      );  
    
    
    }  
    
    
      
    
    
    async function Talks({ confId }) {  
    
    
      const talks = await db.Talks.findAll({ confId });  
    
    
      const videos = talks.map(talk => talk.video);  
    
    
      return <SearchableVideoList videos={videos} />;  
    
    
    }

example.com  /  confs/react-conf-2021

React Conf 2021  React Conf 2019

![](/images/home/conf2021/cover.svg)

Search

##  19 Videos

[ ![](/images/home/conf2021/andrew.jpg) ![](/images/home/conf2021/lauren.jpg)
![](/images/home/conf2021/juan.jpg) ![](/images/home/conf2021/rick.jpg) React
Conf
](https://www.youtube.com/watch?v=FZ0cG47msEk&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=1)
### [ React 18 Keynote  The React Team
](https://www.youtube.com/watch?v=FZ0cG47msEk&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=1)

[ ![](/images/home/conf2021/shruti.jpg) React Conf
](https://www.youtube.com/watch?v=ytudH8je5ko&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=2)
### [ React 18 for App Developers  Shruti Kapoor
](https://www.youtube.com/watch?v=ytudH8je5ko&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=2)

[ ![](/images/home/conf2021/shaundai.jpg) React Conf
](https://www.youtube.com/watch?v=pj5N-Khihgc&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=3)
### [ Streaming Server Rendering with Suspense  Shaundai Person
](https://www.youtube.com/watch?v=pj5N-Khihgc&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=3)

[ ![](/images/home/conf2021/aakansha.jpg) React Conf
](https://www.youtube.com/watch?v=qn7gRClrC9U&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=4)
### [ The First React Working Group  Aakansha Doshi
](https://www.youtube.com/watch?v=qn7gRClrC9U&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=4)

[ ![](/images/home/conf2021/brian.jpg) React Conf
](https://www.youtube.com/watch?v=oxDfrke8rZg&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=5)
### [ React Developer Tooling  Brian Vaughn
](https://www.youtube.com/watch?v=oxDfrke8rZg&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=5)

[ ![](/images/home/conf2021/xuan.jpg) React Conf
](https://www.youtube.com/watch?v=lGEMwh32soc&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=6)
### [ React without memo  Xuan Huang (黄玄)
](https://www.youtube.com/watch?v=lGEMwh32soc&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=6)

[ ![](/images/home/conf2021/rachel.jpg) React Conf
](https://www.youtube.com/watch?v=mneDaMYOKP8&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=7)
### [ React Docs Keynote  Rachel Nabors
](https://www.youtube.com/watch?v=mneDaMYOKP8&list=PLNG_