CodeSandbox Cheat Sheet¶

__HTML_TAG_41_ Todos los comandos

Overview¶

CodeSandbox es un entorno de desarrollo basado en la nube que permite el desarrollo web instantáneo en el navegador. Proporciona una experiencia completa de IDE con el apoyo de marcos modernos, colaboración en tiempo real y capacidades de despliegue sin problemas.

▪ restablecimiento Nota: Tier libre disponible con limitaciones. Los planes Pro ofrecen características adicionales como cajas de arena privadas, dominios personalizados y herramientas de colaboración avanzadas.

Get Started¶

Account Creation¶

# Sign up options:
# - GitHub account (recommended)
# - Google account
# - Email registration

# Visit: https://codesandbox.io
# Click "Sign In" and choose authentication method

Creando sandboxes¶

# Quick start templates:
# - React
# - Vue
# - Angular
# - Vanilla JavaScript
# - Node.js
# - Next.js
# - Nuxt.js
# - Svelte
# - Gatsby

Template Selection¶

// 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

Interface Overview¶

Editor Layout¶

# 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

Atajos de teclado¶

# 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

Project Management¶

File Operations¶

# 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

Dependency Management¶

// 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"
  }
}

Adding Dependencies¶

# 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 Development¶

// Hot reloading enabled by default
import React, { useState } from 'react';

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

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

export default App;

Vue.js Development¶

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="updateMessage">Update</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    updateMessage() {
      this.message = 'Updated!';
    }
  }
}
</script>

<style scoped>
h1 {
  color: #42b883;
}
</style>

Node.js Backend¶

// 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}`);
});

Collaboration Features¶

Colaboración en tiempo real¶

# 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

Permissions Management¶

# 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

Comentarios y reseñas¶

# 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

Development Tools¶

Consola y depuración

# 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

Testing Integration¶

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

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

// Run tests:
// Tests tab in right panel
// Automatic test discovery
// Real-time test results

Environment Variables¶

# 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;

Características avanzadas¶

Plantillas personalizadas¶

# Create custom template:
# 1. Build your sandbox
# 2. Click "..." menu
# 3. Select "Create Template"
# 4. Configure template settings
# 5. Publish for team use

GitHub Integration¶

# 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

Deployment Options¶

# 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 Environments¶

Docker Support¶

# Dockerfile example
FROM node:16-alpine

WORKDIR /app
COPY package*.json ./
RUN npm install

COPY . .
EXPOSE 3000

CMD ["npm", "start"]

Custom Environment¶

# .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 e integraciones¶

CodeSandbox API¶

// Embed sandbox in website
<iframe
  src="https://codesandbox.io/embed/react-new?fontsize=14&hidenavigation=1&theme=dark"
  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
  title="React Sandbox"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

Embed Options¶

<!-- Customizable embed parameters -->
<iframe
  src="https://codesandbox.io/embed/sandbox-id?
    fontsize=14&
    hidenavigation=1&
    theme=dark&
    view=editor&
    module=/src/App.js&
    hidedevtools=1"
  style="width:100%; height:500px;"
></iframe>

REST API¶

# 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

Performance Optimization¶

Build Optimization¶

// webpack.config.js customization
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
};

Bundle Analysis¶

# Analyze bundle size:
# 1. Build project
# 2. Check bundle analyzer in preview
# 3. Identify large dependencies
# 4. Optimize imports and dependencies

Caching Strategies¶

# Service worker for caching:
# PWA template includes service worker
# Automatic caching of static assets
# Offline functionality support

Gestión del equipo¶

Espacios de trabajo del equipo¶

# Create team workspace:
# Account settings > Teams
# Create new team
# Invite team members
# Manage permissions

Plantillas compartidas¶

# Team templates:
# Create standardized templates
# Share across team members
# Enforce coding standards
# Consistent project structure

Usage Analytics¶

# Team analytics:
# View team sandbox usage
# Track collaboration metrics
# Monitor resource consumption
# Analyze productivity trends

Precios y límites¶

Free Tier¶

# Free plan includes:
# - Unlimited public sandboxes
# - 3 private sandboxes
# - Basic collaboration features
# - Community support

Pro Plan ($9/mes)¶

# Pro features:
# - Unlimited private sandboxes
# - Advanced collaboration
# - Custom domains
# - Priority support
# - Team management

Plan de Equipo (15 dólares/usuario/mes)¶

# Team features:
# - Team workspaces
# - Advanced permissions
# - Shared templates
# - Usage analytics
# - SSO integration

Troubleshooting¶

Common Issues¶

# 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

Performance Issues¶

# 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¶

# 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

Buenas prácticas¶

Project Organization¶

# File structure best practices:
src/
  components/
    common/
    pages/
  utils/
  hooks/
  services/
  styles/
  tests/
public/
  assets/
  images/

Código Calidad¶

# Use linting and formatting:
# ESLint for code quality
# Prettier for formatting
# TypeScript for type safety
# Husky for git hooks

Directrices de colaboración¶

# Team collaboration tips:
# - Use descriptive commit messages
# - Comment complex code sections
# - Follow consistent naming conventions
# - Regular code reviews
# - Document API changes

Resources¶

Documentation¶

[CodeSandbox Documentation](URL_46__
[API Referencia](URL_47__ [Guía de Embedding](URL_48__

Community¶

[CodeSandbox Discord]
[Repositorio GitHub](URL_50__
[Foro de la Comunidad](URL_51__

Plantillas y Ejemplos¶

Plantillas oficiales
[Community Sandboxes]
[Ejemplos tutoriales](URL_54_