diff --git a/README.es.md b/README.es.md index 286894a..53ad163 100644 --- a/README.es.md +++ b/README.es.md @@ -1,69 +1,157 @@ -# Tutorial y Ejercicios Interactivos de React +
- +# Curso de React.js desde cero y ejercicios interactivos -> Por [@alesanchezr](https://twitter.com/alesanchezr) y [otros colaboradores](https://github.com/4GeeksAcademy/react-tutorial-exercises/graphs/contributors) de [4Geeks Academy](https://4geeksacademy.co/) +[![Certificado por 4Geeks](https://img.shields.io/badge/4Geeks-certified-2563eb)](https://4geeks.com/es/interactive-exercise/curso-react-desde-cero) +[![Autocorregido con LearnPack](https://img.shields.io/badge/LearnPack-autograded-2563eb)](https://4geeks.com/docs/learnpack) +[![Abrir en Codespaces](https://img.shields.io/badge/Open_in-Codespaces-fb5a1f)](https://codespaces.new/?repo=4GeeksAcademy/react-tutorial-exercises) -![last commit](https://img.shields.io/github/last-commit/4geeksacademy/react-tutorial-exercises) -[![build by developers](https://img.shields.io/badge/build_by-Developers-blue)](https://breatheco.de) -[![build by developers](https://img.shields.io/twitter/follow/4geeksacademy?style=social&logo=twitter)](https://twitter.com/4geeksacademy) +
-Puedes encontrar muchos tutoriales interactivos gratuitos en línea, pero casi ninguno sobre React.js. Por eso hemos decidido crear una selección muy completa de ejercicios para las personas interesadas en aprender React.js: ¡Para seniors y juniors! - -¡Te necesitamos! Estos ejercicios se crean y mantienen con colaboradores como tú. Si encuentras algún error o falta de ortografía, contribuye y/o infórmanos. +Este tutorial interactivo de React.js tiene 21 ejercicios y se completa en unas 8 horas. Empiezas renderizando un simple `` con `ReactDOM.render` y terminas creando componentes con props, renderizado condicional, estilos CSS-in-JS y eventos de clic. 20 de los ejercicios se corrigen solos con Jest, y los 21 llevan su propio vídeo explicativo. -## Instalación en un clic (recomendado) +## 📋 Sobre este tutorial + +- **Dificultad**: fácil — no hace falta experiencia previa con React +- **Duración estimada**: 8 horas (unos 20 minutos por ejercicio) +- **Ejercicios**: 21 carpetas, 20 de ellas con tests automáticos +- **Tecnologías**: JavaScript, React.js (JSX, prop-types, marcado de Bootstrap 5) +- **Corrección**: incremental, con Jest 29.7.0 y `react-test-renderer` +- **Vídeo de introducción**: [español](https://www.youtube.com/watch?v=L21NvjxiVmc) · [inglés](https://www.youtube.com/watch?v=yRjmuLAH25s) +- **Idiomas**: [Español](https://github.com/4GeeksAcademy/react-tutorial-exercises/blob/HEAD/README.es.md) · [English](https://github.com/4GeeksAcademy/react-tutorial-exercises/blob/HEAD/README.md) + -Puedes empezar estos ejercicios en pocos segundos haciendo clic en: [Abrir en Codespaces](https://codespaces.new/?repo=4GeeksAcademy/react-tutorial-exercises) (recomendado) o [Abrir en Gitpod](https://gitpod.io#https://github.com/4GeeksAcademy/react-tutorial-exercises.git). +## 🎯 ¿Qué vas a aprender? -> Una vez ya tengas abierto VSCode, los ejercicios de LearnPack deberían empezar automáticamente; si esto no sucede, puedes intentar empezar los ejercicios escribiendo este comando en tu terminal: `$ learnpack start` +- A pintar HTML en el DOM con `ReactDOM.render(qué, dónde)`, entendiéndolo como el sustituto de `innerHTML` en React. +- A [escribir JSX](https://react.dev/learn/writing-markup-with-jsx): mezclar HTML y JavaScript en el mismo fichero, meter variables entre llaves `{ }` y leer propiedades de un objeto. +- A convertir arrays de datos en arrays de HTML con `.map()`, y a entender por qué React te pide una [`key`](https://react.dev/learn/rendering-lists) en cada elemento. +- A ver cómo una función que devuelve HTML se convierte en un componente que puedes usar como etiqueta propia: `` en vez de `BootstrapCard()`. +- A [pasar datos con props](https://react.dev/learn/passing-props-to-a-component) y declarar sus tipos con `propTypes`, para que el mismo componente sirva para Bob Dylan y para Paul McCartney. +- A hacer [renderizado condicional](https://react.dev/learn/conditional-rendering): devolver `null` para ocultar un componente, o traducir una prop `color` a distintas clases de Bootstrap. +- A dar estilos con objetos CSS-in-JS, donde las propiedades van en camelCase (`fontSize`, `borderRadius`) y los valores son cadenas de texto. +- A escuchar acciones del usuario añadiendo `onClick` a una etiqueta JSX. -## Instalación local +## 👀 ¿Qué vas a construir? -Clona el repositorio en tu ambiente local y sigue los siguientes pasos: +Los 21 ejercicios están numerados para que la dificultad suba poco a poco. Esta es la progresión real dentro de la carpeta `exercises/`: -1. Asegúrate de tener el [learnpack-cli](https://www.npmjs.com/package/@learnpack/learnpack) instalado y `node.js` versión 14+. Este es el comando para instalar learnpack-cli: +- **`00` Bienvenida** — una introducción breve, solo de lectura, que explica los cuatro pilares del curso: JSX, componentes, HTML dinámico y módulos de JS. +- **`01` a `01.4` — Bases de JSX (5 ejercicios)**: renderizar `James is 12 years old`, inyectar una variable `name`, construir un bloque `

