React Quick Start Guide

In this quickstart, we will show you how to get started with SQLite Cloud and React by building a simple application that connects to and reads from a SQLite Cloud database.


  1. Set up a SQLite Cloud account
    • If you haven’t already, sign up for a SQLite Cloud account and create a new database.
    • In this guide, we will use the sample datasets that come pre-loaded with SQLite Cloud.
  2. Create a React app
    • Create a React app using a Vite template
npm create vite@latest sqlc-quickstart -- --template react
  1. Install the SQLite Cloud SDK
cd sqlc-quickstart && npm install @sqlitecloud/drivers
  1. Query data
    • Grab a connection string by clicking on a node in your dashboard.
    • Use the following code to display data from your database.
import { useEffect, useState } from "react";
import { Database } from '@sqlitecloud/drivers';

const db = new Database('<your-connection-string>');

function App() {
const [data, setData] = useState([]);

const getAlbums = async () => {
  const result = await db.sql`
  USE DATABASE chinook.sqlite; 
  SELECT albums.AlbumId as id, albums.Title as title, artists.name as artist
  FROM albums 
  INNER JOIN artists 
  WHERE artists.ArtistId = albums.ArtistId
  LIMIT 20;`;
  setData(result);
};

useEffect(() => {
  getAlbums();
}, []);

return (
  <div>
    <h1>Albums</h1>
    <ul>
      {data.map((album) => (
        <li key={album.id}>{album.title} by {album.artist}</li>
      ))}
    </ul>
  </div>
);
}

export default App
  1. Run your app
npm run dev
  1. View your app
    • Open your browser and navigate to the localhost link provided by the previous command to see your app data.

And that’s it! You’ve successfully built a React app that reads data from a SQLite Cloud database.