Tu primer proyecto con React

Un aporte, espero les sirva.

Si ustedes observan cuando el profe Devars cambia entre directorios (carpetas), cuando pone el comando “cd” luego se debe introducir el nombre del directorio, entonces para no escribir por completo el nombre del directorio ya sea porque es muy largo o por mayor productividad lo que se puede hacer es: poner el comando “cd” seguido de las primeras iniciales del directorio y luego presionan la tecla Tab en su teclado, y listo la terminal reconoce a que directorio se refieren y los mueve hacia el.

Pero esto funciona para muchas otras cosas en la terminal, no solo para movernos entre directorios.
Jueguen con la terminal a que les auto-complete las palabras que quieren escribir. 😃

El comando:

npx create-react-app my-app

No me corría lanzaba el siguiente error:

command not found: npx

Solución: después de una pequeña búsqueda descubrí que faltaba npm (Sistema de gestión de paquetes por defecto para Node.js). Para instalarlo ejecuten:

sudo apt install npm

Al culminar la instalación reinicien su terminal y ejecuten el comando npx create… y listo.

Espero le ayude a alguien cuya terminal lanze el mismo error.
Saludos :v

Hola, he modificado el sitio web como reto personal. Aquí les presento las modificaciones:

Este es el código JavaScript de “App.js”:

Excelente intro a React, yo no se nada de react o vue o esas cosas pero esta clase es una excelente intro para empezar a aprender de ellos.

No sirve de nada instalar las cosas si no las usamos

Tu primer proyecto con React 12/17

• Aplicación con reactjs
• ir a la documentación oficial de Reactjs para ver los comandos en terminal para crear una App y ejecutarlos en la terminal de nuestra distribución de Linux (los comandos son scripts)
• cambiamos el nombre de nuestro archivo “mi-primer-app”
• npx es una utilidad que viene con nodejs
• nos movemos a la carpeta creada y visualizamos lo que contiene con ls -l
• code . Para abrir el editor de código en la carpeta actual
• En el explorador de archivos de VS podemos ver la carpeta “public” donde se guarda la información cuando se genera la App. En la carpeta “src” está el código de la App (JSX)
• podemos abrir una terminal desde VS
• ejecutamos “npm start” para iniciar la App
• modificamos el texto y vemos como se modifica la App esto se logra gracias al Hot reloading
• Live server y Reacjs tienen Hot reloading

Pasito a pasito se llega…

Ingresa a la pagina oficial

https://es.reactjs.org/

Ejecutar cada comando individualmente

npx create-react-app my-app

cd my-app

npm start

Clase 12 – Tu primer proyecto con React

¿Para qué sirve React.js?

• Para crear interfaces en la web.

¿Qué pasos debemos realizar para crear una aplicación con React.js?

• Ir a la documentación de React.js.
• Ir a la sección “Crear una nueva aplicación”.
• Abrir la terminal y ejecutar el comando npx create-react-app nombre-app
• Nos movemos al directorio nombre-app con el comando cd.
• En el directorio de la aplicación ejecutamos el comando npm start.

¿Cuándo instalamos Node.js también se instala NPX?

• Sí.

¿Podemos escribir el nombre de la aplicación de React usando mayúsculas para separar palabras?

• No, debemos usar guiones para separarlas.

¿Node.js ayuda a que las descargas necesarias para crear una aplicación en React.js funcionen correctamente?

• Sí.

¿Cómo podemos abrir Visual Studio Code desde la terminal de Ubuntu?

• Con el comando “code .”.

¿En qué lugar encontramos todo el código fuente de la aplicación de React.js?
o En el directorio src.

¿Podemos ejecutar el comando npm start desde la terminal de Visual Studio Code?

• Sí.

¿Cuál es el archivo que podemos editar en la aplicación de React.js?

• App.js

React

React is a free and open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.
https://en.wikipedia.org/wiki/React_(JavaScript_library)

Por alguna razón el comando npx create-react-app me tira un error, no sé si mi conexión a internet es muy lenta pero parece que pasado un tiempo es incapaz de descargar los archivos y me tira algo como un error de fetch porque no se encontró el archivo después del timeout de 30 segundos.

hoy :
react como hacer tu primera aplicacion
futuro : react aplicaciones 2025

Perfecto! vamos avanzando…

React listo!

Si te bota un error de “[email protected]” solo instala tar globalmente