/

` a partir de un objeto de cliente, montar una tarjeta de Bootstrap con la ficha de Bob Dylan y generar un `
    ` a partir de un array de enlaces. +- **`02` a `02.2` — Arrays y `.map()` (3 ejercicios)**: convertir `['Horse', 'Turtle', 'Elephant', 'Monkey']` en elementos `
  • `, repetirlo partiendo de un array de objetos y pintar un list-group de Bootstrap con seis planetas (Mars, Venus, Jupiter, Earth, Saturn y Neptune). +- **`03` a `03.5` — Componentes y props (6 ejercicios)**: renderizar con funciones, crear tu primer componente, rehacer la tarjeta como ``, hacerla reutilizable con cinco props y, por último, construir desde cero un `` y un ``. +- **`04` a `04.2` — Renderizado condicional (3 ejercicios)**: mostrar u ocultar la alerta con un booleano `show`, alternar entre rojo y amarillo mediante un objeto `colorClasses` y añadir el verde como tercera opción. +- **`05` y `05.1` — Estilos (2 ejercicios)**: aplicar un objeto CSS-in-JS con fuente de 16px, fondo negro y borde amarillo de 1px, y después restilizar un badge con un `border-radius` del 50%. +- **`06` — Eventos (1 ejercicio)**: conectar la función que gestiona el clic a la propiedad `onClick` de un botón y comprobar la consola. -```bash -$ npm i learnpack -g -``` +Dos de los resultados que tendrás que reproducir, tal cual aparecen en los enunciados: -2. Descarga los ejercicios **clonando** el proyecto o descargando el zip desde GitHub. +![Bloque hero de Bootstrap generado por el componente Hero del ejercicio 03.4: un panel gris grande con el titular Welcome to React, el subtítulo React is the most popular rendering library in the world y un botón azul con el texto Go to the officia website](https://raw.githubusercontent.com/4GeeksAcademy/react-tutorial-exercises/master/.learn/assets/03.4-1.png) -> Nota: Una vez termine la descarga, asegúrate de estar en el directorio correcto (te encontrarás en el subdirectorio "exercises"). +![Tres alertas de Bootstrap apiladas creadas por el componente Alert del ejercicio 04.2: una alerta roja que dice OMG! Something really bad has happended!, una amarilla que dice Well, it is not that bad after all! y una verde que dice I am supposed to be green](https://raw.githubusercontent.com/4GeeksAcademy/react-tutorial-exercises/master/.learn/assets/04.2-1.png) -3) Inicia los ejercicios ejecutando el siguiente comando desde la raíz del proyecto: +## 🎓 ¿Qué necesitas saber antes de empezar? -```bash -$ npm i jest@24.8.0 -g -$ learnpack plugins:install learnpack-react@0.0.17 -$ learnpack start -``` - +- **HTML**: etiquetas, atributos y anidación. Varios ejercicios te piden reproducir marcado de Bootstrap 5 como [tarjetas](https://getbootstrap.com/docs/5.0/components/card/), [alertas](https://getbootstrap.com/docs/5.0/components/alerts/) y [list groups](https://getbootstrap.com/docs/5.0/components/list-group/). +- **Fundamentos de JavaScript**: variables, objetos, arrays, funciones flecha y el operador punto. A partir del ejercicio `02` usarás `.map()` en casi todos los ficheros. +- **React**: nada. El tutorial está marcado como fácil y arranca desde la primera llamada a `ReactDOM.render`. +- **Herramientas**: nada si abres el repositorio en un editor en la nube. Para ejecutarlo en local necesitas [Node.js](https://nodejs.org) y la CLI de LearnPack. + +## ✅ ¿Cómo funciona la corrección automática? + +La corrección es *incremental*: cada ejercicio se valida por separado, así que siempre sabes por dónde vas. Cada carpeta de ejercicio con código contiene los mismos tres ficheros más el enunciado: + +- **`app.jsx`** — el único fichero que debes tocar. +- **`tests.js`** — la batería de tests de Jest de ese ejercicio. Está en 20 de las 21 carpetas; `00-welcome` es una introducción de solo lectura y no lleva tests. +- **`solution.hide.jsx`** — una solución que funciona, escondida para que no te estorbe mientras trabajas. +- **`README.md` y `README.es.md`** — el enunciado en los dos idiomas, cada uno con su vídeo de YouTube. -## ¿Cómo están organizados los ejercicios? +Los tests se ejecutan con Jest y `react-test-renderer`: hacen un mock de `ReactDOM.render`, capturan lo que le has pasado y comparan el árbol renderizado con un snapshot embebido, así que tienen que coincidir tanto la estructura como el texto. Por eso algunos tests comprueban además que `ReactDOM.render` se haya llamado exactamente una vez. -Cada ejercicio es una pequeña aplicación de React que contiene los siguientes archivos: +> 💡 La corrección es deliberadamente estricta con la salida esperada. Toma un test en rojo como una pista de qué sigue siendo distinto, no como un juicio sobre tu código, y tira del vídeo del ejercicio cuando te atasques. -1. **app.js:** representa el archivo de entrada para el ejercicio. -2. **README.md:** contiene las instrucciones del ejercicio. -3. **test.js:** no tienes que abrir este archivo, contiene el script de prueba para el ejercicio. +## 💡 ¿Qué errores conviene evitar? -> Nota: Estos ejercicios tienen calificación automática. Los tests son muy rígidos y estrictos, mi recomendación es que no prestes demasiada atención a los tests y los uses solo como una sugerencia o podrías frustrarte. +- **Escribir `class` en vez de `className`**. En JSX el atributo es `className`; casi todo el mundo tropieza con esto en los ejercicios de la tarjeta y del list-group. +- **Olvidar la prop `key`** al construir listas con `.map()`. React te avisará por consola. Aquí basta con usar el segundo parámetro de la función de mapeo (el índice). +- **Llamar a un componente con paréntesis**. Cuando `PrintHello` ya es un componente se usa ``, no `PrintHello()`. +- **Perder las llaves**. `James is age years old` imprime la palabra literal; `{ age }` imprime el valor. +- **Nombrar componentes en minúscula**. Los componentes van en mayúscula a propósito: JSX interpreta una etiqueta en minúscula como un elemento HTML normal. +- **Usar sintaxis CSS dentro del objeto de estilos**. Es `{ fontSize: "16px" }`, no `{ "font-size": 16 }`: claves en camelCase y valores como texto. +- **Saltarse `propTypes`**. Desde el ejercicio `03.3` se espera que declares las props que recibes, por ejemplo `Alert.propTypes = { text: PropTypes.string }`. +- **Renderizar el mismo componente dos veces**. Una sola llamada a `ReactDOM.render` por ejercicio; los tests las cuentan. -## Colaboradores - -Gracias a estas personas maravillosas ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)): +## ❓ Preguntas frecuentes -1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribución: (programador) 💻, (idea) 🤔, (build-tests) ⚠️, (pull-request-review) 🤓, (build-tutorial) ✅, (documentación) 📖 +### ¿Cuánto se tarda en hacer este tutorial de React? -2. [Paolo (plucodev)](https://github.com/plucodev), contribución: (bug reports) 🐛, (programador) 💻, (traducción) 🌎 +El paquete está estimado en 8 horas. Repartidas entre 21 ejercicios salen unos 20 minutos por ejercicio, y los primeros de JSX son bastante más cortos que eso. Como la corrección es incremental, puedes parar en cualquier ejercicio y retomarlo más adelante. -3. [Marco Gómez (marcogonzalo)](https://github.com/marcogonzalo), contribution: (bug reports) 🐛, (traducción) 🌎 +### ¿Hace falta saber JavaScript antes de empezar con React? -Este proyecto sigue la especificación [all-contributors](https://github.com/kentcdodds/all-contributors). ¡Todas las contribuciones son bienvenidas! +Sí, lo básico. Conviene manejar variables, objetos, arrays, funciones flecha y sobre todo `.map()`, que aparece desde el ejercicio `02`. No necesitas clases, promesas ni async/await en ninguno de los 21 ejercicios. -Este y otros ejercicios son usados para [aprender a programar](https://4geeksacademy.com/es/aprender-a-programar/aprender-a-programar-desde-cero) por parte de los alumnos de 4Geeks Academy [Coding Bootcamp](https://4geeksacademy.com/us/coding-bootcamp) realizado por [Alejandro Sánchez](https://twitter.com/alesanchezr) y muchos otros contribuyentes. Conoce más sobre nuestros [Cursos de Programación](https://4geeksacademy.com/es/curso-de-programacion-desde-cero?lang=es) para convertirte en [Full Stack Developer](https://4geeksacademy.com/es/coding-bootcamps/desarrollador-full-stack/?lang=es), o nuestro [Data Science Bootcamp](https://4geeksacademy.com/es/coding-bootcamps/curso-datascience-machine-learning). +### ¿Este tutorial cubre los Hooks y el estado? + +No. Los 21 ejercicios cubren renderizado, JSX, listas y keys, componentes de función, props con prop-types, renderizado condicional, estilos CSS-in-JS y eventos. En el paquete no hay `useState`, `useEffect` ni ningún otro hook, así que cuenta con otro tutorial aparte para el manejo de estado cuando termines. + +### ¿Sigue mereciendo la pena con el React actual? + +Los conceptos sí: JSX, `.map()` con keys, componentes de función, props y renderizado condicional funcionan igual en el React de hoy. Lo único que ha cambiado es el punto de entrada: estos ejercicios usan `ReactDOM.render(qué, dónde)`, mientras que desde React 18 las aplicaciones se montan con [`createRoot`](https://react.dev/reference/react-dom/client/createRoot). Todo lo que escribes dentro de los componentes se aprovecha tal cual. + +### ¿Incluye soluciones y explicaciones en vídeo? + +Sí. Los 21 ejercicios traen un vídeo de YouTube enlazado desde su propio README, y los 20 ejercicios con código incluyen un fichero `solution.hide.jsx` con una solución que funciona, para que compares enfoques después de resolverlos por tu cuenta. + +### ¿Es gratis? ¿Puedo republicar los ejercicios? + +Acceder al tutorial y ejecutarlo no cuesta nada, y el código que escribas mientras lo resuelves es tuyo. Redistribuir el material es otra cosa: el fichero [LICENSE.md](https://github.com/4GeeksAcademy/react-tutorial-exercises/blob/HEAD/LICENSE.md) se reserva todos los derechos de propiedad intelectual y prohíbe expresamente republicar, vender, sublicenciar, duplicar o redistribuir el contenido, así que no es un paquete de código abierto. + + +## 📚 Tutoriales interactivos relacionados + +- [Aprende lo básico de HTML interactivamente](https://4geeks.com/es/interactive-exercise/html-exercises-es) +- [Tutorial para principiantes de Javascript (interactivo)](https://4geeks.com/es/interactive-exercise/ejercicios-javascript-para-principiantes) + +## 🚀 Cómo empezar + +Lo más rápido es abrir el repositorio en un editor en la nube, con todo preinstalado: + +1. Haz clic en [Abrir en Codespaces](https://codespaces.new/?repo=4GeeksAcademy/react-tutorial-exercises) (recomendado) o en [Abrir en Gitpod](https://gitpod.io#https://github.com/4GeeksAcademy/react-tutorial-exercises.git). +2. Espera a que el contenedor termine de instalar LearnPack y su plugin de React. +3. Los ejercicios deberían abrirse solos. Si no ocurre, ejecuta `learnpack start` en la terminal. + +## 💻 Instalación local + +1. Instala [Node.js](https://nodejs.org). El contenedor de desarrollo de este repositorio usa Node 22. +2. Clona este repositorio o descárgalo en zip y sitúate en la raíz del proyecto, donde está la carpeta `exercises`. +3. Instala la CLI y el plugin de React, y arranca el tutorial: + +```bash +npm i jest@29.7.0 jest-environment-jsdom@29.7.0 -g +npm i @learnpack/learnpack -g +learnpack plugins:install @learnpack/react +learnpack start +``` + +Tienes más detalle en la [guía rápida de LearnPack para estudiantes](https://4geeks.com/docs/learnpack/quickstart-for-learners#how-to-download-and-run-learnpack-tutorial-in-your-local-computer). + +## 📝 Cómo están organizados los ejercicios + +Cada ejercicio vive en su propia carpeta dentro de [`exercises/`](https://github.com/4GeeksAcademy/react-tutorial-exercises/tree/HEAD/exercises), con su número y su tema en el nombre, por ejemplo `03.4-hero-component`. Dentro encontrarás `app.jsx` (tu fichero de trabajo), `README.md` y `README.es.md` (el enunciado y el vídeo), `tests.js` (el corrector, no hace falta abrirlo) y `solution.hide.jsx`. Las imágenes compartidas están en `.learn/assets`. + +## 🤝 Colaboradores + +Gracias a estas personas maravillosas ([leyenda de emojis](https://github.com/kentcdodds/all-contributors#emoji-key)): + +1. [Alejandro Sánchez (alesanchezr)](https://github.com/alesanchezr) — programación 💻, idea 🤔, tests ⚠️, revisión de pull requests 👀, creación del tutorial ✅, documentación 📖 +2. [Paolo Lucano (plucodev)](https://github.com/plucodev) — reporte de bugs 🐛, programación 💻, traducción 🌎 +3. [Marco Gómez (marcogonzalo)](https://github.com/marcogonzalo) — reporte de bugs 🐛, traducción 🌎 + +Este proyecto sigue la especificación [all-contributors](https://github.com/kentcdodds/all-contributors). Toda contribución es bienvenida: si detectas un fallo o una errata, [abre un issue](https://github.com/4GeeksAcademy/react-tutorial-exercises/issues) o manda un pull request. Puedes ver [todas las personas que han contribuido](https://github.com/4GeeksAcademy/react-tutorial-exercises/graphs/contributors). + +Este tutorial lo crea y lo mantiene [4Geeks Academy](https://4geeksacademy.com/es/coding-bootcamps/desarrollador-full-stack/) junto a su comunidad. + diff --git a/README.md b/README.md index 1a1e1c9..06ffe04 100644 --- a/README.md +++ b/README.md @@ -1,69 +1,157 @@ -# React Interactive Tutorial & Exercises +
    - +# Learn React.js Tutorial and Interactive Exercises -> By [@alesanchezr](https://twitter.com/alesanchezr) and [other contributors](https://github.com/4GeeksAcademy/react-tutorial-exercises/graphs/contributors) at [4Geeks Academy](https://4geeksacademy.co/) +[![Certified by 4Geeks](https://img.shields.io/badge/4Geeks-certified-2563eb)](https://4geeks.com/en/interactive-exercise/react-js-tutorial-exercises) +[![Autograded with LearnPack](https://img.shields.io/badge/LearnPack-autograded-2563eb)](https://4geeks.com/docs/learnpack) +[![Open in Codespaces](https://img.shields.io/badge/Open_in-Codespaces-fb5a1f)](https://codespaces.new/?repo=4GeeksAcademy/react-tutorial-exercises) -![last commit](https://img.shields.io/github/last-commit/4geeksacademy/react-tutorial-exercises) -[![build by developers](https://img.shields.io/badge/build_by-Developers-blue)](https://breatheco.de) -[![build by developers](https://img.shields.io/twitter/follow/4geeksacademy?style=social&logo=twitter)](https://twitter.com/4geeksacademy) +
    + + +This interactive React.js tutorial contains 21 exercises and takes around 8 hours to complete. You start by rendering a single `` with `ReactDOM.render`, and you finish building components with props, conditional rendering, CSS-in-JS styles and click events. 20 of the exercises are graded automatically by Jest, and each of the 21 comes with its own video walkthrough. -*Estas instrucciones [están disponibles en 🇪🇸 español](https://github.com/4GeeksAcademy/react-tutorial-exercises/blob/master/README.es.md) :es:* + +## 📋 About this tutorial + +- **Difficulty**: Easy — no previous React experience required +- **Estimated duration**: 8 hours (about 20 minutes per exercise) +- **Exercises**: 21 folders, 20 of them with automatic tests +- **Technologies**: JavaScript, React.js (JSX, prop-types, Bootstrap 5 markup) +- **Grading**: Incremental, powered by Jest 29.7.0 and `react-test-renderer` +- **Intro video**: [English](https://www.youtube.com/watch?v=yRjmuLAH25s) · [Español](https://www.youtube.com/watch?v=L21NvjxiVmc) +- **Languages**: [English](https://github.com/4GeeksAcademy/react-tutorial-exercises/blob/HEAD/README.md) · [Español](https://github.com/4GeeksAcademy/react-tutorial-exercises/blob/HEAD/README.es.md) -You can find lots of free interactive/autograded tutorials online, but there are very few about React.js. That's why we decided to create a comprehensive selection of exercises for developers who are interested in learning React.js. +## 🎯 What will you learn? -These exercises can be done by both junior and senior developers and are intended to be built through collaboration. We need your help! +- How to render HTML into the DOM with `ReactDOM.render(what, where)`, treating it as the React replacement for `innerHTML`. +- How to [write JSX](https://react.dev/learn/writing-markup-with-jsx): mixing HTML and JavaScript in one file, injecting variables with curly brackets `{ }` and reading properties from objects. +- How to turn arrays of data into arrays of HTML with `.map()`, and why React asks you for a [`key`](https://react.dev/learn/rendering-lists) on every item. +- How a plain function that returns HTML becomes a component you can call as a custom tag: `` instead of `BootstrapCard()`. +- How to [pass data with props](https://react.dev/learn/passing-props-to-a-component) and declare their types with `propTypes`, so the same component works for Bob Dylan and Paul McCartney. +- How to do [conditional rendering](https://react.dev/learn/conditional-rendering): returning `null` to hide a component, or mapping a `color` prop to different Bootstrap classes. +- How to style components with CSS-in-JS objects, where properties are camelCase (`fontSize`, `borderRadius`) and values are strings. +- How to listen to user events by attaching `onClick` to a JSX tag. -If you find any bugs or spelling issues, please contribute and report them, and we will correct them. +## 👀 What will you build? - -## One click installation (recommended): +The 21 exercises are numbered so the difficulty rises in small steps. This is the real progression inside the `exercises/` folder: -You can open these exercises in just a few seconds by clicking: [Open in Codespaces](https://codespaces.new/?repo=4GeeksAcademy/react-tutorial-exercises) (recommended) or [Open in Gitpod](https://gitpod.io#https://github.com/4GeeksAcademy/react-tutorial-exercises.git). +- **`00` Welcome** — a short read-only intro that explains the four pillars of the course: JSX, components, dynamic HTML and JS modules. +- **`01` to `01.4` — JSX basics (5 exercises)**: render `James is 12 years old`, inject a `name` variable, build an `

    /

    ` block from a customer object, assemble a Bootstrap card for Bob Dylan, and produce a `
      ` from an array of links. +- **`02` to `02.2` — Arrays and `.map()` (3 exercises)**: map `['Horse', 'Turtle', 'Elephant', 'Monkey']` into `
    • ` elements, do the same starting from an array of objects, and render a Bootstrap list-group with six planets (Mars, Venus, Jupiter, Earth, Saturn and Neptune). +- **`03` to `03.5` — Components and props (6 exercises)**: render with functions, create your first component, rebuild the Bootstrap card as ``, make it reusable through five props, then build a `` and an `` component from scratch. +- **`04` to `04.2` — Conditional rendering (3 exercises)**: show or hide the alert with a `show` boolean, switch between red and yellow using a `colorClasses` lookup object, and add green as a third option. +- **`05` and `05.1` — Styles (2 exercises)**: apply a CSS-in-JS object with a 16px font, black background and 1px yellow border, then restyle a badge with a `border-radius` of 50%. +- **`06` — Events (1 exercise)**: wire the click handler function to the `onClick` property of a button and watch the console. -> Once you have VSCode open, the LearnPack exercises should start automatically. If exercises don't run automatically, you can try typing on your terminal: `$ learnpack start` +Two of the results you are expected to reproduce, taken straight from the exercise instructions: -## Local installation: +![Bootstrap hero unit rendered by the Hero component in exercise 03.4, showing a large grey panel with the headline Welcome to React, the subtitle React is the most popular rendering library in the world, and a blue button labelled Go to the officia website](https://raw.githubusercontent.com/4GeeksAcademy/react-tutorial-exercises/master/.learn/assets/03.4-1.png) -Clone the repository in your local environment and follow the steps below: +![Three stacked Bootstrap alerts produced by the Alert component in exercise 04.2: a red alert reading OMG! Something really bad has happended!, a yellow alert reading Well, it is not that bad after all!, and a green alert reading I am supposed to be green](https://raw.githubusercontent.com/4GeeksAcademy/react-tutorial-exercises/master/.learn/assets/04.2-1.png) -1. Make sure you have [installed learnpack locally](https://4geeks.com/docs/learnpack/quickstart-for-learners#how-to-use-learnpack-locally). -2. Download the React exercises by **cloning** the project or downloading the zip from GitHub. +## 🎓 What do you need before starting? -> Note: Once you finish downloading, make sure you are in the right folder (you will find the subdirectory "exercises"). +- **HTML**: tags, attributes and nesting. Several exercises ask you to reproduce Bootstrap 5 markup such as [cards](https://getbootstrap.com/docs/5.0/components/card/), [alerts](https://getbootstrap.com/docs/5.0/components/alerts/) and [list groups](https://getbootstrap.com/docs/5.0/components/list-group/). +- **JavaScript fundamentals**: variables, objects, arrays, arrow functions and the dot operator. From exercise `02` onwards you use `.map()` in almost every file. +- **React**: nothing. The tutorial is rated Easy and starts from the very first `ReactDOM.render` call. +- **Tooling**: nothing at all if you open the repository in a cloud editor. For a local run you need [Node.js](https://nodejs.org) and the LearnPack CLI. -3) Start the tutorial/exercises by running the following command from the root of the project: +## ✅ How does the automatic grading work? -```bash -$ npm i @learnpack/learnpack -g -$ learnpack start -``` +Grading is set to *incremental*: each exercise is validated on its own, so you always know exactly where you stand. Every coding exercise folder holds the same three files plus the instructions: - +- **`app.jsx`** — the only file you are meant to edit. +- **`tests.js`** — the Jest test suite for that exercise. 20 of the 21 folders include one; `00-welcome` is a read-only intro and has none. +- **`solution.hide.jsx`** — a working solution kept out of your way while you work. +- **`README.md` and `README.es.md`** — the instructions in both languages, each with a YouTube walkthrough. + +The tests run on Jest with `react-test-renderer`. They mock `ReactDOM.render`, capture what you passed to it and compare the rendered tree against an inline snapshot, so both the structure and the text have to match. That is also why some tests check that `ReactDOM.render` was called exactly once. + +> 💡 The grading is deliberately strict about the expected output. Treat a red test as a hint about what is still different, not as a verdict on your code, and use the video walkthrough when you get stuck. + +## 💡 What mistakes should you avoid? + +- **Writing `class` instead of `className`**. In JSX the attribute is `className`; this trips up almost everyone in the card and list-group exercises. +- **Forgetting the `key` prop** when you build lists with `.map()`. React will warn you in the console. The second parameter of the mapping function (the index) is enough here. +- **Calling a component with parentheses**. Once `PrintHello` is a component you use ``, not `PrintHello()`. +- **Losing the curly brackets**. `James is age years old` prints the literal word; `{ age }` prints the value. +- **Lowercase component names**. Components are capitalised on purpose — JSX treats a lowercase tag as a plain HTML element. +- **Using CSS syntax inside a style object**. It is `{ fontSize: "16px" }`, not `{ "font-size": 16 }`: camelCase keys and string values. +- **Skipping `propTypes`**. Exercises `03.3` onwards expect you to declare the props you receive, for example `Alert.propTypes = { text: PropTypes.string }`. +- **Rendering the same component twice**. Add one `ReactDOM.render` call per exercise; the tests count them. + +## ❓ Frequently asked questions + +### How long does it take to complete this React tutorial? + +The package is estimated at 8 hours. Spread over 21 exercises that is roughly 20 minutes each, and the early JSX exercises are much shorter than that. Because grading is incremental you can stop after any exercise and pick it up later. + +### Do I need to know JavaScript before starting React? + +Yes, the basics. You should be comfortable with variables, objects, arrays, arrow functions and especially `.map()`, which appears from exercise `02` onwards. You do not need classes, promises or async/await for any of the 21 exercises. -## How are the exercises organized? +### Does this tutorial cover React Hooks and state? -Each exercise is a small React application containing the following files: +No. The 21 exercises cover rendering, JSX, lists and keys, function components, props with prop-types, conditional rendering, CSS-in-JS styles and event listeners. There is no `useState`, `useEffect` or any other hook in the package, so plan a separate tutorial for state management once you finish. -1. **app.js:** represents the entry file for the exercise. -2. **README.md:** contains exercise instructions. -3. **test.js:** you don't have to open this file, it contains the testing script for the exercise. +### Is this tutorial still useful with modern React? -> Note: The exercises have automatic grading, but it's very rigid and strict, my recommendation is to not take the tests too serious and use them only as a suggestion, or you may get frustrated. +The concepts are: JSX, `.map()` with keys, function components, props and conditional rendering all work exactly the same in current React. The one thing that has moved on is the entry point — these exercises use `ReactDOM.render(what, where)`, while React 18 and later mount apps with [`createRoot`](https://react.dev/reference/react-dom/client/createRoot). Everything you write inside the components carries over unchanged. -## Contributors +### Are the solutions and video explanations included? -Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)): +Yes. All 21 exercises ship with a YouTube walkthrough linked from their own README, and the 20 coding exercises each include a `solution.hide.jsx` file with a working answer, so you can compare approaches after solving them yourself. -1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribution: (coder) 💻, (idea) 🤔, (build-tests) ⚠️, (pull-request-review) 👀, (build-tutorial) ✅, (documentation) 📖 +### Is it free, and can I republish the exercises? -2. [Paolo (plucodev)](https://github.com/plucodev), contribution: (bug reports) 🐛, (coder) 💻, (translation) 🌎 +Accessing and running the tutorial costs nothing, and the code you write while solving it is yours. Redistributing the material is a different matter: [LICENSE.md](https://github.com/4GeeksAcademy/react-tutorial-exercises/blob/HEAD/LICENSE.md) reserves all intellectual property rights and explicitly forbids republishing, selling, sub-licensing, duplicating or redistributing the content, so this is not an open source package. -3. [Marco Gómez (marcogonzalo)](https://github.com/marcogonzalo), contribution: (bug reports) 🐛, (translation) 🌎 + +## 📚 Related interactive tutorials + +- [Learn the basics of HTML Interactively](https://4geeks.com/en/interactive-exercise/html-exercises) +- [Javascript Beginner Tutorial (interactive)](https://4geeks.com/en/interactive-exercise/javascript-beginner-exercises) + +## 🚀 How to start + +The fastest option is opening the repository in a cloud editor, with everything pre-installed: + +1. Click [Open in Codespaces](https://codespaces.new/?repo=4GeeksAcademy/react-tutorial-exercises) (recommended) or [Open in Gitpod](https://gitpod.io#https://github.com/4GeeksAcademy/react-tutorial-exercises.git). +2. Wait for the container to finish installing LearnPack and its React plugin. +3. The exercises should open automatically. If they don't, run `learnpack start` in the terminal. + +## 💻 Local installation + +1. Install [Node.js](https://nodejs.org). The dev container for this repository uses Node 22. +2. Clone this repository or download it as a zip and open the project root, where the `exercises` folder lives. +3. Install the CLI and the React plugin, then start the tutorial: + +```bash +npm i jest@29.7.0 jest-environment-jsdom@29.7.0 -g +npm i @learnpack/learnpack -g +learnpack plugins:install @learnpack/react +learnpack start +``` + +More detail in the [LearnPack quickstart for learners](https://4geeks.com/docs/learnpack/quickstart-for-learners#how-to-download-and-run-learnpack-tutorial-in-your-local-computer). + +## 📝 How the exercises are organized +Every exercise lives in its own folder inside [`exercises/`](https://github.com/4GeeksAcademy/react-tutorial-exercises/tree/HEAD/exercises), named with its number and topic, for example `03.4-hero-component`. Inside you will find `app.jsx` (your working file), `README.md` and `README.es.md` (instructions plus the video), `tests.js` (the grader, no need to open it) and `solution.hide.jsx`. Shared images live in `.learn/assets`. -This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind are welcome! +## 🤝 Contributors -This and many other exercises are built by students as part of the 4Geeks Academy [Coding Bootcamp](https://4geeksacademy.com/us/coding-bootcamp) by [Alejandro Sánchez](https://twitter.com/alesanchezr) and many other contributors. Find out more about our [Full Stack Developer Course](https://4geeksacademy.com/us/coding-bootcamps/part-time-full-stack-developer), and [Data Science Bootcamp](https://4geeksacademy.com/us/coding-bootcamps/datascience-machine-learning). +Thanks to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)): + +1. [Alejandro Sánchez (alesanchezr)](https://github.com/alesanchezr) — coder 💻, idea 🤔, build-tests ⚠️, pull-request review 👀, build-tutorial ✅, documentation 📖 +2. [Paolo Lucano (plucodev)](https://github.com/plucodev) — bug reports 🐛, coder 💻, translation 🌎 +3. [Marco Gómez (marcogonzalo)](https://github.com/marcogonzalo) — bug reports 🐛, translation 🌎 + +This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind are welcome: if you spot a bug or a typo, [open an issue](https://github.com/4GeeksAcademy/react-tutorial-exercises/issues) or send a pull request. See [everyone who has contributed](https://github.com/4GeeksAcademy/react-tutorial-exercises/graphs/contributors). + +This tutorial is built and maintained by [4Geeks Academy](https://4geeksacademy.com/us/coding-bootcamps/part-time-full-stack-developer) and its community. +