30 Days Of React
1.0.0
Aprenda con Asabeneh uniéndose a la próxima codificación Bootcamp
Autor: Asabeneh Yetayeh
Octubre de 2020
Día 1 >>
| # Día | Temas |
|---|---|
| 00 | Introducción Cómo usar el repositorio Requisitos Configuración |
| 01 | JavaScript Represher |
| 02 | Comenzar a reaccionar |
| 03 | Configuración |
| 04 | Componentes |
| 05 | Accesorios |
| 06 | Lista, mapa y teclas |
| 07 | Componentes de clase |
| 08 | Estados |
| 09 | Representación condicional |
| 10 | Estructura de la carpeta del proyecto React |
| 11 | Eventos |
| 12 | Formularios |
| 13 | Componente controlado y no controlado |
| 14 | Ciclos de vida de componentes |
| 15 | Paquetes de terceros |
| 16 | Componentes de orden superior |
| 17 | Enrutador reaccionado |
| 18 | Retira versus Axios |
| 19 | Proyectos |
| 20 | Proyectos |
| 21 | Manos |
| 22 | Formularios usando gancho |
| 23 | Obtener datos utilizando ganchos |
| 24 | Proyecto usando ganchos |
| 25 | Ganchos personalizados |
| 26 | Contexto |
| 27 | Árbitro |
| 28 | proyecto |
| 29 | Explorar |
| 30 | Conclusiones |
???? Feliz codificación ???
Felicitaciones por decidir participar en 30 días de desafío de programación React. En este desafío, aprenderá todo lo que necesita usar para desarrollar una aplicación React. Al final del desafío, obtendrá un certificado de finalización del desafío de programación de 30 días. En caso de que necesite ayuda o si desea ayudar a otros, puede unirse al grupo Telegram.
Un desafío de 30 días de Offreact es una guía tanto para principiantes como para desarrolladores avanzados de JavaScript y React. Bienvenido a 30 días de React. React es una biblioteca JavaScript. Disfruto usando y enseñando reaccionar y espero que lo hagas también. En este desafío de React 30 días de paso por paso, aprenderá React, que es una de las bibliotecas JavaScript de interfaz de usuario más populares. React puede hacer todo lo que JavaScript puede hacer. React se puede usar para agregar interactividad a los sitios web, para desarrollar aplicaciones móviles, aplicaciones de escritorio, juegos . Creo que aprenderá bastante en los próximos 30 días y sus habilidades de programación y resolución de problemas también mejorará significativamente.
Usaré inglés conversacional y menos jergons para escribir este desafío. El contenido se actualizará continuamente. Si encuentra un error tipográfico o errores de gramática, no se sorprenda porque no hago ninguna prueba lea antes de publicarlo. Te recomendaría que te concentres en el mensaje principal del desafío en lugar del inglés y algunos errores menores. Realmente aprecio si me envías solicitudes de mejora y recuerdas sacar primero del maestro antes de enviar solicitudes de extracción. La mayoría de las imágenes que he usado en este desafío provienen de 30daysofjavaScript Challenge, por lo tanto, es posible que deba cambiar el nombre de los nombres y las carpetas de los archivos 30 días. Si eres bueno en matrices, bucles, funciones, objetos, programación funcional, destrucción y difusión y clase, entonces podrás seguir el desafío correctamente. De lo contrario, le recomiendo que consulte 30daysofjavaScript.
Antes de sumergirse en este curso, puede verificar la revisión de 30 días de React.
Este desafío es fácil de leer, escrito en inglés conversacional, atractivo, motivador y al mismo tiempo, es muy exigente. Necesitas asignar mucho tiempo para terminar este desafío. Si es un aprendiz visual, puede obtener la lección de video en Washera YouTube Channel. Suscríbase el canal, comente y haga preguntas en YouTube Vides y sea proactivo, el autor eventualmente lo notará.
Al autor le gusta escuchar su opinión sobre el desafío, comparta sus pensamientos sobre el desafío 30daysofjavaScript. Puedes dejar tu testimonio en este enlace
Aprenda con Asabeneh uniéndose a la próxima codificación Bootcamp
Para llevarse bien con el desafío, necesita tener lo siguiente:
Estrata este repositorio para apoyar este trabajo y desembolsar el repositorio para crear su propia copia para trabajar.
Siempre debe trabajar directamente desde su copia bifurcada.
# note that an `ssh` link is used here, but an `https` link will work the same
git clone [email protected]:username/30-Days-Of-React.git
cd 30-Days-Of-ReactPara completar los ejercicios diarios, mi sugerencia es crear una rama separada para albergar su carpeta de ejercicio o cualquier otro cambio que realice. Esto mantendrá limpio su rama maestra en todo momento, lo que significa que su maestro siempre será similar al maestro original.
git checkout -b exercise-solutions # `-b` creates the branch if it does not existEn su nueva rama, puede usar archivos/carpetas para estructurar sus soluciones a ejercicios diarios
mkdir -p solutions/day-01 # `-p` helps create nested directories
touch solutions/day-01/level1.js # touch creates a fileComprometa tus soluciones a tu bifurcación
git add solutions/day-01/level1.js
git commit -m " chore: exercise level1 complete "
git push origin exercise-solutions # branch `exercise-solutions` was created earlierEste repositorio se actualizará diariamente durante todo el mes. Cuando el contenido de un nuevo día esté disponible, puede actualizar su copia bifurcada con los pasos a continuación.
# 1. switch to master branch
git checkout master
# 2. check if your local copy has a link to original `...Asabeneh/30-Days-Of-React.git`
git remote -v
# 3. if not, add a link to original, you can choose any name for the link or use `upstream`
git remote add upstream [email protected]:Asabeneh/30-Days-Of-React.git
# 4. check again to confirm link added
git remote -v
# 5. now you can fetch updates from original repo, assuming you named this `upstream`
git fetch upstream
# 6. merge the updates to your local master branch
git merge upstream/master master
# 7. push the merged updates to your Forked copy on GitHub
git push origin masterTenga en cuenta que las actualizaciones solo se aplican a la rama maestra. Si desea actualizar cualquier otra rama, repita los pasos 6-7 con el nombre de la rama. Vea el fragmento a continuación para la rama
exercise-solutions
git merge upstream/master exercise-solutions
git push origin exercise-solutionsCreo que tienes la motivación y un fuerte deseo de ser un desarrollador, una computadora e Internet. Además de ese HTML de nivel básico a intermedio, CSS y JS. Si los tienes, entonces tienes todo para comenzar.
Es posible que no necesite Node.js en este momento, pero es posible que lo necesite para más tarde. Instalar node.js.
Después de descargar doble clic e instalar
Podemos verificar si el nodo está instalado en nuestra máquina local abriendo nuestro terminal de dispositivo o símbolo del sistema.
asabeneh $ node -v
v12.14.0Al hacer este tutorial, estaba usando el nodo versión 12.14.0, pero ahora la versión recomendada de Node.js para descargar es 12.17.0.
Hay muchos navegadores por ahí. Sin embargo, recomiendo Google Chrome.
Instale Google Chrome si aún no tiene uno. Podemos escribir un pequeño código JavaScript en la consola del navegador, pero no usamos la consola del navegador para desarrollar aplicaciones.
Puede abrir la consola de Google Chrome haciendo clic en tres puntos en la esquina superior derecha del navegador, seleccionando más herramientas -> Herramientas para desarrolladores o utilizando un atajo de teclado. Prefiero usar atajos.
Para abrir la consola Chrome con un atajo de teclado. Es bueno conocer el atajo también como desarrollador de JavaScript y React, pasará mucho tiempo en una consola del navegador y no será flojo para abrirlo durante el desarrollo.
Mac
Command+Option+J
Windows/Linux:
Ctl+Shift+J
Después de abrir la consola de Google Chrome, intente explorar los botones marcados. Pasaremos la mayor parte del tiempo en la consola. La consola es el lugar donde va su código JavaScript. El motor Google Console V8 cambia su código JavaScript a código de máquina. Vamos a escribir un código JavaScript en la consola de Google Chrome:
Podemos escribir cualquier código JavaScript en la consola de Google o cualquier consola del navegador. Sin embargo, para este desafío, solo nos centramos en la consola de Google Chrome. Abra la consola usando:
Mac
Command+Option+I
Windows:
Ctl+Shift+IPara escribir nuestro primer código JavaScript, utilizamos una función incorporada console.log () . Pasamos un argumento como datos de entrada, y la función muestra la salida. Pasamos 'hola, mundo' como datos o argumentos de entrada en la función console.log ().
console . log ( 'Hello, World!' ) La función console.log () puede tomar múltiples parámetros separados por coma. La sintaxis se parece de la siguiente manera: console.log (param1, param2, param3)
console . log ( 'Hello' , 'World' , '!' )
console . log ( 'HAPPY' , 'NEW' , 'YEAR' , 2020 )
console . log ( 'Welcome' , 'to' , 30 , 'Days' , 'Of' , 'JavaScript' )Como puede ver en el código de fragmento anterior, console.log () puede tomar múltiples argumentos. Se recomienda usar tantas impresiones de consola.log () para verificar lo que está sucediendo en su código, pero no mantenga todas las pruebas de console.log () en su código para siempre. Haga su vida fácil manteniendo la consola del navegador abierta.
Agregamos comentarios a nuestro código. Los comentarios son muy importantes para hacer que el código sea más legible y dejar comentarios en nuestro código. JavaScript no ejecuta la parte de comentarios de nuestro código.
Ejemplo: comentario de una sola línea
// Este es el primer comentario
// Este es el segundo comentario
// Soy un comentario de una sola línea
Ejemplo: comentario multiline
/* Este es un comentario multilínea
Multiline Comments puede tomar múltiples líneas
JavaScript es el idioma de la web
*/
Los lenguajes de programación son similares a los idiomas humanos. El inglés o muchos otros idiomas usan palabras, frases, oraciones, oraciones compuestas y otros más para transmitir un mensaje significativo. El significado en inglés de la sintaxis es el arreglo de palabras y frases para crear oraciones bien formadas en un idioma . La definición técnica de sintaxis es la estructura de las declaraciones en un lenguaje informático. Los lenguajes de programación tienen sintaxis. JavaScript es un lenguaje de programación y, como otros lenguajes de programación, tiene su propia sintaxis. Si no escribimos una sintaxis que JavaScript entienda, planteará diferentes tipos de errores. Exploraremos diferentes tipos de errores de JavaScript más adelante. Por ahora, veamos errores de sintaxis.
Cometí un error deliberado. Como resultado, la consola aumenta los errores de sintaxis. En realidad, la sintaxis es muy informativa. Informa qué tipo de error se cometió. Al leer la guía de comentarios de errores, podemos corregir la sintaxis y solucionar el problema. El proceso de identificación y eliminación de errores de un programa se llama depuración. Solucionemos los errores:
console . log ( 'Hello, World!' )
console . log ( 'Hello, World!' )Hasta ahora, vimos cómo mostrar texto usando console.log () . Si estamos imprimiendo texto o cadena usando console.log () , el texto debe estar dentro de las citas individuales, cotizaciones dobles o un retroceso de citas. Ejemplo:
console . log ( 'Hello, World!' )
console . log ( 'Hello, World!' )
console . log ( `Hello, World!` ) Ahora, practiquemos más códigos JavaScript usando console.log () en la consola de Google Chrome para los tipos de datos de números. Además del texto, también podemos hacer cálculos matemáticos usando JavaScript. Hagamos los siguientes cálculos simples. La consola puede tomar directamente los argumentos sin la función consola.log () . Sin embargo, se incluye en esta introducción porque la mayor parte de este desafío se llevará a cabo en un editor de texto donde el uso de la función sería obligatorio. Puedes jugar directamente con instrucciones en la consola.
console . log ( 2 + 3 ) // Addition
console . log ( 3 - 2 ) // Subtraction
console . log ( 2 * 3 ) // Multiplication
console . log ( 3 / 2 ) // Division
console . log ( 3 % 2 ) // Modulus - finding remainder
console . log ( 3 ** 2 ) // Exponentiation 3 ** 2 == 3 * 3Podemos escribir nuestros códigos en la consola del navegador, pero no servirá para proyectos más grandes. En un entorno de trabajo real, los desarrolladores usan diferentes editores de código para escribir sus códigos. En este desafío JavaScript de 30 días, utilizaremos el código Visual Studio.
Visual Studio Code es un editor de texto de código abierto muy popular. Recomendaría descargar el código Visual Studio, pero si está a favor de otros editores, no dude en seguir con lo que tiene.
Si instaló el código Visual Studio, comencemos a usarlo.
Abra el código de Visual Studio haciendo doble clic en su icono. Cuando lo abra, obtendrá este tipo de interfaz. Intente interactuar con los iconos etiquetados.
¡Felicidades! Ha completado la configuración que necesita para comenzar con React, pero antes de sumergirnos en React vamos a hacer un actualizador JavaScript. Si se siente muy cómodo con JavaScript, puede omitir el Día 1 JavaScript Flexer. La sección de actualización de JavaScript es vasta y puede llevar más de un día. A partir de mi experiencia, las personas generalmente se atascan en React porque su conocimiento de JavaScript es muy superficial, por lo tanto, llenar ese vacío, todas las características necesarias de JavaScript que se pueden usar en React están cubiertas en la sección de actualización de JavaScript. Hay muchos ejercicios, pero no está obligado a resolverlos. Haga clic aquí si desea omitir JavaScript y saltar directamente a React.
? ¡Felicitaciones! ?
Día 1 >>
