Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/4GeeksAcademy/react-tutorial-exercises

Learn and practice React.js in this interactive tutorial with dozens of react exercises.
https://github.com/4GeeksAcademy/react-tutorial-exercises

exercise learn-reactjs learn-to-code react-autograded react-exercise react-interactive-tutorial react-tutorial reactjs reactjs-exercises reactjs-tutorial

Last synced: about 2 months ago
JSON representation

Learn and practice React.js in this interactive tutorial with dozens of react exercises.

Awesome Lists containing this project

README 

        

# Tutorial y Ejercicios Interactivos de React






> Por [@alesanchezr](https://twitter.com/alesanchezr) y [otros colaboradores](https://github.com/4GeeksAcademy/react-tutorial-exercises/graphs/contributors) de [4Geeks Academy](https://4geeksacademy.co/)



![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.



## Instalación en un clic (recomendado)



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).



> 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`



## Instalación local



Clona el repositorio en tu ambiente local y sigue los siguientes pasos:



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:



```bash

$ npm i learnpack -g

```



2. Descarga los ejercicios **clonando** el proyecto o descargando el zip desde GitHub.



> Nota: Una vez termine la descarga, asegúrate de estar en el directorio correcto (te encontrarás en el subdirectorio "exercises").



3) Inicia los ejercicios ejecutando el siguiente comando desde la raíz del proyecto:



```bash

$ npm i [email protected] -g

$ learnpack plugins:install [email protected]

$ learnpack start

```



## ¿Cómo están organizados los ejercicios?



Cada ejercicio es una pequeña aplicación de React que contiene los siguientes archivos:



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.



> 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.



## Colaboradores 

 

Gracias a estas personas maravillosas ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):



1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribución: (programador) 💻, (idea) 🤔, (build-tests) ⚠️, (pull-request-review) 🤓, (build-tutorial) ✅, (documentación) 📖



2. [Paolo (plucodev)](https://github.com/plucodev), contribución: (bug reports) 🐛, (programador) 💻, (traducción) 🌎



3. [Marco Gómez (marcogonzalo)](https://github.com/marcogonzalo), contribution: (bug reports) 🐛, (traducción) 🌎



Este proyecto sigue la especificación [all-contributors](https://github.com/kentcdodds/all-contributors). ¡Todas las contribuciones son bienvenidas!



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).