Fundamentalmente, solo es azúcar sintáctico para la función de React:
React.createElement(component, props, ...children)
(por eso necesitamos tener a React dentro del scope del proyecto)

Fue creado con la intención de que los preprocesadores (ej. Babel.js) lo transformen en ECMAScript estándar.
Es decir, el gran propósito de JSX es el de proveer una sintaxis –familiar y concisa (tipo HTML/XML)– para
	definir estructuras de nodos con propiedades y atributos.
Existen un par de “reglas” para utilizar JSX:
	Escribir nuestros propios componentes con capitalización. <App />
	Escribir los componentes built-in (HTML) con minúsculas. <img />
JSX no es ni HTML, ni XML; solo se asemeja para ayudar a la legibilidad –para parecer más familiar.
	Es un simple patrón de composición de funciones pero con una sintaxis similar al HTML/XML.
En realidad, la mayor diferencia –visual– entre JSX y HTML, es el tener que usar className para agregar una clase,
	ya que class es una palabra reservada en JS.

Babel https://babeljs.io/

Babel es un preprocesador de Javascript que entiende versiones de Javascript modernas (como ES6) y las convierte a
	una versión compatible con la mayoría de los navegadores.

Herramienta que ejecuta Babel online: http://traductor-babel.surge.sh/ Permite que se ingrese JSX y muestra el javascript necesario para crearlo utilizando javascript clásico. Ej: lala

CodePen "Hola mundo" en React: https://codepen.io/correooke/pen/vzwPqX

Un CodePen es un proyecto online, editable, que permite realizar pruebas de concepto (o incluso proyectos completos) y
	compartirlos muy fácilmente con quien se desee.

Configuración básica para utilizar con React:
	Desde las opciones de configuración del CodePen elegir:
		JavaScript Preprocessor:	Babel
		Add External Scripts/Pens:
				https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js
				https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js

8. Creación de app react

   Instalación de paquetes de NPM de manera "global": https://docs.npmjs.com/getting-started/installing-npm-packages-globally

   Instalación de Yarn: https://yarnpkg.com/en/docs/install

   Utilización de npx para crear una nueva aplicación: Weather App npx create-react-app weather-app * Cuando quise ejecutar npx create-react-app me pasaba lo mismo que cuando ejecutaba create-react-app weather-app, que me apareceía un mensaje que decía que estaba usando una versión vieja de create-react-app. Descubrí que estaba instalado create-react-app no solo en la carpeta node_modules global de npm, sino que también en la carpeta de instalación de nodeJS. Al eliminarlo de todos lados pude ejecutar sin problemas: npx create-react-app weather-app y se creó correctamente una nueva aplicación de React.

   Create React App Es una herramienta que facilita crear de una forma fácil una SPA (Single page application) con todas las mejores recomendaciones de Facebook, sponsor principal de React. Esta app tendrá las mejores prácticas incluídas, la configuración correcta de Babel, y la configuración correcta de WebPack (herramienta que toma los distintos archivos de nuestra app y genera lo que se llama un bundle, un paquete con la aplicación listo para ejecutarse.) También viene configurado algo llamado "Hot reload", que es una funcionalidad que recarga nuestra página automáticamente cuando detecta que el código fuente de la misma es modificado. Esto permite ver casi en tiempo real el resultado de las modificaciones que hagamos a nuestra aplicación.

   Primera ejecución de nuestra aplicación: Entrar a la carpeta que se acaba de crear: cd weather-app yarn start // Se puede ejecutar también npm start. Con esto se abrirá una ventana del navegador con la aplicación funcionando.

   Estructura de carpetas: Create-react-app dentro de la carpeta de la aplicación creó las siguientes carpetas: - public Carpeta que posee nuestro archivo princial, index.html, el cual posee un nodo con id "root", que es donde se inyectará nuestra aplicación creada con React. - src Carpeta que contiene todos nuestros componentes, incluído el archivo principal index.js que importa y utiliza el primer componente generado de ejemplo llamado App.

9. Planificación con Wireframes

   Presentación de la aplicación a desarrollar durante el curso y sus distintas partes y funcionalidades.

   Herramienta para creación de Wireframes (Bosquejos): https://balsamiq.com/

