react exercise

React.js ejercicio

Este ejercicio está destinado a que se familiarice con los conceptos de reacción fundamental de manera interactiva, así como para que se sienta cómodo en un entorno moderno de nodo.js. Este proyecto se dividirá en múltiples partes. Cada parte cubrirá un concepto fundamental React/Frontend.

La Guía de principiantes de React y la Guía para principiantes para React serán muy beneficiosos para obtener una comprensión completa de los fundamentos React. También será beneficioso ponerse cómodo sumergirse en React Docs y JavaScript Docs como parte de este ejercicio.

Requisitos

• Versión de nodo 8.x
• NPM versión 5.x

Instale el nodo y NPM aquí.

Compruebe si tiene las versiones correctas ejecutando los siguientes comandos en su terminal:

 node -v

 npm -v

Configuración

Instale el React DevTools para depurar fácilmente y vea lo que está sucediendo en su aplicación React.

Es posible que su editor de texto no admita de forma nativa la sintaxis JSX que se usa en este proyecto, pero puede haber complementos para obtener un resaltado de sintaxis adecuado. Por ejemplo, Sublime Text usa el complemento Babel .

Primero, bifurca este repositorio. El botón de la bifurcación en la parte superior derecha. Lo que esto hace es copiar este repositorio a su cuenta. Ahora debe tener un repositorio con el nombre <yourusername>/react-exercise .

Debería verse así (mi nombre de usuario es Davidachang):

Luego, clone este repositorio (haga clic en el botón verde diciendo "clon o descargar", elija http y copie y pegue la ubicación <url> ) y entre en él:

 $ git clone <url>
$ cd react-exercise

Instalar dependencias del proyecto:

 npm install

Una vez hecho esto, ejecute esto para comenzar el desarrollo:

 npm start

Esto comenzará a ejecutar la aplicación y la abrirá automáticamente en http: // localhost: 3000. Cada vez que cambie y guarde el código, se recargará automáticamente. Esto seguirá siendo un proceso en ejecución en su terminal, por lo que deberá abrir una nueva pestaña o ventana para ejecutar otros comandos.

Configuración opcional

Prettier es una herramienta que reforma automáticamente su código para seguir un cierto conjunto de pautas de estilo de codificación. Está configurado para ejecutarse automáticamente antes de cada confirmación. Esto asegura que todo nuestro código siga los mismos estilos de código, aplicando buenas prácticas y minimizando los conflictos.

Definitivamente no es necesario para este ejercicio, pero hay complementos más bonitos que puede instalar para su editor. Vea las instrucciones aquí.

Parte 1

Objetivo: familiarizarse con la sintaxis JSX, la estructura de componentes y los accesorios de aprobación

Tareas:

• Envíe un accesorio shouldDisplayImage en el componente Instructions que determine si muestra o no la pista del logotipo H4I

Parte 2

Objetivo: Familiarícese con las listas de representación y las funciones de matriz de JavaScript

Tareas:

• Envíe un accesorio items al componente Instructions que contiene una lista de cadenas
• Muestra una lista de puntos de bala de todos los items
• Eliminar todos los elementos que tienen menos de 3 caracteres
• Haga que cualquier otro elemento de la lista sea superior
• Haga esto sin usar for o while bucle
• Videos muy útiles para ver:
• Introducción de programación funcional: ¡solo los dos primeros videos son suficientes, aunque hay mucho que aprender del resto de la lista de reproducción y sus otros videos! (Recomiendo suscribirse)
• Listas de representación en React

Parte 3

Objetivo: Familiarícese con el estado del componente

Tareas:

• Crea un nuevo componente Counter
• Establezca su estado inicial de count en 0
• Muestra el valor del recuento actual
• Cree dos botones, uno que incrementa el recuento y otro que lo disminuya. Pista

Parte 4

Objetivo: familiarizarse con la entrada del usuario

Tareas:

• En App.js , realice una entrada y un botón de envío que establezca un estado initialCount
• Validar la entrada del usuario para asegurarse de que sea válido (es un número)
• Pase el estado initialCount como un accesorio en el componente Counter y use este valor como el count inicial en el Counter . Asegúrese de tener en cuenta los tipos al hacer esto, ya que la entrada del usuario es una String y queremos enviar un Number .
• Bonificación: Muestre comentarios de la interfaz de usuario si la entrada del usuario no es válida (un mensaje simple funcionará)
• Nota: Si su botón actualiza la página, agregue un botón Tipo: <button type="button" ...

Parte 5

Objetivo: Comprender la comunicación del estado/accesorios entre los componentes de los hermanos

Tareas:

• Mueva el botón input y envío a su propio componente llamado InitialCountForm que es un niño del componente de la App
• Mantener que la funcionalidad de poder establecer el recuento inicial del contador trabaja
• Potencialmente útil: Reaccione el ciclo de vida de los componentes, específicamente componentewillReceiveProps. Tangencialmente relevante: React Cheat Hoo
• Útil: en movimiento en el árbol

Parte 6

Objetivo: Familiarícese con CSS/SCSS y estilo

Tareas: ¡Nada específico, juega con el estilo!

Nota: Puede crear archivos SCSS y se compilarán automáticamente en archivos CSS cuando guarde, pero necesita importar el archivo CSS en su componente.

Algunos recursos relacionados con el estilo:

• Aprender el diseño
• Una guía completa para Flexbox
• Patrón de bem

Recursos

La guía de principiantes react
MDN - Una reintroducción a JavaScript
La guía para principiantes para reaccionar
React Docs
Guía de estilo JavaScript de Airbnb
Guía de estilo React de Airbnb
Guía de estilo CSS de Airbnb

Sumisión

Cuando haya terminado con todos los pasos, ¡presione sus cambios a su repositorio de GitHub!

Antes de que pueda enviar un PR, tendrá que llevar su rama a una rama remota (la que está en Github, no local).

Verifique que esté en su rama:

 git branch

Si desea asegurarse de que todos sus confirmaciones estén en:

 git log

Presione Q para dejar la pantalla git log .

Empuje sus compromisos a su rama remota:

 git push

La primera vez que hace esto, puede recibir un error ya que su rama remota aún no existe. Por lo general, le dirá el comando correcto para usar:

 git push --set-upstream origin <YOUR_BRANCH_NAME>

Nota: Esto solo debe hacerse la primera vez que presiona una nueva rama. Puede usar solo git push después.

Una vez hecho esto, envíe un correo electrónico a [email protected] con el enlace a su repositorio bifurcado y el nombre de su rama. Necesitaremos estas dos cosas para ver su envío.

 H A C K 4 I M P A C T
                    H A C K 4 I M P A C T
                                        H A C K 4 I M P A C T
                                                            H A C K 4 I M P A C T
                                                                                H A C K 4 I M P A C T