Codes Cheat Sheet
Überblick
CodeSandbox ist eine Cloud-basierte Entwicklungsumgebung, die eine sofortige Webentwicklung im Browser ermöglicht. Es bietet eine komplette IDE-Erfahrung mit Unterstützung für moderne Frameworks, Echtzeit-Kollaboration und nahtlose Einsatzmöglichkeiten.
ZEIT Anmerkung: Free tier verfügbar mit Einschränkungen. Pro-Pläne bieten zusätzliche Funktionen wie private Sandkästen, benutzerdefinierte Domains und erweiterte Kollaborationstools.
Erste Schritte
Kontoerstellung
```bash
Sign up options:
- GitHub account (recommended)
- Google account
- Email registration
Visit: https://codesandbox.io
Click "Sign In" and choose authentication method
```_
Sandboxen erstellen
```bash
Quick start templates:
- React
- Vue
- Angular
- Vanilla JavaScript
- Node.js
- Next.js
- Nuxt.js
- Svelte
- Gatsby
```_
Wählen Sie die Option
```javascript // Popular starter templates: // React: https://codesandbox.io/s/new // Vue: https://codesandbox.io/s/vue // Angular: https://codesandbox.io/s/angular // Vanilla: https://codesandbox.io/s/vanilla
// Create from GitHub repository: // https://codesandbox.io/s/github/username/repository ```_
Schnittstellenübersicht
Editor Layout
```bash
Left Panel:
- File Explorer
- Dependencies
- GitHub integration
- Deployment settings
Center Panel:
- Code Editor
- Multiple tabs support
- Syntax highlighting
- IntelliSense
Right Panel:
- Live Preview
- Console
- Tests
- Problems
```_
Keyboard Shortcuts
```bash
File Operations
Ctrl+N # New file Ctrl+S # Save (auto-save enabled) Ctrl+O # Open file Ctrl+Shift+P # Command palette
Editor Operations
Ctrl+F # Find Ctrl+H # Find and replace Ctrl+G # Go to line Ctrl+/ # Toggle comment
Navigation
Ctrl+P # Quick file open Ctrl+Shift+E # Toggle explorer Ctrl+` # Toggle terminal ```_
Projektleitung
Dateioperationen
```bash
Create new file:
Right-click in explorer > New File
Or use + button in file explorer
Create folder:
Right-click in explorer > New Folder
Upload files:
Drag and drop files into explorer
Or right-click > Upload Files
Delete files:
Right-click file > Delete
Or select file and press Delete key
```_
Abhängigkeitsmanagement
json
// Add dependencies via package.json
{
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"axios": "^1.4.0",
"styled-components": "^6.0.0"
},
"devDependencies": {
"@types/react": "^18.2.0",
"typescript": "^5.0.0"
}
}_
Anpassung von Abhängigkeiten
```bash
Method 1: Dependencies panel
Click "Add Dependency" button
Search for package name
Click to install
Method 2: Import statement
Type import statement in code
CodeSandbox auto-detects and installs
Method 3: Package.json
Manually edit package.json
Dependencies install automatically
```_
Framework-Specific Features
React Entwicklung
```jsx // Hot reloading enabled by default import React, { useState } from 'react';
function App() { const [count, setCount] = useState(0);
return (
Counter: {count}
export default App; ```_
Vue.js Entwicklung
```vue
{{ message }}
```_
Node.js Backend
```javascript // server.js const express = require('express'); const app = express(); | const port = process.env.PORT | | 3000; |
app.use(express.json());
app.get('/', (req, res) => { res.json({ message: 'Hello from CodeSandbox!' }); });
app.post('/api/data', (req, res) => { const { data } = req.body; res.json({ received: data, timestamp: new Date() }); });
app.listen(port, () => {
console.log(Server running on port ${port});
});
```_
Funktionen der Zusammenarbeit
Echtzeit-Zusammenarbeit
```bash
Share sandbox:
1. Click "Share" button
2. Copy share URL
3. Send to collaborators
Live collaboration:
Multiple users can edit simultaneously
See cursors and selections in real-time
Chat functionality available
```_
Zulassungsmanagement
```bash
Permission levels:
- View only: Can view but not edit
- Edit: Can edit files and dependencies
- Admin: Full control including settings
Set permissions:
Share dialog > Advanced > Set permissions
```_
Kommentare und Bewertungen
```bash
Add comments:
Select code > Right-click > Add Comment
Comments appear in sidebar
Resolve comments when addressed
Code reviews:
Share sandbox for review
Use comments for feedback
Track changes and discussions
```_
Entwicklungswerkzeuge
Konsole und Debugging
```bash
Browser Console:
Available in preview panel
Shows console.log output
Displays errors and warnings
Network tab:
Monitor API requests
View request/response details
Debug network issues
```_
Integration testen
```javascript // Jest testing example import { render, screen } from '@testing-library/react'; import App from './App';
test('renders learn react link', () => {
render(
// Run tests: // Tests tab in right panel // Automatic test discovery // Real-time test results ```_
Umweltvariablen
```bash
Create .env file in root:
REACT_APP_API_URL=https://api.example.com REACT_APP_API_KEY=your_api_key_here
Access in code:
const apiUrl = process.env.REACT_APP_API_URL; const apiKey = process.env.REACT_APP_API_KEY; ```_
Erweiterte Funktionen
Benutzerdefinierte Vorlagen
```bash
Create custom template:
1. Build your sandbox
2. Click "..." menu
3. Select "Create Template"
4. Configure template settings
5. Publish for team use
```_
Integration von GitHub
```bash
Import from GitHub:
New Sandbox > Import from GitHub
Enter repository URL
Select branch
Sandbox created automatically
Export to GitHub:
Sandbox menu > Export to GitHub
Create new repository
Push changes to GitHub
```_
Bereitstellungsoptionen
```bash
Netlify deployment:
Deployment tab > Netlify
Connect account
Deploy with one click
Vercel deployment:
Deployment tab > Vercel
Automatic deployments
Custom domain support
GitHub Pages:
Export to GitHub first
Enable GitHub Pages
Automatic deployment
```_
Container Umwelt
Docker Unterstützung
```dockerfile
Dockerfile example
FROM node:16-alpine
WORKDIR /app COPY package*.json ./ RUN npm install
COPY . . EXPOSE 3000
CMD ["npm", "start"] ```_
Umwelt
```bash
.codesandbox/tasks.json
{ "setupTasks": [ { "name": "Install Dependencies", "command": "npm install" } ], "tasks": { "dev": { "name": "Development Server", "command": "npm run dev", "runAtStart": true }, "build": { "name": "Build Project", "command": "npm run build" } } } ```_
API und Integrationen
Codes API
```javascript // Embed sandbox in website
```_
Einbettungsoptionen
```html
```_
REST API
```bash
Get sandbox information
curl -H "Authorization: Bearer YOUR_TOKEN" \ https://codesandbox.io/api/v1/sandboxes/sandbox-id
Create sandbox
curl -X POST \ -H "Authorization: Bearer YOUR_TOKEN" \ -H "Content-Type: application/json" \ -d '{"files": {...}, "template": "react"}' \ https://codesandbox.io/api/v1/sandboxes ```_
Leistungsoptimierung
Optimierung aufbauen
javascript
// webpack.config.js customization
module.exports = {
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all',
},
},
},
},
};_
Bundanalyse
```bash
Analyze bundle size:
1. Build project
2. Check bundle analyzer in preview
3. Identify large dependencies
4. Optimize imports and dependencies
```_
Caching-Strategien
```bash
Service worker for caching:
PWA template includes service worker
Automatic caching of static assets
Offline functionality support
```_
Teammanagement
Team Workspaces
```bash
Create team workspace:
Account settings > Teams
Create new team
Invite team members
Manage permissions
```_
Geteilte Vorlagen
```bash
Team templates:
Create standardized templates
Share across team members
Enforce coding standards
Consistent project structure
```_
Verwendungsanalyse
```bash
Team analytics:
View team sandbox usage
Track collaboration metrics
Monitor resource consumption
Analyze productivity trends
```_
Preise und Grenzen
Free Tier
```bash
Free plan includes:
- Unlimited public sandboxes
- 3 private sandboxes
- Basic collaboration features
- Community support
```_
Pro Plan ($9/Monat)
```bash
Pro features:
- Unlimited private sandboxes
- Advanced collaboration
- Custom domains
- Priority support
- Team management
```_
Teamplan ($15/Benutzer/Monat)
```bash
Team features:
- Team workspaces
- Advanced permissions
- Shared templates
- Usage analytics
- SSO integration
```_
Fehlerbehebung
Gemeinsame Themen
```bash
Sandbox not loading:
1. Check browser compatibility
2. Disable ad blockers
3. Clear browser cache
4. Try incognito mode
Dependencies not installing:
1. Check package.json syntax
2. Verify package names
3. Try manual refresh
4. Check network connection
```_
Leistungsfragen
```bash
Slow sandbox performance:
1. Reduce bundle size
2. Optimize dependencies
3. Use code splitting
4. Enable production mode
Memory issues:
1. Close unused tabs
2. Restart sandbox
3. Optimize code
4. Check for memory leaks
```_
Debug Information
```bash
Browser developer tools:
F12 to open dev tools
Check console for errors
Monitor network requests
Analyze performance
CodeSandbox logs:
Console tab in preview
Check for build errors
Review dependency issues
Monitor runtime errors
```_
Best Practices
Projektorganisation
```bash
File structure best practices:
src/ components/ common/ pages/ utils/ hooks/ services/ styles/ tests/ public/ assets/ images/ ```_
Code Qualität
```bash
Use linting and formatting:
ESLint for code quality
Prettier for formatting
TypeScript for type safety
Husky for git hooks
```_
Leitlinien für die Zusammenarbeit
```bash
Team collaboration tips:
- Use descriptive commit messages
- Comment complex code sections
- Follow consistent naming conventions
- Regular code reviews
- Document API changes
```_
Ressourcen
Dokumentation
- CodeSandbox Dokumentation
- [API Reference](_LINK_9__ -%20[Befreiungsleitfaden](LINK_9
%20Gemeinschaft
-%20[CodeSandbox%20Discord](_LINK_9__ -%20GitHub%20Repository - [Gemeinschaftsforum](LINK_9
%20Vorlagen%20und%20Beispiele
-%20offizielle%20Vorlagen - [Community Sandboxes](LINK_9 -%20(__LINK_9___)