10. Creación de functional component

    Análisis del archivo "src/App.js", el punto de entrada de la aplicación, el primer componente que "index.js" renderiza.

    Creación de una carpeta para almacenar los componentes: "src/components"

    Simpre que se utiliza JSX para crear un componente, primero se debe importar React (que es quien permite su utilización): import React from 'react'

    Creación del primer componente funcional: "components/WeatherLocation.js" const WeatherLocation = () => {

    Para que el componente creado pueda ser consumido desde otras partes de la aplicación, el mismo debe ser exportado desde el archivo donde está definido, esto se hace con: export default WeatherLocation

    Importación y uso del componente WeatherLocation desde "src/App.js": import WeatherLocation from './components/WeatherLocation' // ES6 asume que el archivo importado tiene la extensión ".js" por eso // se puede omitir la misma (no es necesario poner "WeatherLocation.js") function App() { return (

11. VSCode Plugins y extensiones

    Plugins que hacen VSCode más interesante y útil: vscode-icons Reactjs code snippets

12. ES6 Arrow Functions

    Explicación y ejemplos de funciones flecha.

    • Son el nuevo standard que provee ECMAScript (la especificación de Javascript)
    • Son anónimas: () => { } En caso de necesitar referenciarlas se deben guardar su referencia en una variable: const miFuncion = () => {}
    • No pueden ser utilizadas como constructores.
    • Cuando posee una sola línea no es necesario que tengan la palabra return.
    • Si tiene un solo parámetro, el mismo no necesita ser envuelto en paréntesis Si tiene cero más de un parámentro, entonces si deben ir los paréntesis.

13. Ejercicio: Creación de componentes e importación

    Creación de componentes: "/components/Location.js" "/components/WeatherData.js"

14. Componentes WeatherExtraInfo y WeatherTemperature

15. Uso de parámetros / Herramientas de debugging

    Para pasarle parámetros a un componente, se deben agregar al mismo, en la invocación, atributos con valores. Éstos atributos, serán pasados por React al componente y dentro de los mimsos estará el valor asígnado a cada uno en la invocación al componente. Métodos de debugging: Pablabra clave: debugger; Cuando esta sentencia se deja en el código la misma funciona como un breakpoint, por lo tanto la ejecución de este programa se pausará al llegar a esta línea, pero para que eso suceda se debe debuggear la aplicación.

    Uso de Chrome para debugging: En nuestro sitio web presionamos F12 y se abrirá el panel de herramientas de desarrollador de Chrome, en este panel ir a la solapa denominada "Sources" y recargar la página. Al recargarse la página se vuelve a ejecutar nuestro programa y al llegar la ejecución a la línea con la sentencia "debugger" la misma se detendrá en ese punto, permitiendonos inspeccionar el estado y contenido de las distintas variables y objetos de nuestra aplicación en ese momento. En caso de necesitar puntos de interrupción adicionales, no es necesario modificar el código, sino que se pueden establecer haciendo click en cualquier número de línea de la banda numerada a la izquierda del código en el panel de código de la solapa "Sources", una vez creado un punto cada vez que la ejecución pase por ahí se pausará como con la instrucción "debugger".

16. Parámetro con Object Destructuring

    https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/Destructuring_assignment

    Destructuring es una técnica que es parte de ECMAScript 6 que establece que cuando tenemos una propiedad con un nombre que luego queremos asignar a una variable/constante con el mismo nombre que lo propiedad, la podemos asignar de forma directa con esta técnica:

    Sin Destructuring:
    	const MiComponente = (props) => {
    		const city = props.city;
    
    Con Destructuring:
    	const MiComponente = (props) => {
    		const { city } = props;
    
    Si el objeto props tuviera más propiedades que quisiera asignar a constantes, se pueden obtener así:
    	const MiComponente = (props) => {
    		const { city, address } = props;
    
    Simplificando más el código utilizando Destructuring:
    	const MiComponente = ({ city }) => {
    		const city = city;
    

17. ES6: Object Destructuring

    const obj = { name: 'Jonatandb', nick: 'Jony' }; const { name: myName, nick: myNick } = obj; // Extraigo de obj los valores de name y nick pero lo asigno a nuevas constantes de nombre myName y myNick console.log(myName); // Jonatandb console.log(myNick); // Jony

    Otro caso: const { name, nick } = obj; // Cuando extraigo los valores de las propiedades de un objeto y las asigno a variables del mismo nombre, puedo omitir // la declaración de las