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_10__
- (URL_2_)
Gemeinschaft¶
- [CodeSandbox Discord](LINK_12_
- GitHub Repository
- [Gemeinschaftsforum](LINK_14__
Vorlagen und Beispiele¶
- offizielle Vorlagen
- [Community Sandboxes](LINK_16__
- (URL_8_)