Lleva tu carrera a otro nivel por menos de 1 dólar al día.

Frontend con React.js
Ruta de aprendizaje

Frontend con React.js

Aprende a desarrollar aplicaciones web, mobile y de escritorio con React.js, la librería JavaScript más popular en el mercado.
Optimiza tu trabajo como desarrollador Frontend y entra al mundo de uno de los stacks más demandados de la industria.

Contáctanos para saber más

Aprende a desarrollar aplicaciones web, mobile y de escritorio con React.js, la librería JavaScript más popular en el mercado.
Aprende las bases

Aprende las bases

Básico
Básico
Curso de React.js

Curso de React.js

Curso de Webpack

Curso de Webpack

Curso de React Router

Curso de React Router

Profundiza tus conocimientos

Profundiza tus conocimientos

Intermedio
Intermedio
Curso Básico de GraphQL

Curso Básico de GraphQL

Curso de Next.js

Curso de Next.js

Curso de Desarrollo de Aplicaciones Web con Gatsby JS

Curso de Desarrollo de Aplicaciones Web con Gatsby JS

Curso de Progressive Web Apps con React.js

Curso de Progressive Web Apps con React.js

Platzi Badges

Vuélvete un experto

Vuélvete un experto

Avanzado
Avanzado
Curso de React Native

Curso de React Native

Curso de React Avanzado

Curso de React Avanzado

Curso de Redux por Bedu

Curso de Redux por Bedu

Curso de Electron: Apps de escritorio en Windows y Mac

Curso de Electron: Apps de escritorio en Windows y Mac

¿Qué es React?

React es una librería Javascript de código abierto enfocada en el desarrollo de interfaces de usuario interactivas, está basada en componentes que encapsulan su propio estado y ciclo de vida, convirtiéndolas en grandes interfaces para el usuario.

Adentrémonos en el mundo de React y construyamos una aplicación.

Creando nuestro primer proyecto

La mejor solución para iniciar un proyecto en React.js es utilizar create-react-app. Se crea una aplicación que se ejecuta por consola que nos permite desarrollar de manera fácil y sin ninguna configuración un proyecto en React listo para trabajar de forma inmediata, liberándonos de configuraciones complejas y, lo mejor de todo, soportada oficialmente por la comunidad de React.

Para poder hacer uso de esta implementación es necesario tener instalado Node.js, utilizar el manejador de paquetes npm y desde nuestra consola o terminal ejecutar el siguiente comando:

npx create-react-app my-app

Ahora, debemos ingresar al directorio de nuestro proyecto para iniciar nuestra primera aplicación en React.

Una vez ejecutado el comando npm start, el cual inicia el proyecto en modo de desarrollo, podemos visualizar la aplicación que incluye por defecto en nuestro navegador en la ruta: localhost:3000

myapp-react.png

Para entender la estructura de nuestra primera aplicación, es necesario abrir el proyecto con el editor de código a tu preferencia, en mi caso utilizo Atom.

¿Qué contiene nuestro proyecto?

proyecto-base-react.png
  • node_modules: todos los paquetes, librerías y dependencias que utiliza nuestra aplicación.

  • public/: aquí se encuentra el template de la aplicación (index.html, favicon.ico y manifest.json).

  • src/: en este directorio se encuentra todos los recursos que le darán vida a nuestra aplicación. A medida que avancemos con estos recursos, aprenderemos a organizarlos de mejor forma.

  • .gitignore: archivo que contiene todos los directorios y archivos que deben de ser ignorados.

  • package.json: paquete donde se encuentra la configuración de nuestro proyecto, los scripts así como las dependencias que se necesitan para que se ejecute de forma correcta.

  • README.md: en este documento se incluye toda la documentación de create-react-app.

¿Qué incluye create-react-app?

create-react-app incluye una serie de librerías que facilitan la implementación, construcción y puesta en producción de un proyecto en React.

Estas son algunas de las tecnologías incluidas:

  • React – Webpack: empaquetador de archivos.

  • Babel: nos permite transpilar nuestro código a JavaScript que pueda funcionar en cualquier navegador.

  • PostCSS: para procesamiento de CSS.

  • Jest: para realizar pruebas.

  • ESLint: nos permite mejorar la calidad de nuestro código.

