Hola mundo

El más pequeño de los ejemplos de React se ve así:

ReactDOM
  .createRoot(document.getElementById('root'))
  .render(<h1>Hello, world!</h1>);

Este muestra un encabezado con el texto “Hello, world!” en la página.

Try it on CodePen

Dale click al enlace de arriba para abrir un editor online. Tómate la libertad de hacer cambios, y mira cómo afectan el resultado. La mayoría de páginas en esta guía tendrán ejemplos que puedes editar en vivo como éste.

¿Cómo leer esta guía?

En esta guía, examinaremos los componentes básicos de las aplicaciones React: elementos y componentes. Una vez los domines, podrás crear aplicaciones complejas a partir de pequeñas piezas reutilizables.

Tip

Esta guía está diseñada para personas que prefieren aprender los conceptos paso a paso. Si prefieres aprender mediante práctica, revisa nuestro tutorial práctico. Encontrarás que esta guía y el tutorial se complementan el uno al otro.

Este es el primer capítulo en una guía paso a paso sobre los principales conceptos de React. Puedes encontrar una lista de todos los capítulos en la barra de navegación lateral. Si estás leyendo esto desde un dispositivo móvil, puedes acceder a la navegación presionando el botón en la esquina inferior derecha de tu pantalla.

Cada capítulo en esta guía se construye con base en el conocimiento presentado en capítulos anteriores. Puedes aprender la mayoría de React leyendo la guía de conceptos “Conceptos Principales” en el orden que aparecen en la barra lateral. Por ejemplo, “Introducción a JSX” es el siguiente capítulo después de este.

Suposiciones del nivel de conocimiento

React es una biblioteca Javascript, y vamos a asumir que tienes un entendimiento básico del lenguaje Javascript. Si no te sientes muy seguro, te recomendamos hacer un tutorial de Javascript para comprobar tu nivel de conocimiento y permitirte seguir adelante con esta guía sin perderte. Te debería tomar entre 30 minutos y una hora, pero como resultado, no tendrás que sentir que estás aprendiendo React y JavaScript al mismo tiempo.

Nota

Esta guía ocasionalmente usa la nueva sintaxis de JavaScript en los ejemplos. Si no has trabajado con JavaScript en los últimos años, estos tres puntos son un buen resumen.

¡Empecemos!

Sigue bajando, y encontrarás el link al siguiente capítulo de esta guía justo antes del pie de la página.