Quick Start

This guide will help you create and run your first application in minutes. We’ll walk through creating a new project, understanding the structure, and building your first component.

Prerequisites

Before you begin, ensure you have:

Node.js 18.x or higher installed on your machine
npm, yarn, or pnpm package manager
A code editor (we recommend VS Code with TypeScript support)

Create a New Project

Use the CLI to scaffold a new project with all the necessary configuration:

npx create-frontend-app my-app
cd my-app

yarn create frontend-app my-app
cd my-app

pnpm create frontend-app my-app
cd my-app

The CLI will prompt you to choose:

Template: Start with TypeScript (recommended) or JavaScript
Styling: Tailwind CSS, CSS Modules, or Styled Components
Features: Routing, State Management, Testing utilities

For this quick start, select TypeScript with Tailwind CSS and enable Routing.

Explore the Project Structure

Your new project includes everything you need to get started:

my-app/
├── src/
│   ├── components/     # Reusable UI components
│   ├── pages/          # Route pages
│   ├── styles/         # Global styles
│   ├── utils/          # Helper functions
│   └── App.tsx         # Root component
├── public/             # Static assets
├── package.json
└── tsconfig.json

Key files:

src/App.tsx - Your application’s entry point
src/pages/ - File-based routing (each file is a route)
src/components/ - Where you’ll build reusable components

Start the Development Server

Launch the dev server with hot module replacement:

npm run dev

yarn dev

pnpm dev

Your application will be available at http://localhost:3000

Changes to your code will automatically refresh in the browser without losing state.

Create Your First Component

Let’s build a simple interactive component. Create a new file src/components/Welcome.tsx:

src/components/Welcome.tsx

import { useState } from 'react'

export function Welcome() {
  const [name, setName] = useState('')
  const [greeting, setGreeting] = useState('')

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    setGreeting(`Hello, ${name}! Welcome to our framework!`)
  }

  return (
    <div className="max-w-md mx-auto mt-8 p-6 bg-white rounded-lg shadow-lg">
      <h2 className="text-2xl font-bold mb-4 text-gray-800">
        Welcome Component
      </h2>
      
      <form onSubmit={handleSubmit} className="space-y-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            What's your name?
          </label>
          <input
            type="text"
            value={name}
            onChange={(e) => setName(e.target.value)}
            className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500"
            placeholder="Enter your name"
          />
        </div>
        
        <button
          type="submit"
          className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition-colors"
        >
          Greet Me
        </button>
      </form>

      {greeting && (
        <div className="mt-4 p-4 bg-green-50 border border-green-200 rounded-md">
          <p className="text-green-800 font-medium">{greeting}</p>
        </div>
      )}
    </div>
  )
}

This component demonstrates:

State management with useState
Form handling with controlled inputs
Conditional rendering for the greeting message
Tailwind CSS for styling

Use Your Component

Import and use your new component in src/App.tsx:

src/App.tsx

import { Welcome } from './components/Welcome'

export default function App() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 py-12">
      <div className="container mx-auto px-4">
        <h1 className="text-4xl font-bold text-center mb-8 text-gray-900">
          My First App
        </h1>
        <Welcome />
      </div>
    </div>
  )
}

Save the file and see your changes instantly in the browser!

Build for Production

When you’re ready to deploy, create an optimized production build:

npm run build

yarn build

pnpm build

This generates a dist/ folder with optimized, minified assets ready for deployment.Preview your production build locally:

npm run preview

yarn preview

pnpm preview

Next Steps

Congratulations! You’ve created your first application. Here’s what to explore next:

Components

Learn about component patterns and best practices

Routing

Build multi-page applications with file-based routing

State Management

Manage complex application state effectively

Styling

Explore different styling approaches and theming

Remember to add environment variables to .env.local (not .env) to keep secrets out of version control.

Common First Steps

Add a New Page

Create a file in src/pages/about.tsx:

src/pages/about.tsx

export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This page is automatically available at /about</p>
    </div>
  )
}

Fetch Data

Use the built-in data fetching utilities:

import { useEffect, useState } from 'react'

export function UserList() {
  const [users, setUsers] = useState([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    fetch('https://api.example.com/users')
      .then(res => res.json())
      .then(data => {
        setUsers(data)
        setLoading(false)
      })
  }, [])

  if (loading) return <div>Loading...</div>

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  )
}

Getting Help

Stuck? Check out our Installation Guide for detailed troubleshooting or join our community Discord for real-time help.

Getting Started

Core Concepts

Development

Guides

Quick Start

Quick Start

Prerequisites

Next Steps

Components

Routing

State Management

Styling

Common First Steps

Add a New Page

Fetch Data

Getting Help

​Quick Start

​Prerequisites

​Next Steps

Components

Routing

State Management

Styling

​Common First Steps

​Add a New Page

​Fetch Data

​Getting Help

Quick Start

Prerequisites

Next Steps

Common First Steps

Add a New Page

Fetch Data

Getting Help