Skip to main content

​
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)
1

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
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.
2

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
3

Start the Development Server

Launch the dev server with hot module replacement:
npm run dev
Your application will be available at http://localhost:3000
Changes to your code will automatically refresh in the browser without losing state.
4

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
5

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!
6

Build for Production

When you’re ready to deploy, create an optimized production build:
npm run build
This generates a dist/ folder with optimized, minified assets ready for deployment.Preview your production build locally:
npm run 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.

Build docs developers (and LLMs) love

Get started for freeTalk to us