Fullstack part1 | Introducción a React

Tags

Top Highlights

• La forma más fácil de empezar es utilizando una herramienta llamada create-react-app

• Creemos una aplicación llamada part1 y naveguemos hasta su directorio.

• La aplicación se ejecuta de la siguiente manera:

• De forma predeterminada, la aplicación se ejecuta en el puerto localhost 3000 con la dirección http://localhost:3000

• El código de la aplicación reside en la carpeta src.

• Simplifiquemos el código predeterminado de modo que el contenido del archivo index.js se vea así:

• Los archivos App.js, App.css, App.test.js, logo.svg, setupTests.js y reportWebVitals.js pueden eliminarse ya que no son necesarios en nuestra aplicación en este momento.

• renderiza su contenido en el elemento div, definido en el archivo public/index.html, que tiene el valor de id 'root'.

• El archivo index.js ahora define un componente de React con el nombre App

• el comando en la línea final

• Echemos un vistazo más de cerca al código que define el componente:

• Técnicamente, el componente se define como una función de JavaScript. La siguiente es una función (que no recibe ningún parámetro):

• La función luego se asigna a un variable constante App:

• La función que define el componente puede contener cualquier tipo de código JavaScript. Modifique su componente para que sea de la siguiente manera y observe lo que sucede en la consola:

• También es posible renderizar contenido dinámico dentro de un componente.

• Modifique el componente de la siguiente manera:

• Se evalúa cualquier código JavaScript entre llaves y el resultado de esta evaluación se incrusta en el lugar definido en el HTML producido por el componente.

• La compilación está a cargo de Babel. Los proyectos creados con

• están configurados para compilarse automáticamente.

• En la práctica, JSX se parece mucho a HTML con la distinción de que con JSX puede incrustar fácilmente contenido dinámico escribiendo JavaScript apropiado entre llaves.