Image for post
Image for post

If you want to read the English version of this post, click here.

Ahora que hemos aprendido los conceptos básicos, es hora de hacer cosas reales. En este ejercicio, configuraremos una aplicación hecha en React desde cero, y luego implementaremos el código del juego Connect Four sobre ella.

Image for post
Image for post
Este es el juego que vamos a implementar en este post: Connect Four

Siguiendo este tutorial paso a paso, aprenderemos sobre React y TypeScript mientras programamos una aplicación de la vida real. Estas preparada/o? 👾

Configuracion Inicial

Nota: Si quieres empezar con el código del juego directamente, puedes omitir esta sección y abrir la aplicación inicial (begin) de este Ejercicio, la cual se encuentra en el repositorio de GitHub de este training. …


Image for post
Image for post

Si quieres leer la versión en Español de este artículo, haz click aqui.

Now that we have covered the basics, it’s time to make things real. In this exercise, we will set up a React application from scratch, and then we will implement the Connect Four game on top of it.

Image for post
Image for post
This is the game we are going to build in this post: Connect four

By following this step-by-step walkthrough, you will learn about React and TypeScript while you code a real-life application. Are you ready? 👾

Initial setup

Note: If you want to start right away with the game logic, you can skip this section and open the begin application of this Exercise, located in this training’s GitHub repository. …


Image for post
Image for post

If you want to read the English version of this post, click here.

En este ejercicio, presentaremos las dos librerias principales que utilizaremos para desarrollar aplicaciones web: React y TypeScript. Para esto, veremos ejemplos pequeños pero concretos que nos ayudarán a comprender los conceptos principales, de a uno a la vez.

Pero antes de comenzar a codear, hay que entender lo que vamos a hacer. Pensa en el diseño de alguna interfaz de usuario (UI), la más común que hayas visto y preguntate:

  1. Si tengo que hacer esto, ¿por dónde deberia empezar? ¿Tengo que hacer todo de cero? …


Image for post
Image for post

Si quieres leer la versión en Español de este artículo, haz click aqui.

In this exercise, we will introduce the two core libraries that we will use to develop web applications: React and TypeScript. For this, we’ll go through small but concrete examples that will help us to understand the main concepts, one at a time.

But before starting to code, we need to understand what we are going to do. Think about the most common user interface (UI) layout you’ve seen, and ask yourself:

  1. If I have to make this, where should I start? Do I have to do all by myself? …


Image for post
Image for post

Si quieres leer la versión en Español de este artículo, haz click aqui.

This training intends to introduce web development using the ReactJS ecosystem to any developer. It consists of different exercises that focus on specific topics that will be learned while coding.

Key takeaways:

By reading this training, you will learn:

  • The basics of web development today (2019/2020)
  • How to use React and TypeScript to create web applications
  • How to store & manage the state of your web application with React and Redux
  • How to build optimized, production-ready applications with zero-configuration.

Pre-requisites

Before going any further, please install in your laptop:


Image for post
Image for post

If you want to read the English version of this post, click here.

El objetivo de esta capacitación es introducir al desarrollo web mediante el ecosistema ReactJS a cualquier desarrollador/a. Consiste en diferentes ejercicios que se centran en temas específicos que se aprenderán mientras se programa.

Key takeaways:

Al leer esta capacitación, los participantes aprenderán sobre:

  • Los fundamentos del desarrollo web actualmente (2020)
  • Cómo usar React y TypeScript para crear aplicaciones web
  • Cómo almacenar y administrar el estado de su aplicación web con React y Redux
  • Cómo construir aplicaciones optimizadas, listas para producción con cero configuración.

Prerequisitos

Quien participe deberá instalar:


Image for post
Image for post

Si quieres leer la versión en Español de este artículo, haz click aqui.

With Azure Logic Apps, you can quickly build scalable workflows that integrate apps and data of several cloud services and on-premises systems. This post is the second delivery of a series of posts about Azure Logic Apps:

  1. Intro of Azure Logic Apps.
  2. Easy connecting with know services and send automated replies to emails, based on customized criteria defined by you.
  3. Automating repetitive job tasks to increase your productivity.
  4. Connecting to different Public Social APIs to develop a piece of your app.

In this post, you will learn how to develop a fully-working application in just a couple of minutes. …


Image for post
Image for post

If you want to read the English version of this article, click here.

Con Azure Logic Apps uno puede construir rápidamente Workflows escalables para integrar aplicaciones y datos de múltiples servicios en la nube o sistemas on-premise. Este post es la segunda entrega de una serie de posts sobre Azure Logic Apps:

  1. Introducción a Azure Logic Apps.
  2. Automatiza el envío de emails y respuestas en unos pocos pasos, basado en criterios customizables.
  3. Cómo automatizar las tareas repetitivas de tu trabajo e incrementa tu productividad.
  4. Cómo conectarse a diferentes APIs sociales para desarrollar una pieza de tu aplicación.

En este post, vamos a aprender cómo desarrollar una aplicación completamente funcional en unos minutos. …


Image for post
Image for post

If you want to read the English version of this article, click here.

Con Azure Logic Apps uno puede construir rápidamente Workflows escalables para integrar aplicaciones y datos de múltiples servicios en la nube o sistemas on-premise. Este post es la segunda entrega de una serie de posts sobre Azure Logic Apps:

  1. Introducción a Azure Logic Apps.
  2. Automatiza el envío de emails y respuestas en unos pocos pasos, basado en criterios customizables.
  3. Cómo automatizar las tareas repetitivas de tu trabajo e incrementa tu productividad.
  4. Cómo conectarse a diferentes APIs sociales para desarrollar una pieza de tu aplicación.

En este post, vamos a aprender cómo desarrollar una aplicación completamente funcional en unos minutos. …


Image for post
Image for post

Si quieres leer la versión en Español de este artículo, haz click aqui.

With Azure Logic Apps, you can quickly build scalable workflows that integrate apps and data of several cloud services and on-premises systems. This post is the second delivery of a series of posts about Azure Logic Apps:

  1. Intro of Azure Logic Apps.
  2. Easy connecting with know services and send automated replies to emails, based on customized criteria defined by you.
  3. Automating repetitive job tasks to increase productivity.
  4. Connecting to different Public Social APIs to develop a piece of your app.

In this post, you will learn how to develop a fully-working application in just a couple of minutes. …

About

Mariano Vazquez

I like to create things, therefore I code

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store