Skip to content

(react quickstart) small copy updates; fix code highlight #2094

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 1, 2025
Merged

(react quickstart) small copy updates; fix code highlight #2094

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2ff5343
Update react.mdx
Akul-sada Mar 11, 2025
f8fdf5b
docs review
alexisintech Apr 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 13 additions & 13 deletions docs/quickstarts/react.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ description: Add authentication and user management to your React app with Clerk
- Create a new React application using Vite
- Install `@clerk/clerk-react`
- Set up your environment variables
- Import the Clerk publishable key
- Import the Clerk Publishable Key
- Add `<ClerkProvider />` to your application
- Create a header with Clerk components for users to sign in and out
</TutorialHero>
Expand Down Expand Up @@ -80,7 +80,7 @@ To get started using Clerk with React, add the SDK to your project:
### Set your environment variables

1. If you don't have an `.env.local` file in the root directory of your React project, create one now.
2. Find your Clerk publishable key. If you're signed into Clerk, the `.env.local` snippet below will contain your key. Otherwise:
2. Find your Clerk Publishable Key. If you're signed into Clerk, the `.env.local` snippet below will contain your key. Otherwise:
- Navigate to the [Clerk Dashboard](https://dashboard.clerk.com/last-active?path=api-keys) and select your application.
- In the navigation sidebar, select **API Keys**.
- You can copy your key from the **Quick Copy** section.
Expand All @@ -96,17 +96,17 @@ VITE_CLERK_PUBLISHABLE_KEY={{pub_key}}

</InjectKeys>

### Import the Clerk publishable key
### Import the Clerk Publishable Key

You will need to import your Clerk publishable key into your application. You can add an `if` statement to check that it is imported and that it exists. This will prevent running the application without the publishable key, and will also prevent TypeScript errors.
You will need to import your Clerk Publishable Key into your application. You can add an `if` statement to check that it is imported and that it exists. This will prevent running the application without the Publishable Key and prevent TypeScript errors.

```tsx filename="src/main.tsx" {6-7, 9-11}
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'

// Import your publishable key
// Import your Publishable Key
const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

if (!PUBLISHABLE_KEY) {
Expand All @@ -124,7 +124,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render(

All Clerk hooks and components must be children of the [`<ClerkProvider>`](/docs/components/clerk-provider) component, which provides active session and user context.

To make this data available across your entire app, wrap your app in the `<ClerkProvider>` component. You **must** pass your publishable key as a prop to the `<ClerkProvider>` component.
To make this data available across your entire app, wrap your app in the `<ClerkProvider>` component. You **must** pass your Publishable Key as a prop to the `<ClerkProvider>` component.

```tsx filename="src/main.tsx" {5, 16, 18}
import React from 'react'
Expand All @@ -133,7 +133,7 @@ import App from './App.tsx'
import './index.css'
import { ClerkProvider } from '@clerk/clerk-react'

// Import your publishable key
// Import your Publishable Key
const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

if (!PUBLISHABLE_KEY) {
Expand All @@ -151,14 +151,14 @@ ReactDOM.createRoot(document.getElementById('root')!).render(

### Create a header with Clerk components

You can control which content signed in and signed out users can see with Clerk's [prebuilt components](/docs/components/overview). To get started, create a header for your users to sign in or out. To do this, you will use:
You can control which content signed-in and signed-out users can see with Clerk's [prebuilt components](/docs/components/overview). To get started, create a header for your users to sign in or out. To do this, you will use:

- [`<SignedIn>`](/docs/components/control/signed-in): Children of this component can only be seen while **signed in**.
- [`<SignedOut>`](/docs/components/control/signed-out): Children of this component can only be seen while **signed out**.
- [`<UserButton />`](/docs/components/user/user-button): A prebuilt component that comes styled out of the box to show the avatar from the account the user is signed in with.
- [`<SignInButton />`](/docs/components/unstyled/sign-in-button): An unstyled component that links to the sign-in page or displays the sign-in modal.

```tsx filename="src/App.tsx" {1, 7-12}
```tsx filename="src/App.tsx" {1, 5-12}
import { SignedIn, SignedOut, SignInButton, UserButton } from "@clerk/clerk-react";

export default function App() {
Expand All @@ -185,14 +185,14 @@ React has many options for handling routing, and you are free to choose the opti

## More resources

You can also learn more about Clerk components, how to customize them, and how to use Clerk's client side helpers. The following guides will help you get started.
You can also learn more about Clerk components, how to customize them, and how to use Clerk's client-side helpers. The following guides will help you get started.

<div className="container mx-auto my-4">
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
<Cards title="Prebuilt Components" description="Learn more about Clerk's suite of components that let you quickly add authentication to your app." link="/docs/components/overview" cta="Learn More" />
<Cards title="Prebuilt Components" description="Learn more about Clerk's suite of components that let you quickly add authentication to your app." link="/docs/components/overview" cta=" Learn More" />

<Cards title="Customization & Localization" description="Learn how to customize and localize Clerk components." link="/docs/components/customization/overview" cta="Learn More" />
<Cards title="Customization & Localization" description="Learn how to customize and localize Clerk components." link="/docs/components/customization/overview" cta=" Learn More" />

<Cards title="Client Side Helpers" description="Learn more about our client side helpers and how to use them." link="/docs/references/react/use-user" cta="Learn More" />
<Cards title="Client Side Helpers" description="Learn more about our client side helpers and how to use them." link="/docs/references/react/use-user" cta= "Learn More" />
</div>
</div>