Crear un proyecto de React.js con Typescript

The creation of modern web applications has been greatly simplified thanks to frontend development frameworks. These frameworks allow us to build interactive and dynamic interfaces more easily, reducing configuration time and allowing us to focus on what really matters: business logic and user experience. React, developed by Facebook, has positioned itself as one of the most popular and powerful frameworks on the market, especially when combined with TypeScript for more robust development with fewer bugs.

How to create a React project with TypeScript?

React is a leading framework in frontend development that allows you to create interactive user interfaces efficiently. Combining it with TypeScript gives us additional advantages such as static typing, which reduces errors in development time. Creating a project that integrates both technologies is surprisingly easy thanks to tools like Vite.

To start a React project with TypeScript, we follow these steps:

1. We open VS Code and create a folder for our project.
2. Open the terminal and go to the created folder.
3. Run the command: npm create vite@latest.
4. We follow the interactive wizard to configure our project.

The wizard will ask for basic information such as

• Project name
• Package name
• Framework to use (we select React)
• Variant (we select TypeScript + SWC for better performance)

Once this process is completed, we will have a project framework ready to start developing. The magic of these templates is that all the complex configuration is already done for us, allowing us to concentrate on writing productive code right out of the box.

Structure and execution of the generated project

After creating the project, we will find an organized file structure that includes:

• Folder src: contains the source code of our application.
• Public folder: for static files
• Configuration files such as package.json and tsconfig.json

To start our project, we must:

# move to the project foldercd project-name
 # install dependenciesnpm install
 # start the development servernpm run dev

By executing these commands, our project will be available at a local address (usually http://localhost:5173/) and we will be able to see a welcome page with a working counter.

What are TSX files and how do they work?

One of the peculiarities of working with React and TypeScript is the .tsx file extension. This special extension combines TypeScript with JSX (JavaScript XML), allowing us to write HTML code directly inside our TypeScript files.

If we explore the App.tsx file generated in our project, we will see code like this:

import { useState } from 'react'import reactLogo from './assets/react.svg'import './App.css'
function App() { const [counter, setCounter] = useState(0)
 return (<div className="App">
        <h1>Platzitemplate</h1>
        <div className="card">
          <button onClick={() => setCounter((counter) => counter + 1)}>
 counter: {counter}
         </button>
       </div>
     </div> )}
export default App.

This file shows the JSX syntax, where we can write HTML elements like <div>, <h1> and <button> directly in our TypeScript code. The magic happens when we modify this file: the changes are instantly reflected in the browser thanks to the hot reloading provided by Vite.

TypeScript configuration in the project

The generated project includes configuration files specific to TypeScript:

• tsconfig.json: the main file that references other configuration files.
• tsconfig.app.json: application-specific settings
• tsconfig.node.json: configuration for Node.js environment

These files contain the TypeScript compiler options(compilerOptions) that determine how our code is compiled. The advantage of using a template is that these settings are already optimized to work with React, saving us from having to configure them manually.

How does the compilation process work?

The compilation process in a React project with TypeScript is automated thanks to the scripts defined in the package.json file. When we run npm run dev, a process chain is triggered which:

1. Starts the Vite development server
2. Compiles the TypeScript/TSX files to JavaScript
3. Serves the application on a local server
4. Watches for changes in the files to automatically recompile

The tsc (TypeScript Compiler) command is responsible for transforming our TypeScript code into JavaScript that the browser can understand. This process is configured in the build script of the package.json:

"scripts": { " dev": "vite", " build": "tsc && vite build", " preview": "vite preview"}

The beauty of this system is that everything happens transparently to the developer. We don't need to worry about manually running the compiler or configuring additional tools.

Templates like the one we've created allow us to quickly get started with a React and TypeScript project without having to deal with the initial setup. We can customize this base to our specific needs, adding or removing components and functionality. This approach saves us valuable time that we can spend on developing the unique features of our application instead of setting up the development environment.

Have you tried creating projects with React and TypeScript? What other templates or tools have you found useful to speed up your workflow? Share your experience in the comments.