React JS - Primeros pasos

Tantos años trabajando en el desarrollo web, básicamente mi fuerte siempre fue el backend, y es por eso que decidí empezar a fortalecer la parte respecto a la interfaz de usuario. A lo largo de estos meses voy a ir trabajando en los UI Frameworks mas populares de la actualidad. 

Empecemos por lo básico que cualquier novato, que aspira a conocer un lenguaje o framework nuevo, haría al empezar... ir a la fuente: https://es.reactjs.org, dentro del sitio de React tenemos una parte donde te enseñan React haciendo un juego (learn by doing  o aprender haciendo) o sino el clásico tema por tema con códigos de ejemplo. Yo empecé viendo el juego ya que me gusta hacer videojuegos pero al finalizarlo noté como que iba muy rápido como para alguien que nunca vio JSX o React. JSX?... si ya hablaremos de el. Por lo pronto nos enfocaremos en los conceptos principales: https://es.reactjs.org/docs/hello-world.html

Ok, ya tenemos por donde empezar a leer, ahora bien, donde puedo probar lo que vaya aprendiendo?, básicamente hay 2 formas, la primera y mas rápida es utilizar un entorno online donde pueda tirar el código y ver su ejecución, para eso existe: https://codepen.io/

Ahora bien, el siguiente paso sería registrarse y una vez que estemos registrados y hayamos iniciado sesión con nuestra cuenta pasamos a configurar el entorno.

Configurando CodePen


Lo primero que hacemos es ir al menú que esta en la izquierda de la pantalla y creamos un "Pen" nuevo

Luego veremos el area de trabajo dividido en 4 áreas: HTML, CSS, JS y la vista previa.

Lo primero que haremos es configurar la parte de JS para que trabaje con React, y es lo único que necesitamos por ahora. Clickeamos en el engranaje

Luego se abrirá una ventana donde buscaremos las referencias a React

Escribimos la palabra React y nos saldrán las referencias

Agregamos "react" y "react-dom", y nos debería quedar algo asi

Por ultimo hay que elegir el pre-procesador de JS

Elegimos TypeScript

Una vez agregado le damos al boton verde "Save & Close" y listo para empezar a jugar con React.

Pero antes, al menos para mi gusto, ajusto el entorno de trabajo para poder ver mejor el código, así que si le dan doble click sobre los nombres HTML, CSS o JS se expandirán o colapsaran. 

Ya estamos listos para empezar a tirar el primero Hola Mundo en React.

Hola Mundo desde React

Lo primero que haremos es crear en el área de HTML un div que funcionara de contenedor o nodo raiz que es donde se alojara todo el contenido de React.

Luego crearemos un elemento en el área de JS, un elemento, según la pagina de React, es lo que quieres ver en pantalla.

Acá es donde entra a jugar JSX, y para explicarlo citaré lo que dice en la web de React:
"Se llama JSX, y es una extensión de la sintaxis de JavaScript. Recomendamos usarlo con React para describir cómo debería ser la interfaz de usuario. JSX puede recordarte a un lenguaje de plantillas, pero viene con todo el poder de JavaScript. JSX produce “elementos” de React."

Para mas información sobre JSX: https://es.reactjs.org/docs/introducing-jsx.html

El siguiente paso es renderizar ese elemento y para ello utilizaremos la clase ReactDOM y llamamos al método render, al cual le pasamos el elemento a renderizar y el contenedor donde será renderizado. Para mas información acerca de ReactDOM: https://es.reactjs.org/docs/react-dom.html

Una vez escrito el código, CodePen lo ejecutará de inmediato y podrás ver el resultado en el área a la derecha.
Para mas información sobre renderizado de elementos: https://es.reactjs.org/docs/rendering-elements.html

Creo que este es un buen punto de partida para comenzar. Saludos!