Skip to main content

​
Prerequisites

Before you begin, ensure you have the following installed:
  • Node.js (v16 or higher) - Download here
  • npm, yarn, or pnpm - Package manager (npm comes with Node.js)
  • Code Editor - VS Code recommended with TypeScript extensions
You can verify your Node.js installation by running node --version in your terminal.

​
Getting Started

1

Clone or Access the Repository

Navigate to the source code directory. The project contains two main learning modules:
cd workspace/source
ls
You should see:
  • 01-reforzamientoTs/ - TypeScript fundamentals
  • 02-primeros-pasos/ - React basics
Each directory is a standalone Vite project with its own dependencies and configuration.
2

Install Dependencies for TypeScript Fundamentals

Start with the first module to learn TypeScript essentials:
cd 01-reforzamientoTs
npm install
This installs:
  • TypeScript (^5.5.3)
  • Vite (^5.4.1) for fast development
3

Run the TypeScript Development Server

Start the development server with hot module replacement:
npm run dev
Your browser will open at http://localhost:5173 (or similar). The server will automatically reload when you make changes to the code.
Open the browser console to see the output from TypeScript examples like variable declarations, functions, and promises.
4

Install Dependencies for React Basics

Once comfortable with TypeScript, move to the React module:
cd ../02-primeros-pasos
npm install
This installs:
  • React (^18.3.1) and React DOM
  • TypeScript type definitions
  • Vite with React plugin
  • ESLint for code quality
  • Vitest for testing
5

Run the React Development Server

Start the React development server:
npm run dev
You’ll see the shopping cart example with interactive counter components.

​
Project Structure

Understanding the project organization will help you navigate the learning materials:

​
TypeScript Fundamentals (01-reforzamientoTs/)

01-reforzamientoTs/
├── src/
│   ├── bases/
│   │   ├── 01-const-let.ts          # Variables and constants
│   │   ├── 02-template-string.ts    # String interpolation
│   │   ├── 03-object-literal.ts     # Working with objects
│   │   ├── 04-arrays.ts             # Array operations
│   │   ├── 05-functions.ts          # Function syntax
│   │   ├── 06-obj-dest.ts           # Object destructuring
│   │   ├── 07-array-destructuring.ts # Array destructuring
│   │   ├── 08-import-export.ts      # Module system
│   │   ├── 09-promises.ts           # Async promises
│   │   ├── 10-fetch-api.ts          # HTTP requests
│   │   └── 11-async-await.ts        # Async/await syntax
│   ├── data/
│   │   ├── heroes.data.ts           # Sample data
│   │   └── giphy.response.ts        # API response types
│   └── main.ts                      # Entry point
├── package.json
└── tsconfig.json                    # TypeScript config
Each file in the bases/ directory demonstrates a specific TypeScript concept. Start from 01-const-let.ts and work your way through sequentially.

​
React Basics (02-primeros-pasos/)

02-primeros-pasos/
├── src/
│   ├── shopping-cart/
│   │   ├── ItemCounter.tsx          # Counter component
│   │   └── ItemCounter.module.css   # Scoped styles
│   ├── FirstSteps.tsx               # Shopping cart example
│   ├── MyAwesomeApp.tsx             # Basic React demo
│   ├── MyAwesomeApp.test.tsx        # Component tests
│   ├── helpers/
│   │   ├── math.helper.ts           # Utility functions
│   │   └── math.helper.test.ts      # Unit tests
│   └── main.tsx                     # React entry point
├── package.json
├── vite.config.ts                   # Vite configuration
├── tsconfig.json                    # TypeScript config
└── eslint.config.js                 # Linting rules
The FirstSteps.tsx component demonstrates mapping arrays to components with the shopping cart example. The ItemCounter component shows state management with useState.

​
Development Workflow

​
Working with TypeScript Examples

  1. Navigate to a file in 01-reforzamientoTs/src/bases/
  2. Open your browser’s developer console
  3. Modify the code and save
  4. Watch the console output update automatically
Example: In 01-const-let.ts: 
let firstname: string = 'angel';
let lastname = 'diosdado';

const containsLetter = lastname.includes('a');
console.log({ containsLetter, firstname, lastname })

​
Working with React Components

  1. Edit components in 02-primeros-pasos/src/
  2. The browser automatically refreshes with your changes
  3. Use React DevTools to inspect component state
Example: The ItemCounter component in shopping-cart/ItemCounter.tsx: 
import { useState } from "react"
import styles from './ItemCounter.module.css'

interface Props {
  name: string,
  quantity?: number
}

export const ItemCounter = ({ name, quantity }: Props) => {
  const [count, setCount] = useState(0)

  const handleAdd = () => {
    setCount(count + 1)
  }

  const handleSub = () => {
    if (count === 0) return;
    setCount(count - 1)
  }

  return (
    <section className={styles['item-row']}>
      <span style={{ color: count === 0 ? 'red' : 'black' }}>
        {name}
      </span>
      <button onClick={handleAdd}>+1</button>
      <span>{count}</span>
      <button onClick={handleSub}>-1</button>
    </section>
  )
}

​
Running Tests

The React project includes Vitest for testing: 
# Run tests
npm test

# Run tests with UI
npm run test:ui

# Generate coverage report
npm run coverage
Make sure to run tests from the 02-primeros-pasos directory as the TypeScript fundamentals project doesn’t include test configuration.

​
Additional Build Commands

​
TypeScript Project

# Build for production
npm run build

# Preview production build
npm run preview

​
React Project

# Run ESLint
npm run lint

# Build for production
npm run build

# Preview production build
npm run preview

​
Troubleshooting

​
Port Already in Use

If you get a port conflict error, Vite will automatically suggest an alternative port. You can also specify a custom port: 
npm run dev -- --port 3000

​
TypeScript Errors

If you see TypeScript errors, ensure your tsconfig.json is properly configured. Both projects include working configurations.

​
Module Not Found

Make sure you’ve run npm install in the correct directory. Each project has its own node_modules folder.
If you encounter any issues, try deleting node_modules and package-lock.json, then run npm install again.

​
Next Steps

Now that your environment is set up, you’re ready to start learning! We recommend:
  1. Start with the TypeScript fundamentals in 01-reforzamientoTs
  2. Work through the files in src/bases/ sequentially
  3. Experiment with the code and console output
  4. Move to 02-primeros-pasos to learn React
  5. Study the ItemCounter component to understand hooks
  6. Modify the shopping cart example to add your own features
Take your time with each concept. The hands-on examples are designed to build upon each other progressively.

Build docs developers (and LLMs) love

Get started for freeTalk to us