npm install tar@6 -g

más info aquí

Un aporte para aquellos que no tengan npm instalado, corran el comando:

sudo apt install npm

Ahora reconoce npx sin problema.

Que bonito siento que todos mis conocimientos se estan complementando

chicos para los que no les deja subir de vercion esta pagina tiene el paso a de como hacerlo para subira la lts v16 😃
https://www.digitalocean.com/community/tutorials/como-instalar-node-js-en-debian-9-es

excelente

Tu primer proyecto con React.js

¿Qué es React.js?

ReactJS es una de las librerías más populares de JavaScript para el desarrollo de aplicaciones móviles y web. Creada por Facebook, React contiene una colección de fragmentos de código JavaScript reutilizables utilizados para crear interfaces de usuario (UI) llamadas componentes.
.
Es importante señalar que ReactJS no es un framework de JavaScript. Esto porque sólo es responsable de renderizar los componentes de la capa de vista de una aplicación. React es una alternativa a frameworks como Angular y Vue, que permiten crear funciones complejas.
.

¿Qué es NPX?

NPX significa Node Package Execute y viene con npm. Es un ejecutor de paquetes npm que puede ejecutar cualquier paquete que desee desde el registro npm sin siquiera instalar ese paquete. El npx es útil durante un paquete de uso único. NPX nos permite usar las herramientas de línea de comandos de instalación locales sin necesidad de definir el script de ejecución de NPM y permitirnos realizar solo un script sin tener que instalarlo al local.
.

Ejecutar un React por medio de npx

• Abrir la terminal de comandos.
• Ejecutar el comando npx create-react-app “proyectName”.
• Aceptar la instalación del paquete de react.
• Ejecutar cd “proyectName” para movernos a la carpeta dónde se instaló el paquete de React.
• Ejecutar el comando npm start y aceptar los procesos para que el proyecto se ejecute en nuestro navegador.

Luego de instalar Synaptic, me aparecio un error que no me permitia continuar, dejo el video con el que pude solucionar:
Solucionar: E: No se pudo bloquear var/lib/dpkg/lock en Ubuntu 18.04
https://www.youtube.com/watch?v=QzzwI0QkmjA

¿Qué es React?

React es una biblioteca de JavaScript para la construcción de interfaces de usuario. Fue desarrollada por Facebook y se ha vuelto muy popular para construir aplicaciones web y móviles.
React utiliza un enfoque de componentes para construir aplicaciones, lo que significa que las aplicaciones se dividen en componentes individuales que se pueden reutilizar y combinar para crear una interfaz completa. React es conocido por ser eficiente y rápido, y se utiliza ampliamente en aplicaciones de alta complejidad y requisitos de rendimiento.

Primer proyecto React

Vamos a ver de que se trata este framework

Nunca utilizar solo un espacio, siempre colocar -

Muy bueno hasta ahora el curso, exelente el profe

Hola a todos!

Si no les permite instalar react al primer comando, utilicen este para habilitar la funcion:

sudo apt install npm

😄

Es increible que podamos aprender con React, ya pronto lo hare.

bien explicado la clase

Muchas gracias. Lo logré. Tuve que reiniciar 2 veces mi computadora. Pero al final lo logré. Aquí la prueba.

Para abrir la terminal de manera más eficiente pueden usar el comando Ctrl + Alt + T.

Uff pensando seriamente tomar un curso de React

Excelente clase

excelente esta clase.

React es el framework más diverso (en términos de todas sus utilidades) y popular de JS, me encanta!

¡Hola!

Actualmente están reescribiendo la documentación de React y tienen una sección muy buena para aprender esta librería de JavaScript. Aquí te la dejo para que puedas darle una revisada. 😃

A seguir practicando

Ahí voy aprendiendo

React es una biblioteca de JavaScript de código abierto y se usa a menudo como V en MVC porque usa un DOM virtual de JavaScript, que es más rápido que un DOM ordinario. Esto permite un modelo de programación más simple que ofrece un mejor rendimiento.

React te ayuda a crear interfaces de usuario interactivas de forma sencilla. Diseña vistas simples para cada estado en tu aplicación, y React se encargará de actualizar y renderizar de manera eficiente los componentes correctos cuando los datos cambien.

si no sabes react no te preocupes en este curso no llevaremos react

muy buen video con todos los paso a paso para hacer la practica

Gracias!