También una de las ventajas que tiene create-react-app es que podemos hacer cambios y verlos en tiempo real en nuestro navegador, ya que incluye un servidor de desarrollo local.

¡Hola Mundo en React!

Dentro de src/ encontraremos una serie de archivos que ejecutan nuestra aplicación actual, vamos a crear un archivo nuevo llamado HelloWorld.jsx.

helloworld.png

Ahora, abrimos el archivo index.js y vamos a actualizarlo añadiendo el componente que acabamos de crear.

indexjs.png

Guardamos estos cambios y ejecutamos nuestro servidor de desarrollo local para visualizar los cambios.

develop-server-react.png

Aprender React te permite crear fabulosas aplicaciones web, aplicaciones mobiles y aplicaciones de escritorio para GNU/Linux, Windows, OS X y sorprendentes recursos en 360. Además de sus grandes ventajas como la flexibilidad, rapidez de respuesta y organización del código.

¡Prueba la suscripción de Platzi!

¡No te pierdas nuestros lanzamientos!

Glosario

Glosario

JavaScript: JavaScript (abreviado comúnmente JS) es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos, es basado en prototipos, imperativo, débilmente tipado y dinámico.

CSS: Del inglés Cascading Style Sheets (hojas de estilo en cascada). Es un archivo que termina en .css que está vinculado desde el HTML y que controla el aspecto de la página web.

Renderizado: Es el proceso por el que pasa el navegador cuando interpreta HTML y CSS y lo convierte en el resultado final visual que ve en su pantalla.

Client-Side (Lado del cliente): Se refiere a un lenguaje que es interpretado por el propio navegador. Por ejemplo, JavaScript es descargado por tu navegador y luego se ejecuta localmente en tu máquina. Tu navegador es el "cliente".

Server-Side (Lado del servidor): Se refiere a un lenguaje que es interpretado por el servidor. Por ejemplo, PHP es interpretado por tu servidor, procesado y luego entregado a ti.

App Escritorio: Software que se encuentra instalado en el sistema operativo y se puede ejecutar sin depender de un navegador web.

Componente: Es una clase responsable de exponer datos a una view y manejar la mayor parte de la visualización de la vista y la lógica de interacción del usuario.

Interface: En algunos lenguajes de programación es un tipo de “clase” que está enfocada en la reutilización de acciones o métodos entre familias (jerarquía padre-hijo de la herencia). En experiencia de usuario representa el punto de contacto entre usuario y máquina o elemento análogo.

Aprende de los mejores

Roberto González

Roberto González

CTO y fundador en Aerolab

@robertcode
Adrián Estrada

Adrián Estrada

Support Engineer en NodeSource

@edsadr
Roberto González

Roberto González

CTO en Aerolab

Richard Kaufman

Richard Kaufman

Ingeniero Frontend en Kickass Partners

@sparragus
Miguel Ángel Durán

Miguel Ángel Durán

Adevinta Spain en Lead Frontend Architect

@midudev
José Carlos Correa Mandujano

José Carlos Correa Mandujano

Lead Teacher en IronHack

@jossdz

Comparte tu conocimiento

Rutas relacionadas para complementar tu aprendizaje

Desarrollo con Angular
Ruta de aprendizaje

Desarrollo con Angular

Intermedio
Desarrolla aplicaciones web y móviles con Angular, el framework más usado en el mundo para el desarrollo de apps.
Arquitectura Frontend
Ruta de aprendizaje

Arquitectura Frontend

Básico
Crea sitios web desde cero con una interfaz gráfica dinámica y atractiva en el navegador y dispositivos móviles, aplicando HTML, CSS y Javascript.
Desarrollo de Apps con React Native
Ruta de aprendizaje

Desarrollo de Apps con React Native

Avanzado
Crea aplicaciones nativas para iOS y Android con Javascript y React.

¿Qué estás esperando?

Empieza a estudiar ahora y asegura tu futuro