nhost/docs/getting-started/quickstart/react.mdx

---
title: Get up and running with Nhost and React
sidebarTitle: React
description: Get up and running with Nhost and React
icon: react
---

<Steps>
  <Step title="Create Nhost Project">
    Create your project through the [Nhost Dashboard](https://app.nhost.io).
  </Step>

  <Step title="Setup Database">
    Navigate to the **SQL Editor** of the database and run the following SQL to create a new table `todos`.

    <Warning>Make sure the option `Track this` is enabled</Warning>

    ```sql SQL Editor
    CREATE TABLE todos (
      id uuid NOT NULL DEFAULT gen_random_uuid(),
      created_at timestamptz NOT NULL DEFAULT now(),
      updated_at timestamptz NOT NULL DEFAULT now(),
      user_id uuid NOT NULL,
      contents text NOT NULL,
      PRIMARY KEY (id),
      FOREIGN KEY (user_id) REFERENCES auth.users(id) ON UPDATE cascade ON DELETE cascade
    );
    ```

    ![Create Todos Table](/images/quickstarts/react-native/create-table-todos.png)

  </Step>

  <Step title="Configure the todos table permissions">
    To set permissions for the new `todos` table, select the table, click on the `...` to open the actions dialog,
    then click on **Edit Permissions**. Set the following permissions for the `user` role:

    1. `Insert`
        - Set `Row insert permissions` to `Without any checks`
        - Select all columns except `user_id` on `Column insert permissions`
        - Add a new `Column preset` and set `Column Name` to `user_id` and `Column Value` to `X-Hasura-User-Id`
        - Save

    ![Insert Permissions](/images/quickstarts/react-native/todos-insert-permissions.png)

    2. `Select`
        - Set `Row select permissions` to `With custom check` and fill in the following rule:
            - Set `Where` to `todos.user_id`
            - Set the operator to `_eq`
            - Set the value to `X-Hasura-User-Id`
        - Select all columns except `user_id` on `Column select permissions`
        - Save

    ![Select Permissions](/images/quickstarts/react-native/todos-select-permissions.png)

    3. `Update`
        - Set `Row update permissions` to `With custom check` and fill in the following rule:
            - Set `Where` to `todos.user_id`
            - Set the operator to `_eq`
            - Set the value to `X-Hasura-User-Id`
        - Select all columns except `user_id` on `Column select permissions`
        - Save

    ![Update permissions](/images/quickstarts/react-native/todos-update-permissions.png)

    4. `Delete`
        - Set `Row delete permissions` to `With custom check` and fill in the following rule:
            - Set `Where` to `todos.user_id`
            - Set the operator to `_eq`
            - Set the value to `X-Hasura-User-Id`
        - Save

    ![Delete permissions](/images/quickstarts/react-native/todos-delete-permissions.png)

  </Step>

  <Step title="Configure permissions to enable user file uploads">
    To enable file uploads by users, set the permissions as follows:

    1. Edit the **files** table permissions
        1. Navigate to the files table within the [Database tab](https://app.nhost.io/_/_/database/browser/default/storage/files)
        2. Click on the three dots (...) next to the files table
        3. Click on **Edit Permissions**

    2. Modify the `Insert` permission for the `user` role:
          1. Set `Row insert permissions` to `Without any checks`
          2. Select all columns on `Column insert permissions`
          4. Save

    ![Insert Permissions](/images/quickstarts/react-native/files-insert-permissions.png)

    3. `Select`
        - Set `Row select permissions` to `With custom check` and fill in the following rule:
            - Set `Where` to `files.uploaded_by_user_id`
            - Set the operator to `_eq`
            - Set the value to `X-Hasura-User-Id`
        - Select all columns on `Column select permissions`
        - Save

    ![Select permissions](/images/quickstarts/react-native/files-select-permissions.png)

  </Step>

  <Step title="Bootstrap your React app">
    Intialize a new React project using the template [`@nhost/react-apollo`](https://www.npmjs.com/package/@nhost/cra-template-react-apollo)

    ```bash Terminal
    npx create-react-app myapp --template @nhost/react-apollo
    ```

  </Step>

  <Step title="Connect your React app to the Nhost project">
    Copy your project's `<subdomain>` and `<region>` values available on the dashboard overview

    ```tsx src/index.tsx
    const nhost = new NhostClient({
      subdomain: "<subdomain>", // replace the subdomain value e.g. "hjcuuqweqwezolpolrep"
      region: "<region>", // replace the region value e.g. "eu-central-1"
    });
    ```

  </Step>

  <Step title="Create the Todos Page and Add It to the Sidebar Navigation">
    <CodeGroup>
      ```tsx src/components/routes/app/todos.tsx
      import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
      import { Button } from '@/components/ui/button'
      import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
      import { Input } from '@/components/ui/input'
      import { gql, useMutation } from '@apollo/client'
      import { useAuthQuery } from '@nhost/react-apollo'
      import { Check, Info, Plus, Trash } from 'lucide-react'
      import { useState } from 'react'
      import { toast } from 'sonner'

      export default function Todos() {
        const { data, refetch: refetchTodos } = useAuthQuery<{
          todos: Array<{
            id: string
            contents: string
          }>
        }>(gql`
          query {
            todos(order_by: { createdAt: desc }) {
              id
              contents
            }
          }
        `)

        const [contents, setContents] = useState('')

        const [addTodo] = useMutation<{
          insertTodo?: {
            id: string
            contents: string
          }
        }>(gql`
          mutation ($contents: String!) {
            insertTodo(object: { contents: $contents }) {
              id
              contents
            }
          }
        `)

        const [deleteTodo] = useMutation<{
          deleteNote?: {
            id: string
            content: string
          }
        }>(gql`
          mutation deleteTodo($todoId: uuid!) {
            deleteTodo(id: $todoId) {
              id
              contents
            }
          }
        `)

        const handleAddTodo = () => {
          if (contents) {
            addTodo({
              variables: { contents },
              onCompleted: async () => {
                setContents('')
                await refetchTodos()
              },
              onError: (error) => {
                toast.error(error.message)
              }
            })
          }
        }

        const handleDeleteTodo = async (todoId: string) => {
          await deleteTodo({
            variables: { todoId },
            onCompleted: async () => {
              await refetchTodos()
            },
            onError: (error) => {
              toast.error(error.message)
            }
          })

          await refetchTodos()
        }

        return (
          <div className="w-full">
            <Card className="mb-4">
              <CardHeader>
                <CardTitle>Todos</CardTitle>
              </CardHeader>
            </Card>
            <Card className="w-full pt-6">
              <CardContent className="flex flex-col gap-4">
                <div className="flex flex-row gap-4">
                  <Input
                    value={contents}
                    onChange={(e) => setContents(e.target.value)}
                    onKeyDown={(e) => e.code === 'Enter' && handleAddTodo()}
                  />
                  <Button className="m-0" onClick={handleAddTodo}>
                    <Plus />
                    Add
                  </Button>
                </div>
                <div>
                  {data?.todos.length === 0 && (
                    <Alert className="w-full">
                      <Info className="w-4 h-4" />
                      <AlertTitle>Empty</AlertTitle>
                      <AlertDescription className="mt-2">Start by adding a todo</AlertDescription>
                    </Alert>
                  )}
                  {data?.todos.map((todo) => (
                    <div
                      key={todo.id}
                      className="flex flex-row items-center justify-between w-full p-4 border-b last:pb-0 last:border-b-0"
                    >
                      <div className="flex flex-row gap-2">
                        <Check className="w-5 h-5" />
                        <span>{todo.contents}</span>
                      </div>
                      <Button variant="ghost" onClick={() => handleDeleteTodo(todo.id)}>
                        <Trash className="w-5 h-5" />
                      </Button>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>
        )
      }
      ```

      ```tsx src/components/routes/app/layout.tsx
      <nav className="flex flex-col items-center gap-4 px-2 sm:py-5">
      --
      <Tooltip>
        <TooltipTrigger asChild>
          <NavLink
            to="/todos"
            className="flex items-center justify-center transition-colors rounded-lg h-9 w-9 text-muted-foreground hover:text-foreground md:h-8 md:w-8 aria-[current]:bg-accent aria-[current]:text-accent-foreground"
          >
            <SquareCheckBig className="w-5 h-5" />
            <span className="sr-only">Todos</span>
          </NavLink>
        </TooltipTrigger>
        <TooltipContent side="right">Todos</TooltipContent>
      </Tooltip>
      --
      </nav>
      ```
      </CodeGroup>

  </Step>

  <Step title="Run the project">
    Run your project with `npm start` and enter `http://localhost:3000` in your browser.
  </Step>
</Steps>