# Fundamentos de React (React / Next.js)

> JSX, components, props, state, eventos, renderizado condicional, listas y keys

- 20 preguntas de entrevista
- Junior
- [Preguntas de entrevista: React / Next.js](https://sharpskill.dev/es/technologies/react-next/preguntas-entrevista.md)

## 1. ¿Qué es JSX en React?

**Respuesta**

JSX es una extensión de sintaxis de JavaScript que permite escribir markup similar a HTML directamente en código JavaScript. Es transformado en llamadas a la función React.createElement por Babel durante la compilación. Usar JSX hace el código más legible y permite detectar errores en tiempo de compilación a través del tipado, combinando el poder de JavaScript con una sintaxis familiar.

## 2. ¿Cuál es la sintaxis correcta para usar una expresión JavaScript en JSX?

**Respuesta**

Las llaves simples permiten integrar cualquier expresión JavaScript válida en JSX, como variables, funciones o cálculos. Esta sintaxis crea una delimitación clara entre el markup JSX y el código JavaScript dinámico. Las llaves dobles se usan para objetos de estilo inline, los paréntesis para agrupar JSX multilínea y los corchetes para arrays de JavaScript.

## 3. ¿Cuál es la diferencia principal entre className en JSX y class en HTML?

**Respuesta**

JSX usa className en lugar de class porque class es una palabra reservada en JavaScript para declarar clases ES6. Como JSX se transforma en JavaScript, usar class crearía un conflicto de sintaxis. De manera similar, for se convierte en htmlFor y los eventos usan camelCase. Esta convención permite que JSX siga siendo JavaScript válido mientras ofrece una sintaxis similar a HTML.

## 17 preguntas más disponibles

- ¿Cómo escribir un comentario en código JSX?
- ¿Qué es un functional component en React?

Regístrate gratis: https://sharpskill.dev/es/login

## Otros temas de entrevista React / Next.js

- [Fundamentos de JavaScript](https://sharpskill.dev/es/technologies/react-next/preguntas-entrevista/javascript-essentials.md): 25 preguntas, Junior
- [React Hooks](https://sharpskill.dev/es/technologies/react-next/preguntas-entrevista/react-hooks.md): 22 preguntas, Junior
- [Ciclo de vida de los componentes](https://sharpskill.dev/es/technologies/react-next/preguntas-entrevista/component-lifecycle.md): 18 preguntas, Junior
- [React Router](https://sharpskill.dev/es/technologies/react-next/preguntas-entrevista/react-router.md): 20 preguntas, Junior
- [Gestión de estado con Context](https://sharpskill.dev/es/technologies/react-next/preguntas-entrevista/state-management-context.md): 18 preguntas, Junior
- [Formularios y Controlled Components](https://sharpskill.dev/es/technologies/react-next/preguntas-entrevista/forms-controlled-components.md): 20 preguntas, Mid-Level
- [Obtención de datos y API](https://sharpskill.dev/es/technologies/react-next/preguntas-entrevista/fetching-data-api.md): 20 preguntas, Mid-Level
- [React Query (TanStack Query)](https://sharpskill.dev/es/technologies/react-next/preguntas-entrevista/react-query-tanstack.md): 20 preguntas, Mid-Level
- [Styling & CSS-in-JS](https://sharpskill.dev/es/technologies/react-next/preguntas-entrevista/styling-css-in-js.md): 18 preguntas, Mid-Level
- [Fundamentos de Next.js](https://sharpskill.dev/es/technologies/react-next/preguntas-entrevista/nextjs-fundamentals.md): 25 preguntas, Mid-Level
- [TypeScript con React](https://sharpskill.dev/es/technologies/react-next/preguntas-entrevista/typescript-react.md): 20 preguntas, Mid-Level
- [Data Fetching en Next.js](https://sharpskill.dev/es/technologies/react-next/preguntas-entrevista/nextjs-data-fetching.md): 24 preguntas, Mid-Level
- [Server Actions de Next.js](https://sharpskill.dev/es/technologies/react-next/preguntas-entrevista/nextjs-server-actions.md): 20 preguntas, Mid-Level
- [Routing y Navegación en Next.js](https://sharpskill.dev/es/technologies/react-next/preguntas-entrevista/nextjs-routing-navigation.md): 22 preguntas, Mid-Level
- [API Routes de Next.js](https://sharpskill.dev/es/technologies/react-next/preguntas-entrevista/nextjs-api-routes.md): 20 preguntas, Mid-Level
- [Metadata & SEO en Next.js](https://sharpskill.dev/es/technologies/react-next/preguntas-entrevista/nextjs-metadata-seo.md): 18 preguntas, Mid-Level
- [Middleware y Auth en Next.js](https://sharpskill.dev/es/technologies/react-next/preguntas-entrevista/nextjs-middleware-auth.md): 22 preguntas, Mid-Level
- [Testing en React](https://sharpskill.dev/es/technologies/react-next/preguntas-entrevista/react-testing.md): 20 preguntas, Mid-Level
- [Zustand State Management](https://sharpskill.dev/es/technologies/react-next/preguntas-entrevista/zustand-state-management.md): 18 preguntas, Mid-Level
- [Optimización de Rendimiento en React](https://sharpskill.dev/es/technologies/react-next/preguntas-entrevista/react-performance-optimization.md): 22 preguntas, Senior
- [Error Boundaries & Error Handling](https://sharpskill.dev/es/technologies/react-next/preguntas-entrevista/react-error-boundaries.md): 18 preguntas, Senior
- [Advanced React Patterns](https://sharpskill.dev/es/technologies/react-next/preguntas-entrevista/advanced-react-patterns.md): 20 preguntas, Senior
- [Características avanzadas de Next.js](https://sharpskill.dev/es/technologies/react-next/preguntas-entrevista/nextjs-advanced-features.md): 24 preguntas, Senior
- [Despliegue y Producción de Next.js](https://sharpskill.dev/es/technologies/react-next/preguntas-entrevista/nextjs-deployment-production.md): 20 preguntas, Senior
- [Architecture & Design Patterns](https://sharpskill.dev/es/technologies/react-next/preguntas-entrevista/react-architecture-patterns.md): 22 preguntas, Senior
- [React Server Components](https://sharpskill.dev/es/technologies/react-next/preguntas-entrevista/react-server-components.md): 26 preguntas, Senior
- [Internacionalización de Next.js](https://sharpskill.dev/es/technologies/react-next/preguntas-entrevista/nextjs-internationalization.md): 20 preguntas, Senior
- [React Security & Buenas Prácticas](https://sharpskill.dev/es/technologies/react-next/preguntas-entrevista/react-security-best-practices.md): 22 preguntas, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/es/technologies/react-next/preguntas-entrevista/react-fundamentals