Your First Project with Trae

Welcome to Trae IDE! This tutorial will guide you through creating your first project from scratch.

Prerequisites

• Trae IDE installed and running
• Basic understanding of web development
• Node.js installed (for this example)

Step 1: Create a New Project

1. Open Trae IDE
2. Click File > New Project or use Ctrl+Shift+N (Windows/Linux) or Cmd+Shift+N (Mac)
3. Choose Web Application > React TypeScript
4. Enter project details:
   • Project Name: my-first-trae-app
   • Location: Choose your preferred directory
   • Description: "My first project with Trae IDE"
5. Click Create Project

Step 2: Explore the Project Structure

Trae automatically generates a well-structured React TypeScript project:

my-first-trae-app/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── components/
│   │   └── App.tsx
│   ├── styles/
│   │   └── App.css
│   ├── index.tsx
│   └── types/
├── package.json
├── tsconfig.json
└── README.md

Key Files:

• src/index.tsx: Application entry point
• src/components/App.tsx: Main application component
• package.json: Project dependencies and scripts
• tsconfig.json: TypeScript configuration

Step 3: Start the Development Server

1. Open the integrated terminal: `Ctrl+`` (backtick) or View > Terminal
2. Install dependencies:

   npm install

3. Start the development server:

   npm start

4. View your app: Trae will automatically open http://localhost:3000 in the preview panel

Step 4: Make Your First Changes

Modify the App Component

1. Open src/components/App.tsx
2. Replace the content with:

import React, { useState } from 'react';
import '../styles/App.css';

function App() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');

  return (
    <div className="App">
      <header className="App-header">
        <h1>Welcome to My First Trae App! 🚀</h1>
        
        <div className="greeting-section">
          <input
            type="text"
            placeholder="Enter your name"
            value={name}
            onChange={(e) => setName(e.target.value)}
            className="name-input"
          />
          {name && <p>Hello, {name}! 👋</p>}
        </div>

        <div className="counter-section">
          <p>You clicked {count} times</p>
          <button 
            onClick={() => setCount(count + 1)}
            className="counter-button"
          >
            Click me!
          </button>
        </div>

        <div className="features-section">
          <h2>Trae IDE Features Used:</h2>
          <ul>
            <li>✅ Auto-completion</li>
            <li>✅ Syntax highlighting</li>
            <li>✅ Live preview</li>
            <li>✅ Hot reload</li>
          </ul>
        </div>
      </header>
    </div>
  );
}

export default App;

Update the Styles

1. Open src/styles/App.css
2. Replace the content with:

.App {
  text-align: center;
}

.App-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 40px;
  color: white;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
}

.greeting-section {
  margin: 20px 0;
}

.name-input {
  padding: 10px 15px;
  font-size: 16px;
  border: none;
  border-radius: 25px;
  margin-bottom: 10px;
  outline: none;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.counter-section {
  margin: 30px 0;
}

.counter-button {
  background: #ff6b6b;
  color: white;
  border: none;
  padding: 12px 24px;
  font-size: 18px;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}

.counter-button:hover {
  background: #ff5252;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
}

.features-section {
  margin-top: 30px;
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 15px;
  backdrop-filter: blur(10px);
}

.features-section h2 {
  margin-bottom: 15px;
  color: #ffd700;
}

.features-section ul {
  list-style: none;
  padding: 0;
}

.features-section li {
  margin: 8px 0;
  font-size: 16px;
}

Step 5: Experience Trae's AI Features

Use AI Code Completion

1. Start typing a new function in App.tsx:

   const handleReset = () => {
     // Trae AI will suggest the implementation

2. Accept AI suggestions with Tab or Enter

Ask AI Assistant

1. Open AI Chat: Ctrl+Shift+A or click the AI icon
2. Ask questions like:
   • "How can I add routing to this React app?"
   • "Generate a loading spinner component"
   • "Add form validation to the name input"

Step 6: Add a New Component

Create a Welcome Component

1. Right-click on src/components/
2. Select "New File"
3. Name it Welcome.tsx
4. Add the content:

import React from 'react';

interface WelcomeProps {
  name: string;
  onNameChange: (name: string) => void;
}

const Welcome: React.FC<WelcomeProps> = ({ name, onNameChange }) => {
  return (
    <div className="welcome-component">
      <h2>Welcome Component</h2>
      <input
        type="text"
        placeholder="Enter your name"
        value={name}
        onChange={(e) => onNameChange(e.target.value)}
        className="name-input"
      />
      {name && (
        <div className="welcome-message">
          <p>Hello, {name}! Welcome to Trae IDE! 🎉</p>
        </div>
      )}
    </div>
  );
};

export default Welcome;

Use the Component

1. Import the component in App.tsx:

   import Welcome from './Welcome';

2. Replace the greeting section with:

   <Welcome name={name} onNameChange={setName} />

Step 7: Test Your Application

Manual Testing

1. Type in the name input - see real-time updates
2. Click the counter button - watch the count increase
3. Resize the browser - observe responsive design

Add Simple Tests

1. Create src/components/__tests__/App.test.tsx:

import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import App from '../App';

test('renders welcome message', () => {
  render(<App />);
  const welcomeElement = screen.getByText(/Welcome to My First Trae App/i);
  expect(welcomeElement).toBeInTheDocument();
});

test('counter increments when button is clicked', () => {
  render(<App />);
  const button = screen.getByText(/Click me!/i);
  const counter = screen.getByText(/You clicked 0 times/i);
  
  fireEvent.click(button);
  
  expect(screen.getByText(/You clicked 1 times/i)).toBeInTheDocument();
});

2. Run tests:

   npm test

Step 8: Build and Deploy

Build for Production

npm run build

Deploy Options

1. Vercel (Recommended):

   • Install Vercel CLI: npm i -g vercel
   • Deploy: vercel

2. Netlify:

   • Drag and drop the build folder to Netlify

3. GitHub Pages:

   • Push to GitHub
   • Enable GitHub Pages in repository settings

What You've Learned

✅ Project Creation: Used Trae's project templates ✅ Development Workflow: Hot reload and live preview ✅ AI Features: Code completion and AI assistant ✅ Component Development: Created reusable React components ✅ Styling: Applied modern CSS with gradients and animations ✅ Testing: Added unit tests for components ✅ Building: Prepared app for production deployment

Next Steps

1. Explore more templates: Try different project types
2. Learn AI features: Check out AI Assistant Tutorial
3. Advanced development: Read Code Generation Tutorial
4. IDE features: Discover IDE Functions

Troubleshooting

Common Issues

Port already in use:

# Kill process on port 3000
npx kill-port 3000

Dependencies not installing:

# Clear npm cache
npm cache clean --force
rm -rf node_modules package-lock.json
npm install

TypeScript errors:

• Check tsconfig.json configuration
• Ensure all imports have proper types
• Use Trae's AI assistant for type suggestions

Congratulations! 🎉

You've successfully created your first project with Trae IDE! You've experienced the power of AI-assisted development, modern tooling, and seamless workflow integration.

Ready for more? Check out our other tutorials to dive deeper into Trae's capabilities.