Curso de Reactjs | ¿Qué es Reactjs?

Sí has escuchado mucho de la biblioteca React.js para hacer aplicaciones web asombrosas, rápidas y escalables, y quieres aprenderlo, estos son algunos de mis recursos que te preparo para que puedas aprender por ti mismo. Pero antes necesito que tengas bases en los siguientes temas, de lo contrario React.js se te hará más complicado de entender:

- Javascript de lado cliente y Moderno, debido a que React.js es un framework del lado del cliente hecho en javascript, necesitas comprender la sintaxis de javascript y sus características básicas del lenguaje y algunos conceptos de las ultimas versiones de este lenguaje que se usaran a través de un Transpilador.
- Nodejs y NPM / Yarn
- (Recomendado) MVC
- (Recomendado) SPA

Esta publicación es una serie de Publicaciones llamadas "Curso de Reactjs", en las que tenemos:



¿Que es React.js?


Para comprender React.js de la manera correcta, tenemos que saber que es y que no es:

React.js es: 

  • Una biblioteca Open Source, para construir interfaces de usuarios dinamicas 
  • Creada por Facebook e Instagram y Mantenida por muchos desarrolladores individuales para crear interfaces de usuario dinámicas o aplicaciones web mono paginas, también conocidas como SPA
  • La"V" En el patrón de MVC, debido a esto es posible combinarlos con frameworks como angularJs, Ember, Meteor y con otras bibliotecas como Knockout.
  • Usa virtual DOM
React.js NO es:

  • Un framework
  • no usa templates, utiliza javascript

Ventajas de Reactjs

  • Permite diseñar vistas declarativas para cada estado de tu aplicación
  • Encapsulación de componentes
  • Propiedades y estados dinámicos
  • Utiliza un Virtual DOM
  • Es completamente independiente del resto de la aplicacion
  • Puede renderizarse en el Servidor y el Cliente, aunque es más común usarlo en el cliente
Características de React.js
  • States - Estados, te permite diseñar vistas simples y declarativas para los estados en tu aplicación
  • Componentes (arquitectura, creación y montaje), los componentes de react.js están divididos en propiedades y métodos
  • Props, son datos que vienen del exterior del componente
    • State, son datos que pueden ser instanciados desde el interior
  • JSX, usa jsx que combina javascript y xml, para facilitar la creación de componentes, que a su vez puede poseer sub-componentes
  • LyfeCycle
  • Virtual Dom
  • Modular, Es Completamente independiente del resto de tu Aplicación, debido a que solo es una biblioteca para la vista, solo se encargar de eso, pero puedes integrarlo con otros frameworks como Meteor, backbone, ember, y mucho más.
  • Puede ser renderizado en el Cliente y en el Servidor
  • Curva de aprendizaje amigable
  • Muchos desarrolladores usan react con un patron de flujo de datos llamado Flux
  • Posee Flujo en una sola dirección

Componentes

Los componentes son una API reusable. es como crear nuestras propias etiquetas HTML o muchas otras. Estos componentes de Reactjs nos permiten descomponer nuestra aplicación en múltiples partes. es decir un componentes puede estar conformado por:
  • HTML
  • CSS
  • Javascript

Virtual DOM

React.js abstrae el dom y crea su propia versión que es mucho más simplificada e incluye solo las cosas que tu necesitas.
  • ayuda a identificar que partes han cambiado para no renderizar todo
  • Determina como cargar el Dom más eficientemente. ademas es mucho más ligero y por lo tanto más rápido

JSX

  • Lenguaje de dominio especifico
  • luce como XML/HTML
  • define una sintaxis familiar para definir estructura de árbol con atributos
  • No es requerido, pero es recomendado debido a que hace el trabajo mucho más fácil

Comentarios

  1. gracias por el material que compartis, tus videos y articulos me sirvieron de mucho

    ResponderEliminar
    Respuestas
    1. Gracias por el comentario, también sirve bastante :)

      Eliminar
  2. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  3. Gracias por el contenido esta muy bien explicado, Fazt soy uno de tus seguidores en Youtube.

    ResponderEliminar
  4. Sabes que ta falto, que pongas las sintaxis que maneja React.

    ResponderEliminar

Publicar un comentario